Approach #1: Using a text link
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:
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?