Skip to content

docs(material/tabs): expand nav-tab a11y guidance #23705

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.

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

Merged
merged 1 commit into from
Oct 12, 2021
Merged
Changes from all commits
Commits
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
10 changes: 8 additions & 2 deletions src/material/tabs/tabs.md
Original file line number Diff line number Diff line change
Expand Up @@ -95,14 +95,20 @@ between content within a single page.
`MatTabNavBar`, implements a navigation interaction pattern by using a `<nav>` element with anchor
elements as the "tabs". You should use this component when you want your cross-page navigation to
look like a tabbed interface. As a rule of thumb, you should consider `MatTabNavBar` if changing
tabs would change the browser URL.
tabs would change the browser URL. For all navigation, including with `MatTabNavBar`, always move
browser focus to an element at the beginning of the content to which the user is navgating.
Furthermore, consider placing your `<router-outlet>` inside of a
[landmark region](https://www.w3.org/TR/wai-aria-1.1/#dfn-landmark) appropriate to the page.

Avoid mixing both `MatTabGroup` and `MatTabNavBar` in your application. The inconsistent interaction
patterns applied between the components may confuse users.

#### Labels

Always provide an accessible label via `aria-label` or `aria-describedby` for tabs without
descriptive text content.

When using `MatTabNavGroup`, you should also specify a label for the `<nav>` element.
When using `MatTabNavGroup`, always specify a label for the `<nav>` element.

#### Keyboard interaction

Expand Down