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

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

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>

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

<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