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.

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 aria-haspopup="menu" aria-controls="my-menu" aria-expanded="false"
  >Open menu</button>
<div role="menu" hidden id="my-menu">
  <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 fiex direction will be set based on aria-orientation.

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