Download presentation
Presentation is loading. Please wait.
Published byAllyson Northup Modified over 10 years ago
1
Screen Rea ript aSc A Jav RI ithA w der + Accessible Rich Internet Applica1ons
2
Glenda Sims @goodwitch deque.com knowbility #a11y
3
GeAng to Know ARIA ARIA: What & Why Landmarks Rela1onships Accessible JavaScript Widgets – ARIA Design PaKerns ARIA Golden Rules
4
ARIA: WHAT & WHY
5
The First Web Page hKp://info.cern.ch/hypertext/WWW/TheProject.html
6
Today’s Dynamic Web Applica1ons
7
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!
8
Is it safe to use ARIA yet?
9
Jump into ARIA
10
Browser Screen Reader Internet Explorer 8+ JAWS Firefox NVDA Safari VoiceOver Browser/Screen Reader Combina1ons
11
Can I Use…ARIA? hKp://caniuse.com/#feat=wai-‐aria
12
ARIA TO THE RESCUE
13
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
14
Get Your Feet Wet
15
LANDMARKS
16
Document Landmark Roles
17
role=“banner” role=“naviga1on” role=“search” role=“main” role=“conten1nfo” Try Adding These Landmark Roles! 1. Banner – header of the page, for example banner image and the logo. 2. Naviga1on – links to navigate the site and related sites 3. Search – contains search form for the site 4. Main – core content of the page 5. Content Info – child content: footnotes, links to privacy statements…
18
Deque Home Page is Designed with Landmark Roles
19
Deque Home Page Landmakr Roles
20
1. 2. 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”
21
ARIA Landmarks in VoiceOver
22
Roll up your pants and wade in a liKle deeper
23
RELATIONSHIPS Form Labeling & Instruc1ons
24
Accessible Form Labeling & Instruc1ons Great ar1cle by Karl Groves (a11y viking) hKp://www.karlgroves.com/2011/10/10/ accessible-‐form-‐labeling-‐instruc1ons/
25
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/
26
S1ck with the HTML Labeling Basics Date:
27
Use aria-‐describedby for Instruc1ons Date: <input type=“text” name=“datex” id=“datex” aria-‐describedby=“instructs1”/> must be mm/dd/yyyy format
28
Time to Jump In!
29
ARIA DESIGN PATTERNS Accessible JavaScript Widgets
30
ARIA Design PaKerns
31
OPEN AJAX ACCESSIBILITY EXAMPLE FOR TAB PANEL
32
ARIA Tab Panel Example Happy Time Pizza On-‐line Ordering System <li id="tab1" class="tab selected" aria-‐controls="panel1" aria-‐selected="true" role="tab" tabindex="0">Crust <li id="tab2" class="tab" aria-‐controls="panel2" role="tab" aria-‐selected="false" tabindex="-‐1">Veggies <li id="tab3" class="tab" aria-‐controls="panel3" role="tab" aria-‐selected="false" tabindex="-‐1">Carnivore <li id="tab4" class="tab" aria-‐controls="panel4" role="tab" aria-‐selected="false" tabindex="-‐1">Delivery Source: hKp://www.oaa-‐accessibility.org/examplep/tabpanel1/
33
ARIA Tab Panel Example -‐ Roles Happy Time Pizza On-‐line Ordering System <li id="tab1" class="tab selected" aria-‐controls="panel1" aria-‐selected="true" role="tab" tabindex="0">Crust <li id="tab2" class="tab" aria-‐controls="panel2" role="tab" aria-‐selected="false" tabindex="-‐1">Veggies <li id="tab3" class="tab" aria-‐controls="panel3" role="tab" aria-‐selected="false" tabindex="-‐1">Carnivore <li id="tab4" class="tab" aria-‐controls="panel4" role="tab" aria-‐selected="false" tabindex="-‐1">Delivery Source: h*p://www.oaa-‐accessibility.org/examplep/tabpanel1/
34
ARIA Tab Panel Example -‐ Rela1onship Happy Time Pizza On-‐line Ordering System <li id="tab1" class="tab selected" aria-‐controls="panel1" aria-‐selected="true" role="tab" tabindex="0">Crust <li id="tab2" class="tab" aria-‐controls="panel2" role="tab" aria-‐selected="false" tabindex="-‐1">Veggies <li id="tab3" class="tab" aria-‐controls="panel3" role="tab" aria-‐selected="false" tabindex="-‐1">Carnivore <li id="tab4" class="tab" aria-‐controls="panel4" role="tab" aria-‐selected="false" tabindex="-‐1">Delivery Source: h*p://www.oaa-‐accessibility.org/examplep/tabpanel1/
35
ARIA Tab Panel Example -‐ State Happy Time Pizza On-‐line Ordering System <li id="tab1" class="tab selected" aria-‐controls="panel1" aria-‐selected="true" role="tab" tabindex="0">Crust <li id="tab2" class="tab" aria-‐controls="panel2" role="tab" aria-‐selected="false" tabindex="-‐1">Veggies <li id="tab3" class="tab" aria-‐controls="panel3" role="tab" aria-‐selected="false" tabindex="-‐1">Carnivore <li id="tab4" class="tab" aria-‐controls="panel4" role="tab" aria-‐selected="false" tabindex="-‐1">Delivery Source: h*p://www.oaa-‐accessibility.org/examplep/tabpanel1/
36
ARIA Widget Roles alert alertdialog buKon checkbox dialog gridcell link log marquee menuitem menuitemcheckbox menuitemradio op1on progressbar radio scrollbar slider spinbuKon status tab tabpanel textbox 1mer tool1p treeitem
37
ARIA Rela1onship AKributes aria-‐ac1vedescendant aria-‐controls aria-‐describedby aria-‐flowto aria-‐labelledby aria-‐owns aria-‐posinset aria-‐setsize
38
ARIA Widget AKributes 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-‐checked (state) aria-‐disabled (state) aria-‐expanded (state) aria-‐hidden (state) aria-‐invalid (state) aria-‐pressed (state) aria-‐selected (state
39
ARIA Design PaKerns www.w3.org/TR/ wai-‐aria-‐prac1ces
40
ARIA RULES OF SAFETY
41
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?
42
Deque Digital Equality
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.