ARIA Patterns

Missing.css will style markup based on ARIA roles. We often reference the WAI-ARIA Authoring Practices.

Contents:

§ Tabs

Mark up your tabs using the tablist, tab and tabpanel roles appropriately — see WAI: Tabs.

To get the actual behavior of an accessible tabset, you can use Missing.js § Tabs.

Example: Tab markup
<script type=module src=/dist/js/tabs.js></script>

<div role=tablist aria-label="Tabs example">
  <button role=tab aria-controls=servers aria-selected=true
    >Servers</button>
  <button role=tab aria-controls=channels
    >Channels</button>
  <button role=tab aria-controls=users
    >Users</button>
</div>

<div id=servers         role=tabpanel>...</div>
<div id=channels hidden role=tabpanel>...</div>
<div id=users    hidden role=tabpanel>...</div>
This is tab 1. JavaScript sold separately!

Use menu and menuitem roles — see WAI: Menu.

To get the actual behavior of an accessible menu, you can use Missing.js § Menu.

Example: Menu markup
<script type=module src=/dist/js/menu.js></script>

<button id=menubutton aria-haspopup=menu aria-controls=my-menu aria-expanded=false
  >Options</button>
<div role=menu hidden id=my-menu aria-labelledby=menubutton>
  <a role=menuitem>View</a>
  <a role=menuitem>Edit</a>
  <a role=menuitem>Delete</a>
</div>

§ Toolbar

Any element with the toolbar role will have the same styles as a .tool-bar. The flex direction will be set based on the aria-orientation attribute.

Example: Horizontal toolbar markup
<p role=toolbar>
  <button type=button>Cut</button>
  <button type=button>Copy</button>
  <button type=button>Paste</button>
</p>

Example: Vertical toolbar markup
<p role=toolbar aria-orientation=vertical>
  <button type=button>Cut</button>
  <button type=button>Copy</button>
  <button type=button>Paste</button>
</p>

§ Feed

Use feed role with <article> children — see WAI: Feed. Nested feeds are supported.

To get the actual behavior of an accessible feed, you can use Missing.js § Feed.

Example: Feed markup
<script type=module src=/dist/js/feed.js></script>
<div role=feed>
  <article class="box" aria-labelledby=article-1-label>
    <h2 id=article-1-label>Article Title 1</h2>
    <p>Article content</p>
  </article>
  <article class="box" aria-labelledby=article-2-label>
    <h2 id=article-2-label>Article Title 2</h2>
    <p>Article content</p>
  </article>
</div>

Article Title 1

Article content

Article Title 2

Article content

§ Toggle Switch

Use switch role with <input type=checkbox>. The indeterminate state is supported, but it must be set with JavaScript.

Example: Toggle switch markup
<div class="flex-switch">
  <fieldset class="flex-column">
    <legend>Toggles inside labels</legend>
    <label><input type=checkbox role=switch>Toggle me</label>
    <label><input type=checkbox role=switch checked>But not me</label>
    <label><input type=checkbox role=switch class="indeterminate">I'm not sure</label>
  </fieldset>
  <fieldset class="flex-column">
    <legend>Toggles inside labels, flipped</legend>
    <label class="justify-content:space-between">Toggle me<input type=checkbox role=switch></label>
    <label class="justify-content:space-between">But not me <input type=checkbox role=switch checked></label>
    <label class="justify-content:space-between">I'm not sure <input type=checkbox role=switch class="indeterminate"></label>
  </fieldset>

  <script>
    document.querySelectorAll('.indeterminate').forEach(
      el => {el.indeterminate = true;}
    )
  </script>
</div>
Toggles inside labels
Toggles inside labels, flipped 
<div class="flex-switch">
  <fieldset class="table rows">
    <legend>Toggles before labels</legend>
    <div>
      <input id=toggle-1 type=checkbox role=switch>
      <label for=toggle-1>Toggle me</label>
    </div>
    <div>
      <input id=toggle-2type=checkbox role=switch checked>
      <label for=toggle-2>But not me</label>
    </div>
    <div>
      <input id=toggle-3 type=checkbox role=switch class="indeterminate">
      <label for=toggle-3>I'm not sure</label>
    </div>
  </fieldset>
  <fieldset class="table rows">
    <legend>Toggles after labels</legend>
    <div>
      <label for=toggle-4>Toggle me</label>
      <input id=toggle-4 type=checkbox role=switch>
    </div>
    <div>
      <label for=toggle-5>But not me</label>
      <input id=toggle-5 type=checkbox role=switch checked>
    </div>
    <div>
      <label for=toggle-6>I'm not sure</label>
      <input id=toggle-6 type=checkbox role=switch class="indeterminate">
    </div>
  </fieldset>
  <script>
    document.querySelectorAll('.indeterminate').forEach(
      el => {el.indeterminate = true;}
    )
  </script>
</div>
Toggles before labels
Toggles after labels