526 - Images

Approach #4: Using the aria-describedby attribute

Use the aria-describedby attribute to point to a more detailed description already located on the web page

In this example, the long description is located in another section of the web page (i.e., id="description"). Unlike the aria-label or aria-labelledby attributes, this attribute is used in addition to the alternative text description (i.e, alt).

See below:

Approach #4 Example:

Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3, a detailed description is provided below

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, a detailed description is provided below" aria-describedby="description">
                            
</p>
                            .
                            .
                            .
                            .
                            <h4><em>Example.com</em> First Quarter Visitors</h4>
                            <p id="description">This is the section where you would include the detailed description of the 2014 First Quarter Visitors to example.com websites...</p>

Example.com First Quarter Visitors

This is the section where you would include the detailed description of the 2014 First Quarter Visitors to example.com websites...

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?