1. SVG Accessibility Basics
Presented by:
Brian McNeilly

2. 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

3. 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

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. 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

6. 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

7. General Best Practices

8. 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

9. 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

10. 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

11. 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

12. 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

13. SVG Use Cases

14. 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

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. 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

17. More Advanced Solutions

18. 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

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 ( 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