Accessibility Design Guidelines:

Images

Why is this Important?

There are a variety of reasons to display images and each should be accessible to users via key board tabbing and those using screen readers.

Images are content on a website that is considered to be inaccessible to anyone who cannot see the images. People with vision impairments such as colour blindness, low vision or completely blind individuals are burdened by images that are not accompanied by contextual and descriptive information that provides meaning to these users.

As designers, we can implement simple solutions to these problems by incorporating some of the methods demonstrated below. These are a few examples of the ways we can ensure that a website meets WCAG standards.

Source: Photo by Melinda Neale

Best Practices

Below are examples of how to address the types of images in accordance with AODA regulations. These will vary depending upon the purpose of the image displayed and its context on a webpage.

Provide text alternatives to images so that screen readers can communicate the image description to the user.
Avoid images with embedded text as it cannot be seen by individiuals with vision impairments.
Alternative text should be short and relevant to nature of the images.
Avoid using background images. E.g, background-image: url(...);
Images of diagrams and graphs should be accompanied by related data.
Image icons used for input buttons should include alternative text. Figure A:
Links and buttons should include text that describes its purpose. Figure B:

                        <input type="image" alt="search" src="searchButton.png">

Figure A: Images used for input buttons, such as a search bar, should include alternative text.

                        <a href="https://www.aoda.ca/" role="link"> Read more about AODA</a>

Figure B: Links and buttons should include text that describes its purpose.

EXAMPLES

Click on the icons below to reveal the corresponding WCAG Success Criteria

Example 1

Aesthetic Images

Images displayed on a website may be used solely for aesthetic reasons, such as a hero image or used in a carousel. It benefits those using assistive technology to include alternative text.The alternative text (HTML) used should be short and relevant to nature of the images.

                    <img src="butterfly.jpg" alt="butterfly hovering">

Source: Image by Larisa Koshkina from Pixabay

Example 2

Product Images

Product images provide the user with a visual description of a product. Visually impaired users cannot see the product and instead be provided with relevant text information to help them with their product purchase. This benefits those using assistive technology.

                    <img src="pinkroses.jpg" alt="Pink Roses Bouquet">

Pink Roses Bouquet

Enjoy floral bouquets with our unique collection of florals. Our flower catalogue features a variety of arrangements.

BUY NOW

Photo by Irina Zhuravleva on Unsplash

Example 3

Icons Images as Buttons

Images icons are intended to generate a meaning or purpose to a user, such a as a 'share' icon. These buttons are often presented as symbols. In these cases, the icon image should have a text description assigned to it to translate it's meaning. This benefits individuals with elderly persons and people with cognitive and visual impairments.

                    <button class="button">
                      <img src="cart.svg" alt="cart button">CART
                </button>

NOTE: If you do not use text, be sure to add this code below so that the icon names can still be identified by screen readers:

                    <span class="visually-hidden"> CART</span>

                    .visually-hidden{
                          border:0;clip:rect(0,0,0,0);height:1px;overflow: hidden;padding:0;position:absolute;width:1px;                  
                        }

Source: Melinda Neale / Icons4Design

TOP: The top set of icon images have no related text description to support the symbols meaning.

BOTTOM: The bottom set of icon images relay the meaning of the button to a user. In this case, the text should not be embedded into the image but rather, as part of the website code. See example.

In addition to including text as a accessible name for a button, also ensure it has a meaningful text alternative.

Example 4

Complex Images (Graphs and Charts)

Complex images that contain information presented by graphs and charts can not be deciphered by some users with disabilities. Data must be provided via a text link by use of the longdesc="" attribute added to the image element. An additional text link can be pointed to the URL that contains a webpage of the related description of the graph or chart.
See example below.

                    <img src="datachartfig1.jpg" alt="Figure 1 Showing the percentages of users based upon age" longdesc="datachartfig1.html">

                    <a href="#" role="link">Read the details of this chart</a>

Source: Google Analytics Demo Account

Read the details of this chart

Example 5

Logo Images

Logo images usually appear at the top of every webpage in the same location throughout a website. These link to the website's homepage. If the logo image used does not contain the name of the company or convey information to that affect, a descriptive text link should be provided in conjunction with alternative text.

                    <a href="https://www.friendlyflowershop.123">
                      <img src="flowerlogo.svg" alt="flower shop logo">
                      Friendly Flower Shop Homepage
                    </a>

Friendly Flower Shop Homepage

Source: Melinda Neale

See this example in a menu

The Success Criteria for Images

Who Does This Benefit?

user IconUsing Keyboards for Navigation

vision IconVisual Impairments

computer IconPerson with a Motor Impairment

brain IconCognitive and Learning Disabilities

Learn More About Accessible Images

The Related WCAG Success Criteria

1.1.1 Non-text Content

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
(Level A)

1.4.9 Images of Text (No Exception)

Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed. Note: Logotypes (text that is part of a logo or brand name) are considered essential.
(Level AAA)

2.4.4 Link purpose (in context)

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
(Level A)

2.4.10 Section Headings

Section Headings are used to organize content.
(Level AAA)

3.2.1 On Focus

When any component receives focus, it does not initiate a change of context.
(Level AA)