Improving a Web site using Web Content Accessibility Guidelines (WCAG) 2.0
Demo starts here
Skip to content (within demo page) Skip to navigation (within demo page)
Today: Thursday 17 April 2025, Sunny Spells, 23°C
Traffic: Construction work on Main Road
| Lung | Pancreas | Spleen | Liver | Skin | Brain | |
|---|---|---|---|---|---|---|
| hate it | 4 | 10 | 4 | 0 | 1 | 0 |
| love it | 5 | 6 | 0 | 14 | 1 | 0 |
Form instructions are provided, especially with respect to required fields.
<form action="" method="post"> <p>Fields are required if not otherwise noted.</p>
Radio buttons grouped with fieldset element, and are described using the legend element.
<fieldset id="park"> <legend>Favorite Park</legend> ... </fieldset>
Radio button is associated with its label "none" using the label element.
<input type="radio" name="res" id="nn" value="1"> <label for="nn">None</label>
Select box is captioned using the title element.
<select name="cc" id="cc" title="cities of the world">
The items in this long list are grouped and sorted by city rather than by country to facilitate effective use by keyboard.
The sequence of labels and input fields are organized to make sense when they are read in the order they appear in the code. The input fields are associated with their labels using the label element.
<p id="namenewsletter" class="input">
<label for="n">Name:</label>
<input type="radio" name="t" id="mr" value"mr" title="title"><label for="mr">Mr.</label>
<input type"radio" name="t" id="mrs" value="mrs" title="title"><label for="mrs">Mrs.</label>
<input type="text" name="n" id="n" size="30" style="margin-left: 0.5em;"></p>
<p id="emailinput" class="input" style="width: 16em; float: left; margin-top: 0.5em;">
<input type="text" name="em" id="em" size="20"><br><label for="em">eMail Address</label></p>
<p id="emailvalid" class="input" style="width: 16em; float: left; margin-top: 0.5em;">
<input type="text" name="ev" id="ev" size="20"><br><label for="ev">Retype eMail</label></p>
Data in this table is organized using corresponding table structures such as the th and td elements.
<th scope="row">hate it<th>
...
<th scope="row">hate it<th>