Embed Size (px)
DESCRIPTION
Citation preview
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
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:
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
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
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
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
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
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
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" />
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:
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)
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”
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/
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
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
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
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
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
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
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)
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”>
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
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!
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”>
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">
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
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
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
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>
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
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
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
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
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)
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
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
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
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/
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/
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/
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
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
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
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
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
