Implementing ARIA
  for Real World
   Accessibility
              CSUN
               2009

Jared Smith           Thomas L...
http://csuntweetup.com/

Use #csun09 hashtag in tweets
ARIA

• Accessible Rich Internet Applications
• Specification developed by the PFWG of
  the W3C’s WAI. Huh?
• Currently pu...
ARIA enhances accessibility of...

• ... dynamic content and AJAX
• ... scripted widgets and interactive controls
• ... ke...
AJAX
“Asynchronous Javascript + XML”
        Jesse James Garrett
           February 2005
AJAX
“Asynchronous Javascript + XML”
         Jesse James Garrett
            February 2005

    It’s really just XMLHttpR...
AJAX
“Asynchronous Javascript + XML”
         Jesse James Garrett
            February 2005

    It’s really just XMLHttpR...
AJAX
• HTML
• JavaScript
• CSS
• XML
• DOM
• XMLHTTPRequest
Why the AJAX explosion?
Because “AJAX” is
  not nearly as geeky
           as
“XMLHttpRequest... and stuff”
Screen Readers and
    Dynamic Content

• What interactive objects are
  available?
• What properties do they have?
• How ...
ARIA
         Core components


• Roles role=”search”>
  <form
• States aria-pressed=”true”>
  <button
• Propertiesaria-re...
Landmark Roles

• Banner, search, main, navigation,
  complementary, etc.
• Allows instant access to major page
  componen...
Live Regions

How do you point users to
content or AJAX updates?

      Should you?
Live Regions

• aria-live=”off”
• aria-live=”polite”
• aria-live=”assertive”
ARIA
          other enhancements

• Drag and drop points
• Advanced interactive widgets and
  controls
• Relationships an...
Resources



• http://codetalks.org/
• http://queuemusic.org/
Questions?


Jared Smith           Thomas Logan
Upcoming SlideShare
Loading in...5
×

Implementing ARIA for Real World Accessibility

2,736

Published on

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

Published in: Technology, Design
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,736
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Implementing ARIA for Real World Accessibility

  1. 1. Implementing ARIA for Real World Accessibility CSUN 2009 Jared Smith Thomas Logan
  2. 2. http://csuntweetup.com/ Use #csun09 hashtag in tweets
  3. 3. ARIA • Accessible Rich Internet Applications • Specification developed by the PFWG of the W3C’s WAI. Huh? • Currently published as a Last Call Working Draft
  4. 4. 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
  5. 5. AJAX “Asynchronous Javascript + XML” Jesse James Garrett February 2005
  6. 6. AJAX “Asynchronous Javascript + XML” Jesse James Garrett February 2005 It’s really just XMLHttpRequest
  7. 7. AJAX “Asynchronous Javascript + XML” Jesse James Garrett February 2005 It’s really just XMLHttpRequest ...and stuff
  8. 8. AJAX • HTML • JavaScript • CSS • XML • DOM • XMLHTTPRequest
  9. 9. Why the AJAX explosion?
  10. 10. Because “AJAX” is not nearly as geeky as “XMLHttpRequest... and stuff”
  11. 11. Screen Readers and Dynamic Content • What interactive objects are available? • What properties do they have? • How do they relate? • Is what changed important?
  12. 12. ARIA Core components • Roles role=”search”> <form • States aria-pressed=”true”> <button • Propertiesaria-required=”true”> <input
  13. 13. 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?
  14. 14. Live Regions How do you point users to content or AJAX updates? Should you?
  15. 15. Live Regions • aria-live=”off” • aria-live=”polite” • aria-live=”assertive”
  16. 16. ARIA other enhancements • Drag and drop points • Advanced interactive widgets and controls • Relationships and labelling • Sort properties • Fills keyboard gaps - makes thing tabable and/or focusable
  17. 17. Resources • http://codetalks.org/ • http://queuemusic.org/
  18. 18. Questions? Jared Smith Thomas Logan
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×