Webdev:WAI-ARIA:Overview: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
Line 3: Line 3:
==Before ARIA==
==Before ARIA==
<pre>
<pre>
<div id="ads">
<div id="ads">
  ...
  ...
</div>
</div>
<div id="nav">
<div id="nav">
  <form id="searchform" ...>
  <form id="searchform" ...>
    <input name="query" value="" />
    <input name="query" value="" />
  </form>
  </form>
</div>
</div>
<div id="content">
<div id="content">
  AJAX content inserted here...
  AJAX content inserted here...
</div>
</div>
</pre>
</pre>



Revision as of 05:37, 3 April 2009

Show Me the Money!

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>