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>
This is tab 1. JavaScript sold separately!
You are enjoying tab 2.

§ 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>
-
Pick me!
I'm clearly the best option.
-
Pick me instead!
Don't listen to that other guy.
§ 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>