ARIA Patterns

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

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

<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" role="tabpanel">...</div>
<div id="users"    role="tabpanel">...</div>

§ Menu

Use menu and menuitem roles — see WAI: Menu.

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

<div role="menu" hidden id="my-menu">
  <a role="menuitem">View</a>
  <a role="menuitem">Edit</a>
  <a role="menuitem">Delete</a>
</div>

§ Listbox

Use listbox and option ARIA roles. WAI: Listbox.

<ul role="listbox" class="box flow-gap">
  <li role="option" aria-selected="true" class="crowded">
    <strong>Pick me!</strong>
    <p>I'm clearly the best option.</p>
  </li>
  <li role="option" class="crowded">
    <strong>Pick me instead!</strong>
    <p>Don't listen to that other guy.</p>
  </li>
</ul>

§ Toolbar

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

<p class="tool-bar">
  <button type="button">Cut</button>
  <button type="button">Copy</button>
  <button type="button">Paste</button>
</p>

<p class="tool-bar" aria-orientation="vertical">
  <button type="button">Cut</button>
  <button type="button">Copy</button>
  <button type="button">Paste</button>
</p>