Screen

Rea riptaSc A Jav RI

ithA w

der+

Accessible Rich Internet Applica1ons

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

ARIA: WHAT & WHY

The First Web Page

hKp://info.cern.ch/hypertext/WWW/TheProject.html

Today’s Dynamic Web Applica1ons

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!

Is it safe to use ARIA yet?

Jump into ARIA

Browser Screen Reader

Internet Explorer 8+ JAWS

Firefox NVDA

Safari VoiceOver

Browser/Screen Reader Combina1ons

Can I Use…ARIA? hKp://caniuse.com/#feat=wai- aria ‐

ARIA TO THE RESCUE

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

Get Your Feet Wet

LANDMARKS

Document Landmark Roles

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. <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

Deque Home Page Landmakr Roles

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”

ARIA Landmarks in VoiceOver

Roll up your pants and wade in a liKle deeper

RELATIONSHIPS Form Labeling & Instruc1ons

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>

Time to Jump In!

ARIA DESIGN PATTERNS Accessible JavaScript Widgets

ARIA Design PaKerns

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

• • • • • • • • • • • • • 

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

• • • • • • • • 

ARIA Rela1onship AKributes

aria- ac1vedescendant‐ aria- controls ‐aria- describedby‐ aria- flowto ‐aria- labelledby‐ aria- owns ‐aria- posinset ‐ aria- setsize‐

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‐

ARIA Design PaKerns

www.w3.org/TR/ wai- aria- prac1ces ‐ ‐

ARIA RULES OF SAFETY

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?

Deque Digital Equality