Last week, Level Access Accessibility Consultant Brian McNeilly presented a webinar on Accessibility Basics for Scalable Vector Graphics (SVG). We had such a great turnout and there were so many good questions, but unfortunately only a short period of time to address them. Fortunately, we captured the questions from the presentation and answer them in this post which we hope you’ll find useful.
For more information on this topic, you can access the webinar slides, transcript, and recorded presentation here:
SVG Accessibility Basics Webinar Resources.
Q: Do pinch and zoom work with SVG graphics on mobile devices?
A: Yes! SVG graphics, in both Android and iOS, can be magnified using standard pinch and zoom gestures.
Q: How do you deal with images that have multiple flows (e.g. flow charts)?
A: This is a complex question. One possibility would be to use links and fragment identifiers, allowing users to move focus down different flows as they select links. An alternative solution would be to script an entire custom experience through the use of the ARIA role of application. Currently, highly interactive, and non-linear content is difficult to render to users.
Q: How do you provide proper reading order for graphics?
A: Similar to HTML, reading order for SVG is determined by the order of content within the DOM. When creating content it is essential to consider the order that DOM elements are added within the SVG.
Q: Is the pause/stop/hide only needed if animation action is longer than 5 seconds?
A: Within WCAG, the requirements for pausing, stopping, and hiding content apply only to content that is animated for more than 5 seconds. However, providing a means to stop animation from occurring at all, or controlling it even if it lasts for less than five seconds is not a bad idea from a design perspective.
Q: Are negative tabindex values possible?
A: Yes, just like HTML, negative, positive, and zero are all acceptable values for the attribute.
Q: Are child elements of a root element with focusable=”false” still focusable, or does a focusable=”false” block focus on child elements as well?
A: If focusable=“false” is set on an SVG root element, the child elements of that should still remain focusable.
Q: Are there open source libraries available for graphing and charting? Would you recommend some?
Q: Would adding gaps between slices of a pie chart be helpful to users?
A: Adding gaps between slices may help users visually identify two different pie slices, if color alone was being used to define boundaries. However, researching different types of pie charts has also implied that separating slices may contribute to readers interpreting the charted results less effectively.
Q: Would you recommend that each chart or graph be accompanied by an html table displaying the data where practical?
A: Where practical, this will definitely help. HTML tables have very robust assistive technology support, and some users may find tables easier than charts or graphs to interpret.
Q: As long as there is another means of conveying the info, color can still be used to make it easier for users with cognitive disabilities, right?
A: Certainly. Color can be very helpful when interpreting content. However, problems arise when color is the SOLE means of indicating information.
Q: Which way is the preferred or correct from a standards point of view, using ARIA attributes or using TITLE or DESC elements?
A: As described in the First rule of ARIA use, “If you can use a native [SVG] element … or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.” [emphasis in original]. Though the source document is referencing HTML content, this holds true for SVG as well.
Q: How good is BrAT (browser & assistive tech) support for TITLE, DESC and ARIA?
A: The support for title and desc elements within SVG are some of the most well supported features within browsers and ATs. The ARIA attributes aria-label, aria-labelledby, and aria-describedby are also fairly well supported. However, more complex ARIA roles, have less robust support at the moment.
Q: Could you provide an example where one may have to use ARIA attributes instead of TITLE and DESC elements?
A: An example of a subway system map comes to mind. Text may exist in a legend, containing a label for a specific icon, say a connection to a separate bus system. Rather than include a separate title element for this icon every time it is used, an aria-labelledby attribute could reference the ID of the text within the legend.
Q: Are there repositories of SVG with the appropriate tags used?
A: The SVG Authoring Guide contains numerous examples of best practices when authoring SVGs. Additionally, Level Access is hoping to launch a number of code examples for accessible SVG charts and graphs soon.
Q: How do the various ways of loading an SVG affect labeling?
A: The exact loading of an SVG shouldn’t typically affect labeling, so long as the SVG element has been loaded inline. If the inline image contains child title or desc elements, or ARIA attributes, these labels will be exposed to users. If the SVG has been loaded as the “src” of an HTML img element, then standard alt text should be provided to users. However, loading SVGs in this manner will remove any of the semantics, such as roles, that have been supplied within the XML structure of the SVG.
Q: Is there a good book or site you would recommend to really get started with?
A: When in doubt, I would start with the standards themselves, or any documentation put out by the W3C. The SVG Authoring Guide mentioned above has a lot of great information about the features of SVG, and how the design content effectively.
Q: Can you share any resources for settings to use when exporting SVGs from Illustrator?
Q: In the pie example, could we just use ALT TEXT for all the date in the pie?
A: Alt text often refers to the “alt” attribute used in HTML. The SVG standard does not contain a similar alt attribute. So, the programmatic method for supplying a textual alternative for visual content is through the title and desc elements, or an ARIA labeling technique.
Q: Do title and desc elements need to have unique IDs?
A: Much like in HTML, SVG requires that the id attributes contain unique values. Additionally, id attributes should not contain whitespace characters, or be empty strings.