svg accessibility
DESCRIPTION
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: _khabibullinaTRANSCRIPT
Accessible SVG
Anna Khabibullina
Agenda
NeedsProblemsSolutionsDemoBrowser SupportQ & A
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
Needs
“95% of users whocould benefit fromzoom & speech
don’t own anassistive technology”
— David Wu, CEO AI2
Reinventing Web Magnification & Speech
“See it better” “Talk to me”
sitecues by Ai Squared
Problems We Address Today
Keyboard accessibility
Screen reader accessibility
Problems We Address Todayhttp://www.sitepoint.com/tips-accessible-svg/
“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 1Keyboard navigation for SVG
Problem 1
Native browser support for tab navigation in SVG:
Keyboard navigation for SVG
Windows 7 OS+
Support for SVG
“tabindex” “focusable”
Internet Explorer 11
Mozilla Firefox 33
Chrome 39
https://dump.testsuite.org/2006/svg/003.svg
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 1Keyboard navigation for SVG
1 2
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
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/
Solution 2Screen 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
ARIA aria-activedescendant attribute explained.
http://test.cita.illinois.edu/aria/radio/radio2.php
<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>
<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>
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">
http://test.cita.illinois.edu/aria/radio/radio2.php
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
Solution 3Screen 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”
Show Time!Demo
Internet Explorer + Window-Eyes
• Partial Support
Firefox + NVDA
• Full Support
Chrome + Jaws
• Poor Support
Badge and Panel Keyboard Navigation Browser Support(Windows)
Wait!
http://www.html5accessibility.com/tests/canvas.html
http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx
Thank youtwitter: _khabibullinaemail: [email protected]
High Level Summary of Canvas vs. SVG
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