SVG Accessibility Basics Presented by: Brian McNeilly

Formerly Known As SSB BART Group 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

CSUN 2017 Assistive Technology Conference 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

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

CSUN 2017 Assistive Technology Conference 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! Smaller file sizes More control over code More knowledge of SVG language requried CSUN 2017 Assistive Technology Conference

CSUN 2017 Assistive Technology Conference 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

General Best Practices

CSUN 2017 Assistive Technology Conference 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

CSUN 2017 Assistive Technology Conference 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

CSUN 2017 Assistive Technology Conference 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 Title and Desc (short for description) can be found within the “Object Properties” pane within Inkscape. CSUN 2017 Assistive Technology Conference

CSUN 2017 Assistive Technology Conference 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

CSUN 2017 Assistive Technology Conference 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

SVG Use Cases

CSUN 2017 Assistive Technology Conference 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

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

CSUN 2017 Assistive Technology Conference 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

More Advanced Solutions

CSUN 2017 Assistive Technology Conference 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

Questions?

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