Webdev:WAI-ARIA:Overview: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
| (5 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> | ||
| Line 20: | Line 20: | ||
<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" ...> | ||
<input name="query" value="" aria-required="true" /> | <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" aria-live="assertive"> | <div id="content" role="main" aria-live="assertive"> | ||
| Line 32: | 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>