svg accessibility

22
Accessible SVG Anna Khabibullina

Upload: anna-khabibullina

Post on 09-Jul-2015

669 views

Category:

Engineering


6 download

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: _khabibullina

TRANSCRIPT

Page 1: SVG Accessibility

Accessible SVG

Anna Khabibullina

Page 2: SVG Accessibility

Agenda

NeedsProblemsSolutionsDemoBrowser SupportQ & A

Page 3: SVG Accessibility

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

Page 4: SVG Accessibility

Needs

“95% of users whocould benefit fromzoom & speech

don’t own anassistive technology”

— David Wu, CEO AI2

Page 5: SVG Accessibility

Reinventing Web Magnification & Speech

“See it better” “Talk to me”

sitecues by Ai Squared

Page 6: SVG Accessibility

Problems We Address Today

Page 7: SVG Accessibility

Keyboard accessibility

Screen reader accessibility

Problems We Address Todayhttp://www.sitepoint.com/tips-accessible-svg/

Page 8: SVG Accessibility

“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

Page 9: SVG Accessibility

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

Page 10: SVG Accessibility

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

Page 11: SVG Accessibility

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

Page 12: SVG Accessibility

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/

Page 13: 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

Page 14: SVG Accessibility

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>

Page 15: SVG Accessibility

<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

Page 16: SVG Accessibility

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

Page 17: SVG Accessibility

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”

Page 18: SVG Accessibility

Show Time!Demo

Page 19: SVG Accessibility

Internet Explorer + Window-Eyes

• Partial Support

Firefox + NVDA

• Full Support

Chrome + Jaws

• Poor Support

Badge and Panel Keyboard Navigation Browser Support(Windows)

Page 20: SVG Accessibility

Wait!

http://www.html5accessibility.com/tests/canvas.html

http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx

Page 21: SVG Accessibility

Thank youtwitter: _khabibullinaemail: [email protected]

Page 22: SVG Accessibility

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