Webdev:WAI-ARIA:Overview: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
 
(2 intermediate revisions by one other user not shown)
Line 1: Line 1:
=Show Me the Money!=
=Show Me the Money!=


Note: this needs to be updated so it's not wrong.
==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>


Line 31: Line 32:
</div>
</div>
</pre>
</pre>
* [[Webdev:WAI-ARIA#Basic_ARIA_Support|Basic ARIA support]]

Latest revision as of 00:49, 16 March 2012

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>