No Images within red rounded corner container with red slash running from corner to corner
Accessibility, Case Studies, Design Thinking

Turn web images off – can you still figure out what is going on?

As Swarthmore’s Technology Accessibility Coordinator, part of my work involves testing websites to see what kinds of barriers exist to accessing content online.

I often run into sites which use images for navigation, tasks, and information.  I’m always curious to discover what might happen if I turn images off – can I still get around the site?  Is the text in the banner or main image still discernible? Can I still figure out what is the site is about when there are no images?

Examples

The descriptive text of the image in the top column of the table below is “[Image – Banner”].  However there is quite a bit more information being conveyed by the image.  A better descriptive text repeats the essential information being conveyed by a picture of text.  In this case the alt text might be “31st Annual CLAC Conference being held June 17-19, 2019.  Hosted by Bryn Mawr, Haverford and Swarthmore Colleges also known as Tri-Co – Stronger together”.  The existing alt text for this image, “Image- Banner”, implies that the image is a decorative image.  Anyone with a visual impairment would completely miss the important information contained in the image.

Descriptive text that is not meaningful
Images off website with images turned off. All the essential information about a conference is contained in an image with a meaningless alt tag
With Images All the when and where information for a conference is in an image which has meaningless alt text

In the images shown below the one on the top has a better description of the image.  It states “Students perform Bald Soprano on stage” – it gives the listener an idea of what is happening in the image and it is a complement to the title “The Show Must Go On and On and On…”

Example of Good Descriptive Text
Images off Example of images turned off. The alt text of this image states "Students perform Bald Soprano on stage"
With Images This image displays the photo of students performing on stage

 

Testing by turning images off

Here are a couple of ways I turn off images in different applications.

Chrome

Firefox

Safari

  • Safari Preferences > Advanced > check “Show Develop menu in the menu bar”
  • In the top menu notice the Develop item now appears between Bookmarks and Window, scroll down and click “Disable Images”

Gmail

Currently, GMail does not have a mechanism for adding alt text to images.  If an email is being sent which contains text in images, it is critical to add a paragraph which repeats any text contained in an image.  A better option is to add the image as an attachment only and not part of the main message.  Turning images off is a great way to determine if the essential message can be understood without images.

  • Open Gmail and click the gear icon in the top right
  • Select Settings
  • Stay in the General tab and scroll down to the Images section
  • Choose “Ask before displaying external images”
  • Click Save Changes at the bottom of the page

Questions?

Feel free to reach out to accessibility@swarthmore.edu

References