WAI-ARIA: Information & examples

WAI-ARIA is the Web Accessibility Initiative's specification for creating Accessible Rich Internet Applications.

It exists to enhance custom, dynamic user interface widgets most often built using HTML with functionality implemented using Javascript.

  • How to use ARIA Live Regions for dynamic content

    An article explaining how Live Regions provide settings that can be used to notify an AT about a DOM change.

    View the article on Code Talks

  • Drag and drop: Why foolproof scripting is critical when using ARIA

    Techniques to ensure automatic accessibility for screen reader and keyboard only users.

    View the article on SSB Bart Group

  • CSS drag and drop module demo

    A working drag and drop example.

    View the demo on Whatsock

  • ARIA calendar example

    A working example of aria in a calendar.

    View the demo on Whatsock

  • 44 ARIA examples

    44 real examples of ARIA

    View list of examples on the OpenAjax Alliance site

  • Not all ARIA widgets deserve role=”application”

    Notes on when role=”application” should be used on a web page and how screen readers understand it.

    Read the article on the Accessible Culture site

  • WAI ARIA support on iOS

    Test case results for ARIA on Mobile Safari on iPhone 4 and iPad 1.

    View the results on Henny Swan’s blog

  • Tri-state checkbox examples

    A practical example of a custom tri-state checkbox.

    View the example on The Paciello Group

  • WAI-ARIA Gets Ready for a Starring Role in HTML5

    WAI-ARIA’s landmark roles are now well supported in nearly every browser and screen reader, so use ARIA now!

    View the article on webmonkey

  • Toggle button example

    A live demo of a toggle button.

    View example on The Paciello Group

Updated regularly with the latest articles and links from the best in the industry.

If you have content to contribute, feel free to contact me using the details below.

Official documentation:

  • WAI-ARIA overview
  • WAI-ARIA specification
  • Best practices

Jump to:

  • Widget roles
  • Document structure roles
  • Landmark roles
  • All states & properties

Collated, designed and developed by Emma Sax

  • emmasax on Twitter
  • emmasax on Github
  • View punkchip.com
  • Send an email

Copyright © 2011 Emma Sax