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.
§ Listbox
Use listbox
and option
ARIA roles. WAI: Listbox.
§ 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
.