SVG Accessibility Basics Presented by Brian Mc Neilly
SVG Accessibility Basics Presented by: Brian Mc. Neilly
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 2 | March 2, 2017 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 3 | March 2, 2017 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 4 | March 2, 2017 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! • Advantages: • Smaller file sizes • More control over code • Disadvantages: • More knowledge of SVG language requried 5 | March 2, 2017 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 6 | March 2, 2017 CSUN 2017 Assistive Technology Conference
General Best Practices
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 8 | March 2, 2017 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 9 | March 2, 2017 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 10 | March 2, 2017 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 11 | March 2, 2017 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 SVG 2 • High Contrast Modes and click targeting in SVGs 12 | March 2, 2017 CSUN 2017 Assistive Technology Conference
SVG Use Cases
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 14 | March 2, 2017 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, noncolor, means for indicating different sections • When in doubt, provide a textual description of important findings 15 | March 2, 2017 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 16 | March 2, 2017 CSUN 2017 Assistive Technology Conference
More Advanced Solutions
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 18 | March 2, 2017 CSUN 2017 Assistive Technology Conference
Questions?
Additional Resources & Image Citations • SVG 2 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
- Slides: 20