-
Notifications
You must be signed in to change notification settings - Fork 22.6k
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
Major revision: tabpanel role #13743
Conversation
estelle
commented
Mar 10, 2022
- Adds a new document
- Rewrites (or significantly expands) a document
- Fixes a typo, bug, or other error
Preview URLsFlawsURL:
External URLsURL:
(this comment was updated 2022-03-22 00:50:45.719594) |
files/en-us/web/accessibility/aria/roles/tabpanel_role/index.md
Outdated
Show resolved
Hide resolved
Tabs do not act as anchor links to individual panels. While semantic HTML may be coded with the tabs being anchor links natigating to the tab's associated tabpanel, when JavaScript is used to progressively enhance the content to a tabbed interface, the link's default behavior should be prevented. | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tabs do not act as anchor links to individual panels. While semantic HTML may be coded with the tabs being anchor links natigating to the tab's associated tabpanel, when JavaScript is used to progressively enhance the content to a tabbed interface, the link's default behavior should be prevented. |
files/en-us/web/accessibility/aria/roles/tabpanel_role/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/accessibility/aria/roles/tabpanel_role/index.md
Outdated
Show resolved
Hide resolved
Hide the non-visible tabpanels that are not currently relevant with the HTML {{htmlattrxref('hidden')}} attribute or set [`aria-hidden="true"`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby). Browsers won't render elements with the `hidden` attribute set. If using `aria-hidden`, use CSS to hide the hidden tab panels. | ||
The newly selected `tab` is considered "active" and should have it`s [`aria-selected`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) attribute set to `true` while all other tabs in the same `tablist` should have the `aria-selected` attribute set to `false`, or removed altogether. See [ARIA `tab` role](/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role) for move information. | ||
|
||
If the `tablist` precedes the `tabpanel` in source order, the user will expect to be able to step through the remaining tabs in focus order or select the <kbd>down arrow</kbd> to give focus to the visible tabpanel when navigating by keyboard. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If the `tablist` precedes the `tabpanel` in source order, the user will expect to be able to step through the remaining tabs in focus order or select the <kbd>down arrow</kbd> to give focus to the visible tabpanel when navigating by keyboard. | |
If the `tablist` precedes the `tabpanel` in source order, the user will expect to be able to step through the remaining tabs in focus order or select the <kbd>Down Arrow</kbd> to give focus to the visible tabpanel when navigating by keyboard. |