I have several infographics created using css and js, which are also interactive. Different parts of the infographics respond to the users mouse clicks and reveal further information.
Apart from making these keyboard accessible, how do I make it more accessible? For example what aria properties should I use? How do I specify alt text or textual description? Also, these infographics may contain several icons, texts and images all created using div tags in html.
You could use ARIA-live attributes in combination with correct markup to let screenreader users know of any changes to the infographics and what they are.
The issue with alt-text is, that you can't really say much. The recommended length of an alt-text is 130-140 characters. That is usually not enough to explain details of a complex image.
BOIA.org: Using Infographics While Keeping Your Site Accessible
Depending on the type of infographic and your source data, you should consider adding a text alternative that explains the graphics. And since they are dynamic, the text should update with it.
WCAG 1.1.1: Non-text Content (A)
This would give you several benefits:
You can reduce the complexity of alt-text, because the information of the graphic is explained elsewhere. So you can have a static alt-text that explains where to find the information of the infographic: "For information on the data in this image, go to the heading 'What does it mean'". And below the graphic you have a <h3>What does it mean?</h3>
Infographics can be complex stuff for a lot of people. Having a visual and a textual version of the same information, makes the content available to alle.
You can use Lighthouse in Chrome devtools to check for accessibility issues. Further reading - https://developer.chrome.com/docs/lighthouse/accessibility/scoring#:~:text=The%20Lighthouse%20Accessibility%20score%20is,partially%20passing%20an%20accessibility%20audit.
