Approach #3: Using the figure element
In this example, The long description is positioned beneath the image. Using HTML5 semantics, the figure element allows you to group both the image and long description (i.e., figcaption) together.
See below:
Approach #3 Example:
Example.com detailed chart description
This is the section where you would include the detailed description of the 2014 First Quarter Visitors to example.com websites...
HTML code snippet:
<figure role="group">
<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">
<br>
<figcaption>
<h4>Example.com detailed chart description</h4>
<p>This is the section where you would include the detailed description of the 2014 First Quarter Visitors to example.com websites...</p>
</figcaption>
</figure>
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?