Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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&ndash;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">&nbsp;
<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">&nbsp;
<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">&nbsp;<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
You can’t perform that action at this time.