Webdev:WAI-ARIA:Overview

From MozillaWiki
Jump to: navigation, search

Show Me the Money!

Note: this needs to be updated so it's not wrong.

Before ARIA

<div id="ads">
  ...
</div>
<div id="nav">
  <form id="searchform" ...>
    <input name="query" value="" />
  </form>
</div>
<div id="content">
  AJAX content inserted here...
</div>

After ARIA

<div id="ads" role="banner">
  ...
</div>
<div id="nav" role="navigation">
    <form id="searchform" role="search" ...>
      <p class="error">You did not enter a search term</p>
      <input name="query" value="" aria-required="true" aria-invalid="true" /> 
    </form>
</div>
<div id="content" role="main" aria-live="assertive">
  AJAX content inserted here...
</div>