Download
1 / 42
420 likes | 580 Views
Accessible Rich Internet Applica1ons . Screen. der. Rea. ript. aSc A. +. Jav. RI. ithA. w. Glenda Sims . @goodwitch deque.com knowbility #a11y . GeAng to Know ARIA ARIA: What & Why Landmarks Rela1onships
E N D
Accessible Rich Internet Applica1ons Screen der Rea ript aScA + Jav RI ithA w
Glenda Sims @goodwitch deque.com knowbility #a11y
GeAng to Know ARIA ARIA: What & Why Landmarks Rela1onships Accessible JavaScript Widgets • • • • – ARIA Design PaKerns • ARIA Golden Rules
The First Web Page hKp://info.cern.ch/hypertext/WWW/TheProject.html
Screen Readers Get Smart • Screen Readers love HTML • Originally screen readers could not understand • Dynamic Updates to Content -‐ AJAX • JavaScript Custom Widgets -‐ like… – Collapsible Content – Tabs – Slider • ARIA developed so screen readers can love JavaScript too!
Can I Use…ARIA? hKp://caniuse.com/#feat=wai-‐aria
ARIA Features • Roles – describe the structure of the Web page • such as headings and regions • Roles – describe the type of javascript widget presented • "menu," "treeitem," "slider” • Proper1es – describe the state javascript widgets are in • such as "checked" for a check box • Focus – provide keyboard naviga1on for all ac1ve elements
Try Adding These Landmark Roles! 1.Banner – header of the page, for example banner image and the logo. <div role=“banner”> 2.Naviga1on – links to navigate the site and related sites <ul role=“navigaJon”> 3.Search – contains search form for the site <div role=“search”> 4.Main – core content of the page <div role=“main”> 5.Content Info – child content: footnotes, links to privacy statements… <div role=“contenJnfo”>
Deque Home Page is Designed with Landmark Roles
See ARIA Document Landmarks Install Juice Studio Accessibility Toolbar (for Firefox) addons.mozilla.org/en-‐us/firefox/addon/juicy-‐studio-‐accessibility-‐too/ From the ARIA menu, select “Document landmarks” 1. 2.
Roll up your pants and wade in a liKle deeper
Form Labeling & Instruc1ons RELATIONSHIPS
Accessible Form Labeling & Instruc1ons • Great ar1cle by Karl Groves (a11y viking) • hKp://www.karlgroves.com/2011/10/10/ accessible-‐form-‐labeling-‐instruc1ons/
High-‐Level Form Field Accessibility • All form elements should have explicit labels • Labels are clear and informa1ve • Format requirements are indicated hKp://www.karlgroves.com/2011/10/10/ accessible-‐form-‐labeling-‐instruc1ons/
S1ck with the HTML Labeling Basics <label for=“datex”>Date:</label> <input type=“text” name=“datex” id=“datex” />
Use aria-‐describedby for Instruc1ons <label for=“datex”>Date:</label> <input type=“text” name=“datex” id=“datex” aria-‐describedby=“instructs1”/> <span id=“instructs1”>must be mm/dd/yyyy format</span>
Accessible JavaScript Widgets ARIA DESIGN PATTERNS
OPEN AJAX ACCESSIBILITY EXAMPLE FOR TAB PANEL
ARIA Tab Panel Example <div role="applicaJon"> <h2>Happy Time Pizza On-‐line Ordering System</h2> <form> <div id="tabpanel1" class="tabpanel"> <ul class="tablist" role="tablist"> <li id="tab1" class="tab selected" aria-‐controls="panel1" aria-‐selected="true" role="tab" tabindex="0">Crust</li> <li id="tab2" class="tab" aria-‐controls="panel2"role="tab" aria-‐selected="false" tabindex="-‐1">Veggies</li> <li id="tab3" class="tab" aria-‐controls="panel3" role="tab" aria-‐selected="false" tabindex="-‐1">Carnivore</li> <li id="tab4" class="tab" aria-‐controls="panel4" role="tab" aria-‐selected="false" tabindex="-‐1">Delivery</li> </ul> Source: hKp://www.oaa-‐accessibility.org/examplep/tabpanel1/
ARIA Tab Panel Example -‐ Roles <div role="applicaJon"> <h2>Happy Time Pizza On-‐line Ordering System</h2> <form> <div id="tabpanel1" class="tabpanel"> <ul class="tablist" role="tablist"> <li id="tab1" class="tab selected" aria-‐controls="panel1" aria-‐selected="true" role="tab" tabindex="0">Crust</li> <li id="tab2" class="tab" aria-‐controls="panel2"role="tab" aria-‐selected="false" tabindex="-‐1">Veggies</li> <li id="tab3" class="tab" aria-‐controls="panel3" role="tab" aria-‐selected="false" tabindex="-‐1">Carnivore</li> <li id="tab4" class="tab" aria-‐controls="panel4" role="tab" aria-‐selected="false" tabindex="-‐1">Delivery</li> </ul> Source: h*p://www.oaa-‐accessibility.org/examplep/tabpanel1/
ARIA Tab Panel Example -‐ Rela1onship <div role="applicaJon"> <h2>Happy Time Pizza On-‐line Ordering System</h2> <form> <div id="tabpanel1" class="tabpanel"> <ul class="tablist" role="tablist"> <li id="tab1" class="tab selected" aria-‐controls="panel1" aria-‐selected="true" role="tab" tabindex="0">Crust</li> <li id="tab2" class="tab" aria-‐controls="panel2"role="tab" aria-‐selected="false" tabindex="-‐1">Veggies</li> <li id="tab3" class="tab" aria-‐controls="panel3" role="tab" aria-‐selected="false" tabindex="-‐1">Carnivore</li> <li id="tab4" class="tab" aria-‐controls="panel4" role="tab" aria-‐selected="false" tabindex="-‐1">Delivery</li> </ul> Source: h*p://www.oaa-‐accessibility.org/examplep/tabpanel1/
ARIA Tab Panel Example -‐ State <div role="applicaJon"> <h2>Happy Time Pizza On-‐line Ordering System</h2> <form> <div id="tabpanel1" class="tabpanel"> <ul class="tablist" role="tablist"> <li id="tab1" class="tab selected" aria-‐controls="panel1" aria-‐selected="true" role="tab" tabindex="0">Crust</li> <li id="tab2" class="tab" aria-‐controls="panel2"role="tab" aria-‐selected="false" tabindex="-‐1">Veggies</li> <li id="tab3" class="tab" aria-‐controls="panel3" role="tab" aria-‐selected="false" tabindex="-‐1">Carnivore</li> <li id="tab4" class="tab" aria-‐controls="panel4" role="tab" aria-‐selected="false" tabindex="-‐1">Delivery</li> </ul> Source: h*p://www.oaa-‐accessibility.org/examplep/tabpanel1/
ARIA Widget Roles progressbar radio scrollbar slider spinbuKon status tab tabpanel textbox 1mer tool1p treeitem alert alertdialog buKon checkbox dialog gridcell link log marquee menuitem menuitemcheckbox menuitemradio op1on • • • • • • • • • • • • • • • • • • • • • • • • •
ARIA Rela1onship AKributes aria-‐ac1vedescendant aria-‐controls aria-‐describedby aria-‐flowto aria-‐labelledby aria-‐owns aria-‐posinset aria-‐setsize • • • • • • • •
ARIA Widget AKributes aria-‐checked (state) aria-‐disabled (state) aria-‐expanded (state) aria-‐hidden (state) aria-‐invalid (state) aria-‐pressed (state) aria-‐selected (state • • • • • • • aria-‐autocomplete aria-‐haspopup aria-‐label aria-‐level aria-‐mul1line aria-‐mul1selectable aria-‐orienta1on aria-‐readonly aria-‐required aria-‐sort aria-‐valuemax aria-‐valuemin aria-‐valuenow aria-‐valuetext • • • • • • • • • • • • • •
ARIA Design PaKerns www.w3.org/TR/ wai-‐aria-‐prac1ces
Use ARIA Wisely! • Build custom controls responsibly • Use naJve HTML markup first – Safer – Simpler – Full Accessibility Built-‐in • Use Custom Controls – Only when there is a func1onal advantage – Are you sure you can’t do this with na1ve HTML mark-‐up? – Make sure check for the following: • Did you set the appropriate role? • Did you indicated the state(s) and proper1es? • Do states and proper1es change correctly when values change? • Can you use it with keyboard alone? • Can you use it with a screen reader?
