Skip to content

Update accessibility guidelines for tab and tabpanel #2690

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
scottaohara wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Update accessibility guidelines for tab and tabpanel #2690

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4163883
Update accessibility guidelines for tab and tabpanel
scottaohara Dec 2, 2025
6500a2a
Update index.html
scottaohara Dec 8, 2025
6e4d491
Update index.html
scottaohara Dec 8, 2025
fb99983
Update comments for tab and tabpanel synchronization
scottaohara Dec 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10213,7 +10213,13 @@ <h5>Presentational Role Inheritance</h5>
for details on implementing a tab set design pattern.
</p>
<p>Authors MUST ensure [=elements=] with <a>role</a> <rref>tab</rref> are <a>accessibility children</a> of an element with the role <rref>tablist</rref>.</p>
<p>Authors MUST ensure that if a <code>tab</code> is active, a corresponding <code>tabpanel</code> that represents the active <code>tab</code> is rendered.</p>
<!-- keep following paragraphs in sync with counterpart in #tab -->
<p>Authors MUST ensure that if a <code>tab</code> is active, a corresponding <code>tabpanel</code> that represents the active <code>tab</code> is rendered.</p>
<p>
Authors SHOULD associate a <code>tabpanel</code> <a>element</a> with its <rref>tab</rref>, by using the <pref>aria-controls</pref> attribute on the tab to reference the tab panel, and/or
by using the <pref>aria-labelledby</pref> attribute on the tab panel to reference the tab.
</p>
<!-- /end sync with counterpart in #tab -->
<p>Authors SHOULD ensure the <rref>tabpanel</rref> associated with the currently active tab is <a>perceivable</a> to the user.</p>
<!-- keep following para synced with its counterpart in #tablist -->
<p>
Expand Down Expand Up @@ -10547,10 +10553,13 @@ <h5>Presentational Role Inheritance</h5>
<rdef>tabpanel</rdef>
<div class="role-description">
<p>A container for the resources associated with a <rref>tab</rref>, where each <rref>tab</rref> is contained in a <rref>tablist</rref>.</p>
<!-- keep following paragraphs in sync with counterpart in #tab -->
<p>Authors MUST ensure that if a <code>tab</code> is active, a corresponding <code>tabpanel</code> that represents the active <code>tab</code> is rendered.</p>
<p>
Authors SHOULD associate a <code>tabpanel</code> <a>element</a> with its <rref>tab</rref>, by using the <pref>aria-controls</pref> attribute on the tab to reference the tab panel, and/or
by using the <pref>aria-labelledby</pref> attribute on the tab panel to reference the tab.
</p>
<!-- /end sync with counterpart in #tab -->
<!-- keep following para synced with its counterpart in #tablist -->
<p>
<rref>tablist</rref> elements are typically placed near, and usually preceding, a series of <rref>tabpanel</rref> elements. See the
Expand Down
Loading