Article Title 1
Article content
Missing.css will style markup based on ARIA roles. We often reference the WAI-ARIA Authoring Practices.
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.
<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>
Use menu
and menuitem
roles — see WAI: Menu.
To get the actual behavior of an accessible menu, you can use Missing.js § Menu.
<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>
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 role=toolbar>
<button type=button>Cut</button>
<button type=button>Copy</button>
<button type=button>Paste</button>
</p>
<p role=toolbar aria-orientation=vertical>
<button type=button>Cut</button>
<button type=button>Copy</button>
<button type=button>Paste</button>
</p>
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.
<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 content
Article content