Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive
Enhancement
with ARIA
Aaron Gustafson

We are creating
richer online
experiences

2

...and the barriers
which prohibit them.
photo by drcorneilus 4

Accessibility is crucial

photo by TimothyJ 5

Google is a voracious consumer
of the web. And it’s blind.

photo by Ed Yourdon 6

But accessibility
isn’t only about
supporting
screen readers.

7

What if you can’t use a mouse?

photo by lastquest 8

What if you don’t see a change?
photo by placenamehere 9

We can and must build better.

photo by Guillermo 10

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Building better
Every great experience on the web
begins with two key things: clear,
well-written prose and the HTTP
protocol.

Text & HTTP

11


Building better
Semantics (markup) convey the
underlying meaning of
the content...

(x)HTML

Text & HTTP

12


Building better
Semantics (markup) convey the
underlying meaning of
the content...
but if poorly applied, meaning can
be obscured.

(x)HTML

Text & HTTP

12


Building better
CSS can enhance usability through
visual clues...

CSS

(x)HTML

Text & HTTP

13


Building better
CSS can enhance usability through
visual clues...
but it can also reduce accessibility
if misused.

CSS

(x)HTML

Text & HTTP

13


Building better
JavaScript can be used to build
more intuitive interfaces...

JavaScript

CSS

(x)HTML

Text & HTTP

14


Building better
JavaScript can be used to build
more intuitive interfaces...
but it cannot be relied on 100% of
the time.
JavaScript

CSS

(x)HTML

Text & HTTP

14


Building better
WAI-ARIA extends the semantics
of the document to provide
ARIA additional insight into the state of
the interface and how to interact
JavaScript with it.

CSS

(x)HTML

Text & HTTP

15


Progressive Enhancement

ARIA

User Experience
JavaScript

CSS
BASIC ADVANCED

Browser Capabilities
(x)HTML

Text & HTTP

16

WAI-ARIA is a new(ish) tool

photo by Saffanna 17

Map OS concepts to the web

photo by steve-uk 19


HTML

20


http://tinyurl.com/cwyvny
http://habilis.net/validator-sac/

20

Call attention to important pieces
photo by Verity Cridland 21


Structural Roles

22


Structural Roles

role="banner"

23


Structural Roles

role="main"

24


Structural Roles

role="article"

25


Structural Roles

role="complementary"

26


Structural Roles

role="list"

27


Structural Roles

role="list"

28


Structural Roles

role="list"

29


Structural Roles

role="list"

30


Structural Roles

role="listitem"

31


Structural Roles

role="form"

32


Structural Roles

role="article"

33


Structural Roles

role="contentinfo"

34


Structural Roles
Document Structure
article heading presentation
columnheader img region
definition list row
directory listitem rowheader
document math separator
group note

Landmarks
application contentinfo navigation
banner form search
complementary main

35

Explain what something is
& how it works

photo by DavePress 36


Widget Roles
<span role="button">OK</span>
(of course <button>OK</button> would be better)

37


Widget Roles

<div role="alert">
<p>Something went wrong.</p>
</div>

37


Widget Roles

<div role="alert">
</div>

<div role="alertdialog">
<img src="x.png" alt="dismiss"
role="button" />
</div>

37


Widget Roles
alert marquee slider
alertdialog menuitem spinbutton
button menuitemcheckbox status
checkbox menuitemradio tab
combobox option tabpanel
dialog progressbar textbox
gridcell radio timer
link radiogroup tooltip
log scrollbar treeitem

Widget Container Roles
grid menubar tree
listbox tablist treegrid
menu toolbar

38


Widget Properties
aria-activedescendant aria-multiline
aria-atomic aria-multiselectable
aria-autocomplete aria-orientation
aria-controls aria-owns
aria-describedby aria-posinset
aria-dropeffect aria-readonly
aria-flowto aria-relevant
aria-haspopup aria-required
aria-label aria-setsize
aria-labelledby aria-sort
aria-level aria-valuemax
aria-live aria-valuemin

39

Indicate what’s going on

photo by exfordy 40


Widget States

B B
(off) (on)

41


Widget States

B B
(off) (on)

<button>
<img src="bold-off.png" alt="bold" />
</button>

<button>
<img src="bold-on.png" alt="bold" />
</button>

41


Widget States

B B
(off) (on)

<button>
<img src="bold-off.png" alt="not bold" />
</button>

<button>
</button>

41


Widget States

B B
(off) (on)

<button role="button" aria-pressed="false">
<img src="bold-off.png" alt="not bold" />
</button>

<button role="button" aria-pressed="true">
</button>

41


Complex Widgets

42


Complex Widgets

role="application"

42


Complex Widgets

role="slider"
aria-labelledby="label_handle_valueA"
aria-valuemin="0"
aria-valuemax="71"
aria-valuenow="22"
aria-valuetext="Apr 04"
42


Complex Widgets

role="presentation"

42


Widget States
aria-busy
aria-checked
aria-disabled
aria-expanded
aria-grabbed
aria-hidden
aria-invalid
aria-pressed
aria-selected
aria-valuenow (the W3C deﬁnes this as a “property”)
aria-valuetext (ditto)

43

Highlight “living” content
photo by kevin1024 44


Live Regions

45


Live Regions

<span id="chars_left_notice" class="numeric">
<strong id="status-field-char-counter"
class="char-counter">140</strong>
</span>

46


Live Regions

<span id="chars_left_notice" class="numeric"
aria-live="polite">
</span>

47


Live Regions

<span id="chars_left_notice" class="numeric"
aria-live="polite">
characters left
</span>

48


Notiﬁcation Options
off
change not announced

polite
change announced after user completes her current activity

assertive
user agent should interrupt the user’s activity, but not immediately

49

Manage focus with slight-of-hand

photo by cfpg 50


tabindex helps manage focus
<div tabindex="0">
<p>This <code>div</code> can now receive focus
using a keyboard’s <kbd>tab</kbd> key. How cool
is that?</p>
</div>
<div tabindex="-1">
<p>This <code>div</code> won’t be focused by a
user via the <kbd>tab</kbd> key, but JavaScript
can <code>focus()</code> it. Nifty, huh?</p>
</div>

51

Piecing it all together
photo by Richard Jones 52


Let’s Build a Tabbed Interface

53


Traditional approach
<h1>Pumpkin Pie</h1>
<div class="container">
<div class="section">
<h2>Overview</h2>
<img src="pie.jpg" alt="">
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
...
</div>
...
<ul class="tabs">
<li><a href="#">Overview</a></li>
<li><a href="#">Ingredients</a></li>
<li><a href="#">Directions</a></li>
<li><a href="#">Nutrition</a></li>
</ul>
</div>
54


Static HTML with no style

55


A little typography

56


Typography and color

57


Taking another look

58


Taking another look

.tabbed
58


Required source
<h1>Pumpkin Pie</h1>
<div class="tabbed">
<h2>Overview</h2>
<img src="pie.jpg" alt="" />
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
...
<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title="inch">in</abbr>) unbaked deep
dish pie crust</li>
<li>½ cup white sugar</li>
...
</ul>
<h2>Directions</h2>
...
</div>
59


Understanding the ﬂow

Split the
content & make Page
some tabs

JS?
Yes No

60


Mouse-based interaction

61


Assigning ARIA Roles

role="application"
aria-activedescendant="folder-1"

62


role="tablist"

63


role="tab"
aria-selected="true"
aria-controls="folder-1"

64


role="tab"
aria-selected="false"
aria-controls="folder-4"

65



role="tabpanel"
aria-hidden="false"
aria-labelledby="folder-1-tab"
66


Updating states and properties
tab.onclick = swap;

// ...

function swap( e ){
// ...
old_tab.setAttribute( 'aria-selected', 'false' );
// ...
tab.setAttribute( 'aria-selected', 'true' );
// ...
old_folder.setAttribute( 'aria-hidden', 'true' );
// ...
new_folder.setAttribute( 'aria-hidden', 'false' );
// ...
_cabinet.setAttribute( 'aria-activedescendant', _active );
}

67


Enabling the keyboard
tab.onclick = swap;
tab.onkeydown = moveFocus;
tab.onfocus = swap;

68



69


tabindex="-1"

69


tabindex="0"

69


function moveFocus( e ) {
e = ( e ) ? e : event;
var tab = e.target || e.srcElement,
key = e.keyCode || e.charCode,
pass = true;
tab = getTab( tab );

// keyboard handling goes here

if ( ! pass )
{
return cancel( e );
}
}

70


function getTab( tab )
{
while ( tab.nodeName.toLowerCase() != 'li' )
{
tab = tab.parentNode;
}
return tab;
}

71


function moveFocus( e ) {
// ...
switch ( key ) {
case 37: // left arrow
case 38: // up arrow
move( tab, 'previous', false );
pass = false;
break;
// down (39), right (40), home (36), end (35)
// should be added here
case 27: // escape
tab.blur();
pass = false;
break;
}
// ...
}

72


function swap( e ){
// ...
old_tab.setAttribute( 'aria-selected', 'false' );
old_tab.setAttribute( 'tabindex', '-1' );
// ...
tab.setAttribute( 'aria-selected', 'true' );
tab.setAttribute( 'tabindex', '0' );
// ...
old_folder.setAttribute( 'aria-hidden', 'true' );
old_folder.setAttribute( 'tabindex', '-1' );
// ...
new_folder.setAttribute( 'aria-hidden', 'false' );
new_folder.setAttribute( 'tabindex', '0' );
// ...
}

74


The Fruit (Pie) of Our Labor

75


Who is Supporting WAI-ARIA?

76


For More
WAI-ARIA Spec
w3.org/TR/wai-aria/

WAI-ARIA Support in Browsers
paciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF.html

TabInterface
easy-designs.github.com/tabinterface.js/

77


Slides available at
http://slideshare.net/AaronGustafson

This presentation is licensed under
Creative Commons
Attribution-Noncommercial-Share Alike 3.0

ﬂickr Photo Credits
“ferris wheel? not yet...” by drcorneilus
“Hunter Museum” by TimothyJ
“No, I don't need any help - I'm…” by Ed Yourdon
“The almighty mouse” by lastquest
“wii browser - zoomed in” by placenamehere
“Legospective” by Guillermо
“I love my toolbox 15 July Scavenger Hunt” by Saffanna
“Dual Samsung Monitors” by steve-uk
“Keystone of the Monumental Arch,…” by Verity Cridland
“Lego” by DavePress
“iFlickr touch screen” by exfordy
“Green Plant” by kevin1024
“Cartas” by cfpg
“Lego Millenium Falcon” by Richard Jones

79

Progressive Enhancement with ARIA [Accessibility Summit 2010]

Recommended

Recommended

More Related Content

Similar to Progressive Enhancement with ARIA [Accessibility Summit 2010]

Similar to Progressive Enhancement with ARIA [Accessibility Summit 2010] (20)

More from Aaron Gustafson

More from Aaron Gustafson (20)

Recently uploaded

Recently uploaded (20)

Progressive Enhancement with ARIA [Accessibility Summit 2010]