SVG Accessibility Basics

1. SVG Accessibility Basics Presented by: Brian McNeilly

2. Who is Level Access? Formerly Known As SSB BART Group • New Corporate Identity – Name and Branding • New Website – Coming Spring 2017!! • No Change in our Innovative Technology or Excellent Service CSUN 2017 Assistive Technology Conference

3. What is SVG • SVG stands for Scalable Vector Graphics • XML-based language for defining vector images • Elements with beginning and end tags • Properties CSUN 2017 Assistive Technology Conference

4. Raster vs Vector Graphics Raster defines images in terms of pixels JPG, PNG, do this Vectors define images in terms of lines e.g. from a point, move 100 units, turn 33 degrees, move another 100 units, turn 33 degrees again, and move another hundred units. That’s a triangle! Vectors talk about how to use space, the units are left to the rendering engine CSUN 2017 Assistive Technology Conference

5. Authoring Tools • Graphical Editors • e.g. Illustrator and Inkscape • Advantages: • Easy to use an manipulate images • Less need to know the underlying code • Disadvantages: • Less control over the resulting code • Text editors: • E.g. Notepad! • Advantages: • Smaller file sizes • More control over code • Disadvantages: • More knowledge of SVG language requried CSUN 2017 Assistive Technology Conference

6. Potential Uses • Each different use case for SVG will require different remediation efforts to ensure that the image is accessible • Examples include: • Logos • Diagrams • Charts & Graphs • Maps CSUN 2017 Assistive Technology Conference

7. General Best Practices

8. Low Vision • Whenever possible, use vectors for complex images • Without pixels, users can zoom to their desired level of magnification, without content loss • High Contrast Modes • Whenever colors are chosen, color contrast must be considered • Transparency in the background can cause alternative contrast ratios CSUN 2017 Assistive Technology Conference

9. Color Blindness • Color should never be used to define meaning within content • Red-Green color blindness is the most common, and is an oft-used paradigm in data visualizations • e.g. “heatmaps” • Alternatives include CSUN 2017 Assistive Technology Conference

10. Blindness • Like all images, elements should have textual alternatives where necessary • The SVG title and desc elements can be applied to any element to provide an explicit title • NOTE: These elements, when applied will not be visually displayed • SVG text element should be used whenever possible rather than making shapes that visually render as text • Links should use the a element, just like in HTML CSUN 2017 Assistive Technology Conference

11. Animations • Generally SVGs will be static, but it’s easy to create animations using CSS • Do this intentionally, and ensure you have controls to pause and hide animations, these can be both distracting and cause nausea in some users CSUN 2017 Assistive Technology Conference

12. Interactive SVG • All interactive elements must be actionable from the keyboard as well as the mouse, and provide appropriate roles • a element with a valid href attribute will receive focus and provide role announcement (as “links”) • The focusable attribute • tabindex is officially supported as of SVG2 • High Contrast Modes and click targeting in SVGs CSUN 2017 Assistive Technology Conference

13. SVG Use Cases

14. Logos • Wherever possible, use text for words within logos, rather than shapes to define text • If this is not possible, ensure appropriate titles for images of letters • Logo Color Contrast CSUN 2017 Assistive Technology Conference

15. Diagrams, Charts, and Graphs • Ensure that there are textual alternatives for all content • For bar graphs, include numbers visually to ensure there is a textual representation of content • Utilize patterns to ensure that there are visual, non-color, means for indicating different sections • When in doubt, provide a textual description of important findings CSUN 2017 Assistive Technology Conference

16. Maps • Depending on functionality, may require hefty amounts of scripting for users of screen readers • Currently, highly complex interrelationships, such as road intersections, are not easily defined. • Touchscreens, and screen readers that support “explore by touch”-type features make perceiving these interrelationships easier CSUN 2017 Assistive Technology Conference

17. More Advanced Solutions

18. SVG & WAI-ARIA • aria-label and aria-labelledby • Differences between aria-describedby • Not all sub-elements within an SVG image will automatically be exposed to assistive technologies • Elements with labels (title or desc) • Elements with explicit WAI-ARIA roles • Active elements, either links or elements with 0 or positive tabindex values CSUN 2017 Assistive Technology Conference

19. Questions?

20. Additional Resources & Image Citations • SVG2 Spec • SVG Authoring Guide • Image Citations: • Raster vs Vector Graphics image: The original uploader was Darth Stabro at English Wikipedia [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0/)], via Wikimedia Commons • Color Blindness image: This is a derivative work of the Heatmap fussball SVG image uploaded by the user Karsten Adam under the GNU Free Documentation License version 1.2