{"id":4909,"date":"2021-05-25T10:33:47","date_gmt":"2021-05-25T16:33:47","guid":{"rendered":"https:\/\/www.boisestate.edu\/webguide\/?p=4909"},"modified":"2026-04-21T11:00:34","modified_gmt":"2026-04-21T17:00:34","slug":"screen-reader-demo-accessible-images","status":"publish","type":"post","link":"https:\/\/www.boisestate.edu\/webguide\/2021\/05\/25\/screen-reader-demo-accessible-images\/","title":{"rendered":"Screen reader demo: accessible images"},"content":{"rendered":"\n

Images convey information, demonstrate concepts, and add visual appeal to your web pages. Images can also help make complex topics or steps in a long process easier for some users to understand.<\/p>\n\n\n\n

However, if text descriptions aren\u2019t provided on your images then many users can\u2019t access the information in the image at all while others may struggle to understand the full meaning. In this demonstration you will learn how to provide meaningful text descriptions for users with assistive technology like a screen reader.<\/p>\n\n\n\n

Note<\/strong>: Although some studies do exist on the topic of visuals and memory, the example graphic is for demonstration purposes only and doesn\u2019t reference any specific research. To learn more about the topic read, What makes an image memorable?<\/a><\/p>\n\n\n\n

Common barriers with images<\/h2>\n\n\n\n

There are several ways images present barriers to accessing information. In this post we discuss three of the most common: no text descriptions, inaccurate text descriptions, and complex descriptions.<\/p>\n\n\n\n

1. No text descriptions<\/h3>\n\n\n\n

Images that are not described in a textual way are invisible to non-visual users. They may not even be aware an image is present on the page let alone what the image is communicating. Images require an alternative text description either through the alt text attribute or as a long description on the page itself.<\/p>\n\n\n\n

Example image with no alternative text description<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

This example image is an infographic and contains information the reader is meant to read and understand. However, there is no alternative text description making the image invisible for non-visual users. Additionally, if image doesn\u2019t load for any reason, no one will know the image is on the page.<\/p>\n\n\n\n

2. Inaccurate text descriptions<\/h3>\n\n\n\n

Images that do contain an alternative text description in the alt text attribute are readable by non-visual users. However, if the description is inaccurate, incomplete, or confusing, then it\u2019s not helpful at all.<\/p>\n\n\n\n

Image descriptions must be accurate<\/strong> and convey the purpose <\/strong>and function<\/strong> of the image. In other words, the alternative text description tells the user why the image matters.<\/p>\n\n\n\n

Example image with inaccurate alternative text description<\/h4>\n\n\n\n
\"infographic<\/figure>\n\n\n\n

In this example, the same infographic image has an alternative text description but it says \u201cinfographic image.\u201d This alerts non-visual users that there is an image, but it doesn\u2019t provide any useful information or convey the content within the infographic.<\/p>\n\n\n\n

3. Complex text descriptions<\/h3>\n\n\n\n

Text descriptions that explain every single detail of the image within the alt text attribute are helpful, but can be more difficult to understand when presented as alt text.<\/p>\n\n\n\n

If the image is complex enough, include a concise description in the alt text attribute and direct users where to find the more user friendly long description whether it\u2019s on the page or linked on a separate webpage.<\/p>\n\n\n\n

Example image with complex alternative text description<\/h4>\n\n\n\n
\"infographic<\/figure>\n\n\n\n

In this example, we have the same infographic image with a longer, more detailed description that says, \u201cinfographic image with a square blue background and a white icon of eye followed by the text 6.5 out of 10 people remember what they see. Underneath the text are 10 icons of people with 6.5 of the icons filled with orange color and 4.5 of the icons filled with white color representing the 6.5 out of 10 people who remember what they see. Following the icons of the people is a bar graph with four entries that says visual 88, graphic icons, 55, reading 25, doing 40. Graphs have patterned fill, with gray and black dots representing the number of results followed by a gray and white checkerboard pattern.\u201d<\/p>\n\n\n\n

The description is detailed and accurate but when presented as alternative text, non-visual users don\u2019t always have the option to pause or explore the description at their own pace. Instead the screen reader often reads out the alternative text as one long stream of consciousness.<\/p>\n\n\n\n

Having a long text description on the page or on a separate page provides more flexibility for users to read at their own pace.<\/p>\n\n\n\n

How can we make this image more accessible?<\/h2>\n\n\n\n

For our infographic example, it\u2019s not decorative because it is conveying information. It\u2019s also not simple enough to convey in a short description using the alt text attribute.<\/p>\n\n\n\n

Here\u2019s how we can make this information more accessible and usable for all users.<\/p>\n\n\n\n

    \n
  1. Add a heading to alert users what\u2019s in the section that contains the image<\/li>\n\n\n\n
  2. Provide a short alt text description that tells users where to find the full text description<\/li>\n\n\n\n
  3. Add full text description to page with any additional context for all users to review<\/li>\n<\/ol>\n\n\n\n

    Here is an example of the image using the Text + Image panel.<\/p>\n\n\n\n\n\t

    \n \n\t
    \n\t
    \n\t\t\n\t\n\t\n\t\t\t
    \n\n\t\t\t\t
    \n\t\t\t\t\t\n
    \n\t\t
    \n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\n\t\t<\/div>\n\t<\/div>\n\n\t\t\t\t<\/div>\n\n\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t\n
    \n\n\t
    \n\n\t\t\n\t\t\t\t\t\n\n\n\tVisuals help people remember information\n\n<\/h2>\n\t\t\n\t\t\t\t\t\n
    \n\t

    Our research indicates 6.5 out of 10 people remember what they see. When 208 survey participants were asked how they best remember information:<\/p>\n