22
Accessible SVG Anna Khabibullina

SVG Accessibility

Embed Size (px)

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

Citation preview

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