Example Markup for creating an Accessible Settings Table

settings-table.html

<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>