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: akhabibullina@aisquared.com

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