World Usability Day 2012 ARIA

of 45 /45
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsev Reproduction in any form by any one of the material contained herein without the permission of El Modern Accessibility Introduction to WAI - ARIA Accessibility of Rich Internet Applications Presented by: Ted Gies Principal User Experience Specialist Elsevier User Centered Design Group [email protected] World Usability Day 2012

description

 

Transcript of World Usability Day 2012 ARIA

Page 1: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

Modern AccessibilityIntroduction to WAI - ARIA Modern AccessibilityIntroduction to WAI - ARIA Accessibility of Rich Internet Applications

Presented by: Ted GiesPrincipal User Experience SpecialistElsevier User Centered Design [email protected]

World Usability Day 2012

Page 2: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

2

WWW.LINKEDIN.COM/IN/TEDGIES WWW.LINKEDIN.COM/IN/TEDGIES Download this Presentation at:

Page 3: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

3

A Poll – What’s your role?A Poll – What’s your role?

Web Developer UX Specialist Tech Writer Visual Designer QA Product Manager Accessibility Specialist

Page 4: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

4

OverviewOverview

Need for ARIA What is ARIA? ARIA Landmark Roles

The Problem Code Example How to put it in your UI spec

ARIA labels The Problem Code Example Technique

Where to Find Accessible Components with ARIA

Page 5: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

5

WHY DO WE NEED ADDITIONAL ACCESSIBILITY TECHNIQUES?WHY DO WE NEED ADDITIONAL ACCESSIBILITY TECHNIQUES?

Introduction to ARIA

Page 6: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

6

Proliferation of RIA components in user interfacesProliferation of RIA components in user interfaces

TreesAccordions

Tabs, Data Grids, Menus

Page 7: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

7

Web components should sound and behave like desktop componentsWeb components should sound and behave like desktop components

Yahoo Mail - Web Component Tabs

Outlook – MS Application Tabs

Page 8: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

8

Better techniques for meeting existing A11y guidelinesBetter techniques for meeting existing A11y guidelines

Section 508 (o) A method shall be provided that permits users to skip repetitive navigation links.

JAWS landmarks list IOS Voiceover landmarks navigation

Page 9: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

9

Better techniques for meeting existing A11y guidelinesBetter techniques for meeting existing A11y guidelines

Section 508 (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

<label for="firstname">First Name</label> <input type="text" id="firstname" aria-required="true" />

Page 10: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

10

What is WAI - ARIA?What is WAI - ARIA?

ARIA = Accessibility of Rich Internet Applications W3C Web Accessibility Initiative Candidate

Recommendation Standard Techniques to allow your AT/screen reader to announce rich

descriptions of modern web components such as:

Page 11: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

11

What is ARIA Not?What is ARIA Not?

Not a catch-all technique Not a replacement of familiar WCAG 1.0 best practices Not part of HTML 4 (is standard HTML5) Not a functional feature by itself Not going to affect the visual user experience Not a technique to make something keyboard operable

Accessibility benefit comes about from the combo of:1. ARIA markup

2. Browser Support

3. AT Support

4. correct JS management of ARIA attributes (in some cases)

Page 12: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

12

User Agent – Internet Explorer

Example of how ARIA worksExample of how ARIA works

<a role="tab" aria-selected="true“>INBOX (10050)</a>

The “code” in the DOM is interpreted by a browser and passed to the Os via Accessibility API like MS UI Automation

The middle man/translator sends the ARIA info to the AT

The AT/screen reader speaks or provides feature

“Inbox tab - selected”

Page 13: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

13

ARIA and Browser SupportARIA and Browser Support

ARIA is Supported by many up to date browsers: Firefox 3+, IE8+, Opera 9.5+, Safari 4+, Chrome 3+ AT and Browsers are still playing catch up with many ARIA roles and

properties Paciello Group Blog HTML5 accessibility chops http://www.paciellogroup.com/blog/archive/

Use this page to check support for your specific ARIA role and browser: http://html5accessibility.com/

Page 14: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

14

ARIA FAQARIA FAQ

How do ARIA and HTML5 attributes line up? Overlap in some cases (e.g. <nav> interpreted as role=“navigation” ARIA is more widely supported than HTML5 accessibility elements

What’s a good way to test for proper ARIA? Good inspection tools to test for the presence, but not for correct implementation

Which sites are using ARIA? Yahoo GMAIL ScienceDirect

ARIA and mobile? Some support, e.g. IOS rotor to navigate Landmarks For touch screen devices, Apple is working on device independent events

Page 15: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

15

ARIA LANDMARK ROLESARIA LANDMARK ROLESIntroduction to ARIA

Page 16: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

16

ARIA Landmark Roles are Low Hanging FruitARIA Landmark Roles are Low Hanging Fruit

Captioning for audio and video contentMeaningful Text equivalents for figuresComprehensive Site SearchHTML equivalents for supplementary files (e.g. ENA Skills Matrix PDF)

•Perfectly validated HTML

•Perfectly validated CSS

•Form fieldset and legend

•Keyboard shortcuts

•Link to download software/player

•Row and column headings for tables

Perfectly validated HTML

Replacing table based site with DIVs

Unambiguous Text equivalents for all controls,

buttons, and use of color for meaning

Keyboard operability of all controls and scripts

Proper use of structure (ordered lists)

Proper use of headings <h1>, <h2>

ARIA landmarks

Descriptive page titles

Skip Navigation Links

Flash workaround for keyboard trap

Site map

Higher accessibility impactHigher accessibility impact

Hig

her

dev

cost

Hig

her

dev

cost

lower accessibility impact

Page 17: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

17

Lack of semantic roles to describe the page elementsLack of semantic roles to describe the page elements

Page 18: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

18

Screen reader output of IMBD.comScreen reader output of IMBD.com

Page 19: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

19

Lack of semantic roles to describe the page elementsLack of semantic roles to describe the page elements

Site Search

NAVIGATION Menu

Featured Movies Navigation

MOVIE THEATERSEARCH

TOP MOVIESNAVIGATION

NEWS Navigation

SOCIAL MEDIANAVIGATION

SUMMER MOVIE GUIDENavigation

Login NAVIGATION

MAIN CONTENT

Page 20: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

20

JAWS – List Landmarks (CTRL + INS + SEMICOLON)JAWS – List Landmarks (CTRL + INS + SEMICOLON)

Page 21: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

21

JAWS – List Landmarks (CTRL + INS + SEMICOLON)JAWS – List Landmarks (CTRL + INS + SEMICOLON)

<div role=“search” aria-label=Quick Search”>

Page 22: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

22

Apple VoiceOver Rotor Supports Landmark RolesApple VoiceOver Rotor Supports Landmark Roles

Page 23: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

23

Summary of ARIA Landmark RolesSummary of ARIA Landmark Roles

banner - usually the main header of your site; the area with logo complementary - supporting section of page, separate from the main

content, like a sidebar. contentinfo - area that contains information about the site such as

copyright lines and links to privacy notices (i.e. page footer). main - the main content; area with central topic of the web page. navigation - a section for navigating the site. search - a section with a any type of search tool. application – an area of the screen where you want AT to give keyboard

control to that area (up and down arrow keys go straight to the application and not through JAWS). DO NOT USE!

Page 24: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

24

ARIA Landmark Best PracticesARIA Landmark Best Practices

1. Every piece of content on the page should be contained within a landmark

2. Put landmark role within a <DIV> element

3. Landmarks can be nested. You can have search landmarks within a main

4. You should only have 1 each of Main, Banner, and Contentinfo landmarks

5. Do not use the Application landmark.

6. In addition to the role attribute, you should use an aria-labeledby or aria-label e.g. <div role=search, aria-label=“documents”>

Page 25: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

25

Example of UI Specification – ARIA LandmarksExample of UI Specification – ARIA Landmarks

DIV Description HTML/ARIA role

1 Global navigation with SciVerse links

<div aria-label="SciVerse" role="navigation">

2 ScienceDirect global navigation

<div aria-label="ScienceDirect" role=”navigation”>

3 Results navigation <div aria-label="Results" role="navigation">

4 Download options <div aria-label="Download options" role="navigation">

5 Quick search <div class="singlesearch js_searchform" aria-label="Quick search" role="search“ 

6 Extended Search <div aria-labelledby="extendedSearch" role="search">

7 Left side pane <div class="toc" aria-label="table of contents" role="navigation">

8 Article/middle pane <div class="content" aria-label="Article" role="article">

9 Right side pane <div id="sidebar" aria-label=”Related content” role="complementary">

10 Footer <div class="content" aria-label=”product support” role="contentinfo">

Page 26: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

26

JAWS ARIA Landmarks ExampleJAWS ARIA Landmarks Example

Page 27: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

27

ARIA LABELSARIA LABELSIntroduction to ARIA

Page 28: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

28

Need for better labeling techniquesNeed for better labeling techniques

No one told me that I was clicking on See more adult titles, I thought I was clicking on See more opening this week titles

Page 29: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

29

JAWS aria-labeledby ExampleJAWS aria-labeledby Example

<span id=“myLabel”>Acta Biomateriala</span>………<a href=“” aria-labeledby=“myLabel”>Create RSS feed</a><a href=“” aria-labeledby=“myLabel”>Add to Favorites</a><a href=“” aria-labeledby=“myLabel”>Set alert</a>

Page 30: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

30

ARIA LabelsARIA Labels

Use aria-label when1. You need to label a graphical item or control (it’s like Alt text)

2. You don’t want your label to be visible

3. You are implementing landmarks (e.g. role=“search” aria-label=“site”)

Use aria-labeledby when1. There is already a text label created and you want to use it as a label for

another element. E.g. use a heading to label another link.

2. When you have multiple labels to reference (e.g. form instructions)

3. When you want to provide more context to a repetitive element, e.g. 1. More

2. Click Here

3. About

Use aria-describedby when You want a longer description and potentially a shorter label

Page 31: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

31

COMPONENT LIBRARIES WITH ARIACOMPONENT LIBRARIES WITH ARIA

Introduction to ARIA

Page 32: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

32

12 General Steps for Building an Accessible Widgets with WAI-ARIA12 General Steps for Building an Accessible Widgets with WAI-ARIA

1. Pick the widget type (role) from the WAI-ARIA taxonomy

2. From the role, get the list of supported states and properties

3. Establish the widget structure in the markup (parent/child)

4. Repeat steps 1-3 for the children of the parent

5. Establish keyboard navigation of the widget and plan for how it will be navigated to within the document

6. Apply and manage needed WAI-ARIA states in response to user input events

7. Synchronize the visual UI with accessibility states and properties for supporting user agents

8. Showing and Hiding Sections in a Widget

9. Support basic accessibility, such as alternative text on images

10. Establish WAI-ARIA relationships between this widget and others

11. Review widget to ensure that you have not hard coded sizes

12. Test with User agent, Assistive Technology, and People with disabilities

Page 33: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

33

KISS: Just use components with built-in ARIA KISS: Just use components with built-in ARIA

<h2 role="tab" aria-controls="ui-accordion-sampleAccordion-panel-1“aria-selected="false" tabindex="-1"></h2>

Hans Hillen’s Accessible jQuery UI Components

Page 34: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

34

Use components with built-in ARIA Use components with built-in ARIA

OpenAjax Alliance Accessibility Examples (44)

Page 35: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

35

Where to Find components with built-in ARIA Where to Find components with built-in ARIA

Hans Hillen’s Accessible jQuery UI Components IBM DOJO Accessibility Open AJAX Alliance Accessibility Examples Terrill Thompson’s Accessible Drop Down Navigation Menu http://www.html5accessibility.com/ Look at Google.com

Page 36: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

36

TOOLS FOR CHECKING ARIATOOLS FOR CHECKING ARIAIntroduction to ARIA

Page 37: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

37

There are no perfect tools for testing ARIA implementationThere are no perfect tools for testing ARIA implementation

HUGE opportunity for a developer to come up with a validation of legitimate or valid use of ARIA

Test for free using JAWS or NVDA for windows, VoiceOver on Mac Stick to the basics and test with real users of Assistive Technologies Keyboard operability needs to always be considered with ARIA

Page 38: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

38

Accessibility Inspector for FirebugAccessibility Inspector for Firebug

http://code.google.com/p/ainspector/

Page 39: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

39

WAVE WAVE

http://wave.webaim.org/

Page 40: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

40

W3C HTML 5 Nu Markup ValidatorW3C HTML 5 Nu Markup Validator

http://validator.w3.org/nu/

Page 41: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

41

W3C ARIA Design Patterns TPG Blog – ARIA Chops TPG Blog – Using ARIA Landmark Roles HTML5accessibility.com

ARIA Learning ResourcesARIA Learning Resources

Page 42: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

42

Topics We Didn’t CoverTopics We Didn’t Cover

ARIA live regionsDon’t use unless you are able to test

implementation with people with assistive technologies!

HTML 5 attributes vs. ARIA

Page 43: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

43

Thank YouThank You

We hope this was educational!Ted Gies (Dayton, OH U.S.)

Elsevier [email protected]

Special thanks to Dr. Jon Gunderson and Hadi Rangin (Univ of Illinois Urbana Champaign) for commitment to developing accessible tools and standards

Page 44: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

44

EXTRASEXTRASIntroduction to ARIA

Page 45: World Usability Day 2012 ARIA

This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

45

ARIA DiagramARIA Diagram