Firstly, it's probably sensible to challenge your plan to use images for charts; alt
text can provide a suitable substitute for text for users with some assistive technology, but aren't nearly as helpful for users with colour vision issues, cognitive issues, foreign language speakers, etc. Defining any graph with actual DOM nodes (or actual text inside SVGs) allows things like copy/paste, customised typefaces, and page zoom, which are equally valuable accessibility technologies for some users.
In this way, charts embedded as images are only marginally less problematic than tables embedded as images.
You should consider whether the content you're putting into the alt
text would be better served as a <figcaption>
element. There's a good write-up of the difference between alt
text and <figcaption>
at thoughtbot (emphasis theirs):
While both the alt
attribute and the figcaption
element provide a way to describe images, the way we write for them is different. alt
descriptions should be functional; figcaption
descriptions should be editorial or illustrative.
If (e.g. for technical reasons) the charts cannot be reasonably converted over to structured data, the alt
text is only one way you can go about conveying the data in the chart. The advice WCAG provides for data charts is as follows:
A bar chart compares how many widgets were sold in June, July, and August. The short label says, "Figure one - Sales in June, July and August." The longer description identifies the type of chart, provides a high-level summary of the data, trends and implications comparable to those available from the chart. Where possible and practical, the actual data is provided in a table.
This is referred to as Situation B, where "a short description can not serve the same purpose and present the same information as the non-text content (e.g., a chart or diagram)".
As described on that page, your job is to pull the key information (that is, the implications the chart describes) out of the chart and into text (either alt
text or, ideally, in the supporting text on the page around the graphic), but then ideally to pull the actual data out of the chart and into a table to be interpreted explicitly for people who need to access the values themselves. For any long text alternative for a graphic, WCAG requires that the link to the long text is appropriately connected to the graphic (either defined "nearby" and/or with the applicable aria
attribute, or with a link from a caption, etc.).
This approach helps not only users of screen readers but all your readers.