Slide 1
Slide 1 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
ARIA 101
ACCESSIBILITY & FORMS
Slide 2
Slide 2 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
FILL IN THE GAPS
Slide 3
Slide 3 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
TABINDEX
Slide 4
Slide 4 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
DEFINE WHAT
Slide 5
Slide 5 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
LANDMARK ROLES
Slide 6
Slide 6 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
application
LANDMARK ROLES
Slide 7
Slide 7 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
banner
LANDMARK ROLES
Slide 8
Slide 8 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
complementary
LANDMARK ROLES
Slide 9
Slide 9 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
content info
LANDMARK ROLES
Slide 10
Slide 10 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
form
LANDMARK ROLES
Slide 11
Slide 11 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
main
LANDMARK ROLES
Slide 12
Slide 12 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
navigation
LANDMARK ROLES
Slide 13
Slide 13 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
search
LANDMARK ROLES
Slide 14
Slide 14 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
STRUCTURAL ROLES
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
WIDGET ROLES
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
WIDGET PROPERTIES
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
WIDGET STATES
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
LIVE REGIONS (AJAX)
Slide 23
Slide 23 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
aria-live
off, polite, assertive
Slide 24
Slide 24 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
aria-atomic
true, false
Slide 25
Slide 25 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
aria-busy
true, false
Slide 26
Slide 26 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
aria-relevant
additions, removals, text, all
Slide 27
Slide 27 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
FORMS
Slide 28
Slide 28 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
Required Fields
Slide 29
Slide 29 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
Slide 30
Slide 30 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
Slide 31
Slide 31 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
Label (required)
Slide 32
Slide 32 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
User Name(required)
Slide 33
Slide 33 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
User Name(required)
Slide 34
Slide 34 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
User Name
Slide 35
Slide 35 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
Inline Errors
Slide 36
Slide 36 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
User Name
Error message
Slide 37
Slide 37 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
LISTED ERRORS
Slide 38
Slide 38 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
...
Errors Title
- Field name is required OR Field name...
Slide 39
Slide 39 text
CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011
FIN