Accessible SVG Scalable Vector Graphics (SVG) allows engineers and designers to create more powerful user experiences than with plain HTML. By attending this session, you'll gain a deeper understanding about just how accessible SVG UI’s can be today. We’ll discuss topics such as: - Making SVG UI's keyboard accessible - Using ARIA to enable screen reader access for SVG UI’s - Circumventing gaps in today’s browser implementations The session will also include an interactive Q+A where we'll discuss future possibilities and address topics such as canvas accessibility. Speaker: Anna Khabibullina, sitecues by Ai Squared Twitter: _khabibullina

1. Accessible
SVG
Anna Khabibullina

2. Agenda
Needs
Problems
Solutions
Demo
Browser Support
Q & A

3. So … What do we do?
sitecues by Ai Squared is a web-based software solution, a
widget, that builds zoom and speech features right into
websites.
Needs

4. Needs
“95% of users who
could benefit from
zoom & speech
don’t own an
assistive technology”
— David Wu, CEO AI2

5. Reinventing Web Magnification & Speech
“See it better” “Talk to me”
sitecues by Ai Squared

6. Problems We
Address Today

7. Keyboard accessibility
Screen reader accessibility
Problems We Address Today
http://www.sitepoint.com/tips-accessible-svg/

8. “Managing focus in SVG is a
nightmare”(sigh)
— Doug Schepers,
Web Standards Specialist,
Team Contact for the SVG, WebApps, and Web Events Working Groups
Problem 1
Keyboard navigation for SVG

9. Problem 1
Native browser support for tab navigation in SVG:
Windows 7 OS
Keyboard navigation for SVG
+
Support for SVG
“tabindex” “focusable”
Internet Explorer 11
Mozilla Firefox 33
Chrome 39
https://dump.testsuite.org/2006/svg/003.svg

10. Add smart(manual) keyboard navigation:
- tab cycles: keep a list of things for cycle
(2 elements)
- focus index: 0, 1, …
- show a focus outline
Solution 1
Keyboard navigation for SVG
1 2

11. Problem 1.1
Add focus outline for SVG in all
browsers.
- CSS outline for SVG elements
- getBoundingClientRect()
Solution 1.1
Draw outline object on top of SVG
elements.
- role=“presentation”
pointer-events: “none”
- Fixed in the browser!
Cross Browser Outline

12. Problem 2
Limited screen reader access for SVG
- attributes
focusable
tabindex
- elements
title
desc
Screen reader access
http://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/

13. Solution 2
Screen reader access
Enhancing the SVG with ARIA dramatically
changes the information that is available
through browser accessibility APIs:
- roles:
application, dialog
- states attributes:
aria-checked
- focus attributes:
aria-activedescendant

14. ARIA aria-activedescendant attribute explained.
<ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label"
aria-activedescendant="rg1-r1" tabindex="0">
<li id="rg1-r1" tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="images/radio-unchecked.gif" alt="">
Thai
</li>
...
<li id="rg1-r5" tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="images/radio-unchecked.gif" alt="">
Rainbow Gardens
http://test.cita.illinois.edu/aria/radio/radio2.php
</li>
</ul>

15. ARIA aria-activedescendant attribute explained: allow
changes in focus within widgets to be communicated to Assistive
Technology.
<ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label"
aria-activedescendant="rg1-r1" tabindex="0">
<li id="rg1-r1" tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="images/radio-unchecked.gif" alt="">
Thai
</li>
...
<li id="rg1-r5" tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="images/radio-unchecked.gif" alt="">
Rainbow Gardens
</li>
</ul>
http://test.cita.illinois.edu/aria/radio/radio2.php

16. Problem 3
browse mode: complex read-only
documents such as web pages are
browsed
focus mode: form elements, controls, UI
widgets
Screen reader browse mode

17. Solution 3
Screen reader browse mode
Hotkeys depend on screen reader:
- NVDA: press ENTER or SPACE to
switch
- Window-eyes: CTRL+SHIFT+A
- ZoomText: ?
- Jaws: ?
Automatic switch from browse mode:
- Focus on role=“dialog”

18. Show Time!
Demo

19. Internet Explorer + Window-Eyes
• Partial Support
Firefox + NVDA
• Full Support
Chrome + Jaws
• Poor Support
Badge and Panel Keyboard Navigation Browser Support
(Windows)

20. Wait!
http://www.html5accessibility.com/tests/canvas.html
http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx

21. Thank you
twitter: _khabibullina
email: akhabibullina@aisquared.com

22. Canvas
•Pixel based (Dynamic .png)
•Single HTML element
•Modified through script only
•Event model/user interaction is granular (x,y)
•Performance is better with smaller surface, a
larger number of objects (>10k), or both
SVG
•Shape based
•Multiple graphical elements, which become
part of the DOM
•Modified through script and CSS
•Event model/user interaction is abstracted
(rect, path)
•Performance is better with smaller number of
objects (<10k), a larger surface, or both
High Level Summary of Canvas vs. SVG