Click here to load reader
Progressive Enhancement with ARIA [Accessibility Summit 2010]
Jan 27, 2015
If you've been paying attention for the last few years, you're likely well-versed in progressive enhancement and it's content-out approach to web design, but you may be less familiar with the Accessible Rich Internet Applications spec and how you can leverage its enhanced semantics to provide a truly accessible experience.
In this session, we'll cover the following:
* Discuss progressive enhancement and where ARIA fits into the mix
* Examine how ARIA's landmark roles can provide additional clues as to document structure
* Look at the various roles and states ARIA defines for building accessible widgets
* Cover how to leverage tabindex in an effort to create a better overall experience when using the keyboard
* Walk through the construction of an ARIA-enabled widget, from markup to scripting, following the progressive enhancement process
In this session, we'll cover the following:
* Discuss progressive enhancement and where ARIA fits into the mix
* Examine how ARIA's landmark roles can provide additional clues as to document structure
* Look at the various roles and states ARIA defines for building accessible widgets
* Cover how to leverage tabindex in an effort to create a better overall experience when using the keyboard
* Walk through the construction of an ARIA-enabled widget, from markup to scripting, following the progressive enhancement process
Aaron Gustafson
Progressive Enhancement
with ARIA
We are creating richer online experiences
2
3
...and the barrierswhich prohibit them.
photo by drcorneilus 4
Accessibility is crucial
photo by TimothyJ 5
Google is a voracious consumerof the web. And its blind.
photo by Ed Yourdon 6
But accessibility isnt only about
supporting screen readers.
7
photo by lastquest
What if you cant use a mouse?
8
photo by placenamehere
What if you dont see a change?9
photo by Guillermo
We can and must build better.
10
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Building betterEvery great experience on the web begins with two key things: clear, well-written prose and the HTTP protocol.
Text & HTTP
11
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Building betterSemantics (markup) convey the underlying meaning of the content...
Text & HTTP
(x)HTML
12
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Building betterSemantics (markup) convey the underlying meaning of the content...but if poorly applied, meaning can be obscured.
Text & HTTP
(x)HTML
12
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Building betterCSS can enhance usability through visual clues...
Text & HTTP
(x)HTML
CSS
13
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Building betterCSS can enhance usability through visual clues...but it can also reduce accessibility if misused.
Text & HTTP
(x)HTML
CSS
13
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Building betterJavaScript can be used to build more intuitive interfaces...
Text & HTTP
(x)HTML
CSS
JavaScript
14
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Building better
but it cannot be relied on 100% of the time.
JavaScript can be used to build more intuitive interfaces...
Text & HTTP
(x)HTML
CSS
JavaScript
14
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Building betterWAI-ARIA extends the semantics of the document to provide additional insight into the state of the interface and how to interact with it.
Text & HTTP
(x)HTML
CSS
JavaScript
ARIA
15
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Progressive Enhancement
BASIC ADVANCEDU
ser E
xper
ienc
e
Browser Capabilities
Text & HTTP
(x)HTML
CSS
JavaScript
ARIA
16
photo by Saffanna
WAI-ARIA is a new(ish) tool
17
Semantics+
18
Map OS concepts to the web
photo by steve-uk 19
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
HTML
20
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
http://habilis.net/validator-sac/http://tinyurl.com/cwyvny
20
photo by Verity Cridland
Call attention to important pieces21
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Structural Roles
22
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Structural Roles
role="banner"
23
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Structural Roles
role="main"
24
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Structural Roles
role="article"
25
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Structural Roles
role="complementary"
26
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Structural Roles
role="list"
27
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Structural Roles
role="list"
28
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Structural Roles
role="list"
29
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Structural Roles
role="list"
30
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Structural Roles
role="listitem"
31
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Structural Roles
role="form"
32
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Structural Roles
role="article"
33
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Structural Roles
role="contentinfo"
34
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Structural RolesDocument Structure
Landmarksapplicationbannercomplementary
contentinfoformmain
navigationsearch
articlecolumnheaderdefinitiondirectorydocumentgroup
headingimglistlistitemmathnote
presentationregionrowrowheaderseparator
35
photo by DavePress
Explain what something is& how it works
36
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Widget RolesOK(of course OK would be better)
37
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Widget RolesOK(of course OK would be better)
Something went wrong.
37
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Widget RolesOK(of course OK would be better)
Something went wrong.
Something went wrong.
37
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Widget Rolesalertalertdialogbuttoncheckboxcomboboxdialoggridcelllinklog
marqueemenuitemmenuitemcheckboxmenuitemradiooptionprogressbarradioradiogroupscrollbar
sliderspinbuttonstatustabtabpaneltextboxtimertooltiptreeitem
Widget Container Rolesgridlistboxmenu
menubartablisttoolbar
treetreegrid
38
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Widget Propertiesaria-activedescendantaria-atomicaria-autocompletearia-controlsaria-describedbyaria-dropeffectaria-flowtoaria-haspopuparia-labelaria-labelledbyaria-levelaria-live
aria-multilinearia-multiselectablearia-orientationaria-ownsaria-posinsetaria-readonlyaria-relevant aria-requiredaria-setsizearia-sortaria-valuemaxaria-valuemin
39
photo by exfordy
Indicate whats going on
40
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Widget States
B(off)
B(on)
41
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Widget States
B(off)
B(on)
41
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Widget States
B(off)
B(on)
41
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Widget States
B(off)
B(on)
41
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Complex Widgets
42
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Complex Widgets
role="application"
42
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Complex Widgets
role="slider"aria-labelledby="label_handle_valueA"aria-valuemin="0"aria-valuemax="71"aria-valuenow="22"aria-valuetext="Apr 04"
42
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Complex Widgets
role="presentation"
42
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Widget Statesaria-busyaria-checkedaria-disabledaria-expandedaria-grabbedaria-hiddenaria-invalidaria-pressedaria-selectedaria-valuenow (the W3C defines this as a property)aria-valuetext (ditto)
43
photo by kevin1024
Highlight living content44
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Live Regions
45
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Live Regions
140
46
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Live Regions
140
47
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Live Regions
140 characters left
48
Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010
Notification Optionsoffchange not announced
politechange announced after user completes her current activity
assertiveuser agent should interrupt the users activity, but not immediately
49
photo by cfpg
Manage focus with slight-of-hand
50
Progressive Enhanc
Related Documents See more >
