Approach #4: Using the aria-describedby attribute
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:
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?