526 - Images

Approach #1: Using a text link

Using a text link to the long description

In this example, a text link to the long description is provided beneath the image. An alt text attribute is added to provide the user with a basic description of the chart. The link opens up to a new page with a more detailed description.

See below:

Example:

Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3

Example.com Chart Description

HTML code snippet:


                            <p>
                            <img src="complexchartexample.png" alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3">
                            <br>
                            <a href="https://www.w3.org/WAI/tutorials/images/examples/2014-first-qtr/" target="_blank">Example.com Chart Description</a>
                            </p>

Screen Reader Testing Activity:

Turn on NVDA. Press the down arrow key to move through the web page. What is announced when it encounters the complex image?