Webdev:WAI-ARIA:Overview: Difference between revisions
Jump to navigation
Jump to search
(Created page with '=Show Me the Money!= ==Before ARIA== <pre> <div id="ads"> ... </div> <div id="nav"> <form id="searchform" ...> ... </form> ... </div> <div id="content"> ... </div> <...') |
No edit summary |
||
| (11 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> | |||
<div id="nav"> | |||
<form id="searchform" ...> | |||
<input name="query" value="" /> | |||
</form> | |||
</div> | |||
<div id="content"> | |||
AJAX content inserted here... | |||
</div> | |||
</pre> | </pre> | ||
==After ARIA== | ==After ARIA== | ||
<pre> | <pre> | ||
<div id="ads" role="banner"> | <div id="ads" role="banner"> | ||
... | ... | ||
</div> | </div> | ||
<div id="nav" role="navigation"> | <div id="nav" role="navigation"> | ||
<form id="searchform" role="search" ...> | <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> | </form> | ||
</div> | </div> | ||
<div id="content" role="main"> | <div id="content" role="main" aria-live="assertive"> | ||
... | AJAX content inserted here... | ||
</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>