Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
ARIA 101
Bermon Painter
October 04, 2011
Technology
2
140
ARIA 101
Bermon Painter
October 04, 2011
Tweet
Share
More Decks by Bermon Painter
See All by Bermon Painter
bermonpainter
0
17
bermonpainter
0
97
bermonpainter
0
86
bermonpainter
2
110
bermonpainter
0
170
bermonpainter
0
96
bermonpainter
2
330
bermonpainter
0
160
bermonpainter
3
1.7k
Other Decks in Technology
See All in Technology
mahito
0
230
raykataoka
9
8.6k
tosh2230
3
310
kanaugust
PRO
0
160
gobeyond20xx
0
340
dena_tech
0
160
clustervr
0
250
sadayoshitada0919
0
350
koukyo1994
5
1.4k
uzabase_saas_product
0
100
tenjuu99
1
290
eller86
1
230
Featured
See All Featured
scottboms
251
11k
jnunemaker
PRO
40
4.6k
danielanewman
200
20k
notwaldorf
16
1.8k
cassininazir
347
20k
reverentgeek
167
7.3k
rasmusluckow
318
18k
jcasabona
8
550
nonsquared
81
3.4k
trishagee
24
2.5k
bryan
31
3.4k
eileencodes
113
25k
Transcript
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 ARIA 101 ACCESSIBILITY
& FORMS
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 FILL IN THE
GAPS
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 TABINDEX
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 DEFINE WHAT
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 LANDMARK ROLES
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 application LANDMARK ROLES
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 banner LANDMARK ROLES
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 complementary LANDMARK ROLES
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 content info LANDMARK
ROLES
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 form LANDMARK ROLES
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 main LANDMARK ROLES
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 navigation LANDMARK ROLES
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 search LANDMARK ROLES
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 STRUCTURAL ROLES
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 article columnheader definition
directory document group heading img list listitem math note presentation region row rowheader separator STRUCTURAL ROLES
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 WIDGET ROLES
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 button alert alertdialog
checkbox combobox dialog gridcell link log marquee menuitem menuitemcheckbox menuitemradio option progressbar radio radiogroup scrollbar slider spinbutton status tab tabpanel textbox timer tooltip treeitem WIDGET ROLES
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 WIDGET PROPERTIES
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 aria- activedescendant aria-atomic
aria-autocomplete aria-controls aria-describedby aria-dropeffect aria-flowto aria-haspopup aria-label aria-labeledby aria-level aria-live aria-multiline aria-multiselectable aria-orientation aria-owns aria-posinset aria-eadonly aria-relevant aria-required aria-setsize aria-sort aria-valuemax WIDGET PROPERTIES
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 WIDGET STATES
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 aria-busy aria-checked aria-disabled
aria-expanded aria-grabbed aria-hidden aria-invalid aria-pressed aria-selected aria-valuenow aria-valuetext WIDGET STATES
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 LIVE REGIONS (AJAX)
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 aria-live off, polite,
assertive
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 aria-atomic true, false
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 aria-busy true, false
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 aria-relevant additions, removals,
text, all
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 FORMS
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 Required Fields
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <input type="text" required
/>
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <input type="text" aria-required="true"
/>
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <label for="">Label <em>(required)</em></label>
<input type="text" aria-required="true" />
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <label for="">User Name<em
role="presentation">(required)</em></label> <input type="text" aria-required="true" />
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <label for="">User Name<em
aria-hidden="true">(required)</em></label> <input type="text" aria-required="true" />
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <label for=""> User
Name <img src=”data:image/png;base64” alt=”required” role=”presentation” /> </label> <input type="text" id=”” aria-required="true" />
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 Inline Errors
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <label for=""=> User
Name <img src=”data:image/png;base64” alt=”required” role=”presentation” /> </label> <input type="text" id=”” aria-required="true" aria-describedby=”error” /> <label id=”error” role=”alert”>Error message</label>
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 LISTED ERRORS
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <div class=”message errors”
aria-live=”polite” aria-atomic=”true”> <fieldset> <legend><h3>Errors Title</h3></legend> <ul> <li> <a href=”#input-id” id=”error-label”>Field name is required</a> OR <label for=”input-id” id=”error-label”>Field name...</label> </li> </ul> </fieldset> </div> ... <input type=”text” id=”input-id” aria-labeledby=”error-label” />
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 FIN