18
Implementing ARIA for Real World Accessibility CSUN 2009 Jared Smith Thomas Logan

Implementing ARIA for Real World Accessibility

Embed Size (px)

DESCRIPTION

Slides from "Implementing ARIA for Real World Accessibility" presentation at CSUN 2009.

Citation preview

Page 1: Implementing ARIA for Real World Accessibility

Implementing ARIA for Real World

Accessibility

CSUN2009

Jared Smith Thomas Logan

Page 2: Implementing ARIA for Real World Accessibility

http://csuntweetup.com/

Use #csun09 hashtag in tweets

Page 3: Implementing ARIA for Real World Accessibility

ARIA

• Accessible Rich Internet Applications

• Specification developed by the PFWG of the W3C’s WAI. Huh?

• Currently published as a Last Call Working Draft

Page 4: Implementing ARIA for Real World Accessibility

ARIA enhances accessibility of...

• ... dynamic content and AJAX

• ... scripted widgets and interactive controls

• ... keyboard interactions within a web page

Bridges the gap to future versions of HTML/XHTML

Page 5: Implementing ARIA for Real World Accessibility

AJAX

Jesse James GarrettFebruary 2005

“Asynchronous Javascript + XML”

Page 6: Implementing ARIA for Real World Accessibility

AJAX

Jesse James GarrettFebruary 2005

“Asynchronous Javascript + XML”

It’s really just XMLHttpRequest

Page 7: Implementing ARIA for Real World Accessibility

AJAX

Jesse James GarrettFebruary 2005

“Asynchronous Javascript + XML”

It’s really just XMLHttpRequest

...and stuff

Page 8: Implementing ARIA for Real World Accessibility

AJAX•HTML

•JavaScript

•CSS

•XML

•DOM

•XMLHTTPRequest

Page 9: Implementing ARIA for Real World Accessibility

Why the AJAX explosion?

Page 10: Implementing ARIA for Real World Accessibility

Because “AJAX” is not nearly as geeky

as“XMLHttpRequest... and stuff”

Page 11: Implementing ARIA for Real World Accessibility

•What interactive objects are available?

•What properties do they have?

•How do they relate?

• Is what changed important?

Screen Readers and Dynamic Content

Page 12: Implementing ARIA for Real World Accessibility

ARIACore components

• Roles <form role=”search”>

• States<button aria-pressed=”true”>

• Properties<input aria-required=”true”>

Page 13: Implementing ARIA for Real World Accessibility

Landmark Roles

• Banner, search, main, navigation, complementary, etc.

• Allows instant access to major page components

• The end of “skip” links?

• What about sighted keyboard users?

Page 14: Implementing ARIA for Real World Accessibility

How do you point users to content or AJAX updates?

Should you?

Live Regions

Page 15: Implementing ARIA for Real World Accessibility

Live Regions

• aria-live=”off”

• aria-live=”polite”

• aria-live=”assertive”

Page 16: Implementing ARIA for Real World Accessibility

ARIAother enhancements

• Drag and drop points

• Advanced interactive widgets and controls

• Relationships and labelling

• Sort properties

• Fills keyboard gaps - makes thing tabable and/or focusable

Page 17: Implementing ARIA for Real World Accessibility

Resources

• http://codetalks.org/

• http://queuemusic.org/

Page 18: Implementing ARIA for Real World Accessibility

Questions?

Jared Smith Thomas Logan