The Uncharted Territory of SVG
If you’re looking to display visual data such as bar graphs and charts to low vision and blind users, what options and tools would be available for you to use?
Imagine reading a bar graph where you scan through each bar to understand the category and the amount that it represents.
• How might we be able to create the same experience for low vision and blind users?
• How can we minimize user frustration and what factors contribute to inconsistent user experience based on the tools used?
The SVG A11y Stack Project
For my UX Research internship at Fizz Studio, I worked on the SVG A11y Stack Project team to research ways in which we can improve the user experience of data visualization tools on various screen readers tools.
The SVG A11y Stack Project aims to make SVG as accessible as HTML.
To start, we are testing how screen readers work with SVG with and without ARIA (Accessible Rich Internet Applications).
Project Goals
• Document Behaviors of SVG and ARIA compared to same graphic in HTML (expected behavior)
• Testing on most popular screen reader and browser combinations
• Use these findings to encourage developers to address inconsistencies that impact user experience
Why does SVG have Potential in Accessible Graphics?
• SVG (Scalable Vector Graphics) is an image format that has the potential to provide better accessibility for low vision and blind users through assistive technologies.
• SVG is different from other image formats because it can maintain resolution through various screen sizes (resolution independence).
• SVG is made up of XML data which means it can be broken down or separated into different parts.
• SVG breaks down into multiple parts which could potentially allow a screen reader to focus on specific elements on an image. This becomes important when we want a screen reader to interpret data with multiple elements, such as a graph.
Creating graphs with SVG can make it more intuitive to read graphs using assistive technology
What is ARIA?
ARIA (Accessible Rich Internet Applications) is a set of attributes that can be added to HTML code to make web content more accessible to users who use assistive technologies such as screen readers.
ARIA provides context and information to the user by giving additional descriptive features to the elements on a web page when used with a screen reader.
HTML and ARIA
• HTML has natural semantic structure
• ARIA is able to support these native semantics to be consistently interpretable by a screen reader.
• HTML and ARIA have a semantic relationship in which ARIA is able to consistently supplement HTML information to a screen reader so that users are able to understand authors’ intent in each element designed on the webpage
SVG and ARIA
• Unlike HTML, SVG does not have native semantic structure to represent important elements that may indicate functionality and interactivity
• To potentially resolve this issue, using ARIA can add semantic structure to SVG graphics.
• However, unlike HTML, SVG and ARIA have a more complex relationship in which the interaction is theoretical but not pragmatical.
Additionally many screen readers and browser combinations have drastically inconsistent behavior in semantic elements ranging from simple buttons to more complex menus
Testing HTML and SVG Handling of ARIA
We conducted tests based on the the most popular screen reader and browser combinations used from WebAIM Screen Reader Survey of 2021:
• JAWS with Chrome
• NVDA with Chrome
• NVDA with Firefox
• VoiceOver with Safari
In our tests, we evaluated several factors including:
• Parity between the behavior exhibited by screen readers when interpreting SVG/ARIA vs. HTML/ARIA
• How functional SVGs operate with and without ARIA on various browser and screen reader combinations in comparison to the HTML counterpart
Common Issues Identified & Recorded
• Unrecognizable button elements
• Focus indicator is incorrect in binding dimensions
• Unrecognized parent/root elements
• Not reading “graphic document” for any element
Example of an issue pertaining to incorrect location of focus indicator (often used for low vision users). Issue is on VoiceOver/Safari.
Example of issue pertaining to NVDA in which it does not state the graphic document label in both SVG and HTML.
