Example Markup for creating an Accessible Settings Table
<table class="settings-table"> | |
<thead> | |
<tr> | |
<th><code>Settings</code></th> | |
<th><code>Value</code></th> | |
</tr> | |
</thead> | |
<tbody> | |
<!-- each setting consists of two rows --> | |
<!-- setting 1 --> | |
<tr class="setting" tabindex="1"> | |
<td><code>site_title</code></td> | |
<td>My Site</td> | |
</tr> | |
<tr class="js-hide setting-form"> | |
<td colspan="2"> | |
<div> | |
<form action="#" method="post"><!-- assume this form and all below posts to the server updating the corresponding setting --> | |
<h4><code>site_title</code></h4> | |
<input type="text" name="site_title" tabindex="2" /> | |
<div class="button-bar"> | |
<button type="submit" tabindex="3">Save</button> | |
</div> | |
</form> | |
</div> | |
</td> | |
</tr> | |
<!-- setting 2 --> | |
<tr tabindex="20"> | |
<td>Media Source</td> | |
<td>Filesystem</td> | |
</tr> | |
<tr class="js-hide setting-form"> | |
<td colspan="2"> | |
<div> | |
<form action="#" method="post"> | |
<h4>Media Source</h4> | |
<select tabindex="23"> | |
<option value="1">Filesystem</option> | |
<option value="2">Assets</option> | |
<option value="3">Amazon S3</option> | |
</select> | |
<div class="button-bar"> | |
<button type="submit" tabindex="24">Save</button> | |
</div> | |
</form> | |
</div> | |
</td> | |
</tr> | |
<!-- setting 3 --> | |
<tr tabindex="30"> | |
<td>JS–Driver</td> | |
<td><code>React.js 0.x</code></td> | |
</tr> | |
<tr class="js-hide setting-form"> | |
<td colspan="2"> | |
<div> | |
<form action="#" method="post"> | |
<h4>Media Source</h4> | |
<fieldset style="text-align:left"> | |
<input type="radio" name="mediasource" checked value="1" id="mediasource_1" tabindex="31"> | |
<label for="filesystem"><code>React.js 0.x</code></label> | |
</fieldset> | |
<fieldset style="text-align:left"> | |
<input type="radio" name="mediasource" value="2" id="filesystem_2" tabindex="32"> | |
<label for="filesystem"><code>Angular 2.x</code></label> | |
</fieldset> | |
<div class="button-bar"> | |
<button type="submit" tabindex="33">Save</button> | |
</div> | |
</form> | |
</div> | |
</td> | |
</tr> | |
<!-- setting 4 --> | |
<tr tabindex="40"> | |
<td><code>clipsJSON</code></td> | |
<td><code>{{"prop":"value"}}</code></td> | |
</tr> | |
<tr class="js-hide setting-form"> | |
<td colspan="2"> | |
<div> | |
<form action="#" method="post"> | |
<h4><code>clipsJSON</code></h4> | |
<textarea name="clipsJSON" id="clipsJSON" rows="12" style="font-family:monospace" tabindex="41">[{"title":"$ Dollar Sign","clip":"$"}, | |
{"title":"€ Euro Sign","clip":"€"}, | |
{"title":"¢ Cent Sign","clip":"¢"}, | |
{"title":"£ Pound Sign","clip":"£"}, | |
{"title":"¤ Currency Sign","clip":"¤"}, | |
{"title":"¥ Yen Sign","clip":"¥"}, | |
{"title":"ƒ Florin Sign","clip":"ƒ"}]</textarea> | |
<div class="button-bar"> | |
<button type="submit" tabindex="42">Save</button> | |
</div> | |
</form> | |
</div> | |
</td> | |
</tr> | |
<!-- setting 5 --> | |
<tr tabindex="50"> | |
<td><code>compress_css</code></td> | |
<td><code>Yes</code></td> | |
</tr> | |
<tr class="js-hide setting-form"> | |
<td colspan="2"> | |
<div> | |
<form action="#" method="post"> | |
<h4><code>compress_css</code></h4> | |
<input type="checkbox" name="compress_css" value="" id="compress_css" tabindex="51"> <label>Yes</label> | |
<div class="button-bar"> | |
<button type="submit" tabindex="52">Save</button> | |
</div> | |
</form> | |
</div> | |
</td> | |
</tr> | |
</tbody> | |
</table> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment