tech headline - using wai-aria & html5: techniques to solve accessibility problems

1 /

Using WAI-ARIA & HTML5: Techniques to solve accessibility problems It’s Accessibility and Usability working together Rodrigo Castilho aka RODCAST Senior Front End Engineer @rodcast 12/12/2013

/ 2

A web without limits

/ 3

Sad But True

4 /

I feel your pain

Blind and visually impaired make up 285,000,000 people

according to the World Health Organization (June 2012)

with 39,000,000 categorized as legally blind and the

remaining 246,000,000 visually impaired. Deaf and

hearing impaired make up 275,000,000 (2004) in the

moderate-to-profound hearing impairment category.

/ 5

Why is this important?

6 /

You're being watched

"Companies that do not consider accessibility in their Web

site or product development will come to regret that

decision, because we intend to use every tool at our

disposal to ensure that people with disabilities have equal

access to technology."

Thomas E. Perez, current U.S. Secretary of Labor

7 /

Come on

•  Improve your job, your business, your life.

•  To be a different company and prevent lawsuits.

•  High accessibility is effective SEO.

•  Stop making excuses for not doing it.

8 /

Come on

•  Improve your job, your business, your life.

•  To be a different company and prevent lawsuits.

•  High accessibility is effective SEO.

•  Stop making excuses for not doing it.

9 /

Come on

•  Improve your job, your business, your life.

•  To be a different company and prevent lawsuits.

•  High accessibility is effective SEO.

•  Stop making excuses for not doing it.

10 /

Come on

•  Improve your job, your business, your life

•  To be a different company and prevent lawsuits.

•  High accessibility is effective SEO.

•  Stop making excuses for not doing it.

/ 11

Checklist & Quick tips (Perceivable, Operable, Understandable and Robust) WCAG 2.0 & Section 508

12 /

WCAG 2.0, Section 508 and the Laws

•  WCAG 2.0 Success Criteria Levels: A, AA, AAA http://www.w3.org/WAI/intro/wcag.php

•  Section 508 U.S. Department of Health & Human Services http://www.hhs.gov/web/508/accessiblefiles/checklists.html

•  Americans with Disabilities Act http://www.dol.gov/dol/topic/disability/ada.htm

/

/

13

01 Perceivable

14 /

Perceivable

•  Provide text alternatives for non-text content.

•  Provide captions and other alternatives for multimedia.

•  Create content that can be presented in different ways, including by assistive technologies, without losing meaning.

•  Make it easier for users to see and hear content.

15 /

Perceivable

•  Provide text alternatives for non-text content.

•  Provide captions and other alternatives for multimedia.

•  Create content that can be presented in different ways, including by assistive technologies, without losing meaning.

•  Make it easier for users to see and hear content.

16 /

Perceivable

•  Provide text alternatives for non-text content.

•  Provide captions and other alternatives for multimedia.

•  Create content that can be presented in different ways, including by assistive technologies, without losing meaning.

•  Make it easier for users to see and hear content.

17 /

Perceivable

•  Provide text alternatives for non-text content.

•  Provide captions and other alternatives for multimedia.

•  Create content that can be presented in different ways, including by assistive technologies, without losing meaning.

•  Make it easier for users to see and hear content.

/

/

18

02 Operable

19 /

Operable

•  Make all functionality available from a keyboard.

•  Give users enough time to read and use content.

•  Do not use content that causes seizures.

•  Help users navigate and find content.

20 /

Operable

•  Make all functionality available from a keyboard.

•  Give users enough time to read and use content.

•  Do not use content that causes seizures.

•  Help users navigate and find content.

21 /

Operable

•  Make all functionality available from a keyboard.

•  Give users enough time to read and use content.

•  Do not use content that causes seizures.

•  Help users navigate and find content.

22 /

Operable

•  Make all functionality available from a keyboard.

•  Give users enough time to read and use content.

•  Do not use content that causes seizures.

•  Help users navigate and find content.

/

/

23

03 Understandable

24 /

Understandable

•  Make text readable and understandable.

•  Make content appear and operate in predictable ways.

•  Help users avoid and correct mistakes.

25 /

Understandable

•  Make text readable and understandable.

•  Make content appear and operate in predictable ways.

•  Help users avoid and correct mistakes.

26 /

Understandable

•  Make text readable and understandable.

•  Make content appear and operate in predictable ways.

•  Help users avoid and correct mistakes.

/

/

27

04 Robust

28 /

Robust

•  Maximize compatibility with current and future user tools.

29 /

Stewie Griffin Accessibility with steroids…

/ 30

WAI-ARIA

31 /

What’s it?

•  WAI = Web Accessibility Initiative

•  ARIA = Accessible Rich Internet Applications

32 /

How are divided?

•  Roles

•  Abstract

•  Widgets

•  Document Structure

•  Landmark

•  States and Properties

•  Managing Focus

33 /

How are divided?

•  Roles

•  Abstract (ex.: Abstract roles are used for the ontology!?!?) http://www.w3.org/TR/wai-aria/roles#abstract_roles

•  Widgets

•  Document Structure

•  Landmark

34 /

How are divided?

•  Roles

•  Abstract

•  Widgets (ex.: alert, button, dialog, menuitem, progressbar, scrollbar, tab, tooltip) http://www.w3.org/TR/wai-aria/roles#widget_roles

•  Document Structure

•  Landmark

35 /

How are divided?

•  Roles

•  Abstract

•  Widgets

•  Document Structure (ex.: article, directory, heading, list, math, presentation) http://www.w3.org/TR/wai-aria/roles#document_structure_roles

•  Landmark

36 /

How are divided?

•  Roles

•  Abstract

•  Widgets

•  Document Structure

•  Landmark (ex.: application, complementary, main, navigation, search) http://www.w3.org/TR/wai-aria/roles#landmark_roles

37 /

How are divided?

•  States and Properties (ex.: aria-* / autocomplete, haspopup, valuemax) http://www.w3.org/TR/wai-aria/states_and_properties

•  Managing Focus

38 /

How are divided?

•  States and Properties

•  Managing Focus (ex.: combobox, menu, manubar, tree, treegrid, tablist) http://www.w3.org/TR/wai-aria/usage#managingfocus

39 /

Screen Reader •  NVDA (NonVisual Desktop Access)

•  JAWS and Window Eyes (Windows)

•  VoiceOver by Apple (iOS)

•  ORCA (Linux)

•  ChromeVox by Google (Chrome Browser)

See more: http://en.wikipedia.org/wiki/List_of_screen_readers

40 /

Companies that has a dedicated Accessibility team

Google, Apple, Yahoo!,

Facebook, Twitter, Mozilla, Microsoft, Adobe,

Paypal, eBay, WordPress, Nokia, IBM, SAP

41 /

Reference list: Books

Pro HTML5 Accessibility: Building an Inclusive Web By: Joshue O Connor

It’s available on Amazon: http://amzn.com/1430241942

42 /

Reference list: Books

AccessAbility: A Practical Handbook on Accessible Graphic Design By: RGD Ontario

It’s free to anyone interested: http://goo.gl/TnWFaH

43 /

Reference list: Links

http://www.w3.org/WAI/training/

http://training.section508.gov/

http://a11yproject.com/

http://www.accessiq.org/

http://oaa-accessibility.org/

https://webaccessibility.withgoogle.com/

http://yaccessibilityblog.com/library/

http://msdn.microsoft.com/en-us/windows/bb735024.aspx

https://developer.mozilla.org/en-US/docs/Web/Accessibility/

http://www.w3.org/WAI/WCAG20/glance/Overview.html

http://www.hhs.gov/web/508/accessiblefiles/checklists.html

https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb

44 /

Don’t forget

If it’s important to you, you will find a way. If not,

you’ll find an excuse.

Author Unknown

45 /

Homer Simpson WOOHOO!!! I hope I haven't forgotten anything.

Thank You.