Accessibility (a11y) Documentation
What accessibility information should be more explicitly called out on the Paragon documentation website (e.g.,
aria
attributes, etc.).
Questions on a component by component level
A11y implementation details (using
aria
which does XYZ)Content a11y for someone just dropping the component in the design (e.g., no 2 inputs with same labels).
Usage guidance of when to use which component, or not at all (e.g., checkboxes vs. radios).
Be upfront about what components don’t support (e.g., a callback).
MATTHEW LEPAGE: DEMOING SPECIFIC EXAMPLE AT PWG TOMORROW..
“Good practice” vs. “Bad practice”
Some of these exist in Figma (but could be expanded). Should consider bringing these to the docs site.
Separate header for a11y on each components
Table with implementation details with additional contextual information.
Attributes used (e.g.,
aria-label
).
“Relevant info followed by usage.”
2 tasks
A11y header on each component
A11y information filled out in a table in this doc (@Jeff Witt to create a table for each component)
Useful to have in Figma, too, but a challenge to keep in sync.
Long term, we want “source of truth” to be in the docs site only.
Spreadsheet to track? Also can track usage guidance.
WCAG 2 conformant essentials but these are the documented additional a11y “best practices”.
Should we create a GitHub issue?
Yes. We’ll discuss on Friday sync and prioritize for next sprint.
A11y overview page under “Foundations” (@Jeff Witt has a WIP high-level a11y doc)
[question] How much time do designers spend in Figma vs. docs site?
Can we build better pathways for designers to access the docs site?
Is there an equivalent to “Dev resources” in Figma to link to docs site / GitHub code for devs?
Can designers/etc. self-serve update content if it only exists in the docs site?
CMS?
“Edit this page” CTA in docs site pages (this will be prioritized/implemented).
Includes additional good / bad examples?
Smaller components may be tricky to have a “good” vs. “bad”.
Component template page redesign for later once we have baseline a11y info in place:
Some pages (like DataTable) are quite long. How do we make these more understandable / not as overwhelming?
Tabs (design vs. dev.)?
Could be different usage checklists between different personas.
Mini UX focused approach:
Who are the user personas of the docs site?
Design docs.
Engineers.
Etc.?
How do we best serve each group?
Separate
.md
file for a11y docs vs. technical docs to reduce the barrier to edit pages?Interesting idea. Might be worth exploring.
Preview? Deploy previews.
Testing a11y.
react-axe
Component specific info thats not covered by automated tools.
- 1 ActionRow
- 2 Alert
- 2.1.1 Accessibility attributes
- 2.2 Attribute
- 2.2.1 Accessible text
- 2.3 Alert.Link
- 2.3.1 Keyboard support
- 3 AlertModal
- 4 Annotation
- 5 Avatar
- 6 AvatarButton
- 7 Badge
- 8 Breadcrumbs
- 9 Bubble
- 10 Button
- 10.1 Accessibility attributes
- 10.2 Keyboard support
- 11 ButtonGroup
- 12 Card
- 12.1 Card.ImageCap
- 12.1.1 Accessibility attributes
- 12.2 CardCarusel
- 12.2.1 Accessible text
- 12.3 Clickable card
- 12.3.1 Keyboard support
- 12.4 CardCarousel (Navigation arrows)
- 12.4.1 Keyboard support
- 12.5 CardCarousel (Cards inside the carousel)
- 12.5.1 Keyboard support
- 12.1 Card.ImageCap
- 13 Carousel
- 13.1 Accessibility attributes
- 13.2 Accessible text
- 13.3 Keyboard support
- 14 Chip
- 14.1 Accessibility attributes
- 14.2 Keyboard support
- 15 ChipCarousel
- 15.1 Accessibility attributes
- 15.2 Accessible text
- 15.3 Keyboard support
- 16 Collapsible
- 16.1 Collapsible.Trigger
- 16.1.1 Accessibility attributes
- 16.1.2 Keyboard support
- 16.1 Collapsible.Trigger
- 17 ColorPicker
- 17.1 Accessibility attributes
- 17.2 Keyboard support
- 18 Container
- 19 DataViews
- 20 DataTable
- 20.1.1 Accessibility attributes
- 20.1.2 Accessible text
- 20.1.3 Keyboard support
- 20.2 DataTable.TableControlBar
- 20.2.1 Accessibility attributes
- 20.2.2 Accessible text
- 20.2.3 Keyboard support
- 20.3 DataTable.TableFooter
- 20.3.1 Accessibility attributes
- 20.3.2 Accessible text
- 20.3.3 Keyboard support
- 21 Dropdown
- 21.1 DropdownButton
- 21.1.1 Accessibility attributes
- 21.1.2 Keyboard support
- 21.2 Dropdown.Item
- 21.2.1 Keyboard support
- 21.3 Dropdown.Header
- 21.3.1 Accessibility attributes
- 21.4 Dropdown.Divider
- 21.4.1 Accessibility attributes
- 21.1 DropdownButton
- 22 Dropzone
- 22.1 Accessibility attributes
- 22.2 Accessible text
- 22.3 Keyboard support
- 23 Figure
- 24 Form.Autosuggest
- 24.1 Accessibility attributes
- 24.2 Keyboard support
- 25 Form.Checkbox
- 25.1 CheckboxControl
- 25.1.1 Accessibility attributes
- 25.2 Form.Checkbox
- 25.2.1 Keyboard support
- 25.1 CheckboxControl
- 26 Form.Control
- 26.1 Accessibility attributes
- 26.2 Keyboard support
- 27 Form.Control.Feedback
- 28 Form.Group
- 29 Form.Label
- 30 Form.Radio
- 30.1.1 Accessibility attributes
- 30.1.2 Keyboard support
- 30.2 Form.RadioSet
- 30.2.1 Accessibility attributes
- 31 Form.Switch
- 31.1 Form.Switch
- 31.1.1 Accessibility attributes
- 31.2 SwitchControl
- 31.2.1 Accessibility attributes
- 31.2.2 Keyboard support
- 31.1 Form.Switch
- 32 Forms
- 33 FullscreenModal
- 33.1 Accessibility attributes
- 33.2 Keyboard support
- 34 Hyperlink
- 34.1 Accessible text
- 34.2 Keyboard support
- 35 Icon
- 36 IconButton
- 36.1.1 Accessibility attributes
- 36.2 IconButtonWithTooltip
- 36.2.1 Keyboard support
- 37 IconButtonToggle
- 37.1 Accessibility attributes
- 37.2 Keyboard support
- 38 Image
- 39 InputGroup
- 40 Layout
- 41 MailtoLink
- 41.1 Accessible text
- 41.2 Keyboard support
- 42 MarketingModal
- 42.1 Accessibility attributes
- 42.2 Keyboard support
- 43 Menu
- 43.1 Keyboard support
- 44 ModalDialog
- 44.1 Accessibility attributes
- 44.2 Keyboard support
- 45 ModalLayer
- 45.1 Accessibility attributes
- 45.2 Accessible text
- 45.3 Keyboard support
- 46 ModalPopup
- 46.1 Keyboard support
- 47 Nav
- 47.1 Nav.Link
- 47.1.1 Accessibility attributes
- 47.2 NavDropdown
- 47.2.1 Accessibility attributes
- 47.2.2 Keyboard support
- 47.3 NavDropdown.Item
- 47.3.1 Accessibility attributes
- 47.3.2 Keyboard support
- 47.4 NavDropdown.Divider
- 47.4.1 Accessibility attributes
- 47.1 Nav.Link
- 48 Navbar
- 48.1.1 Accessibility attributes
- 48.2 NavDropdown
- 48.2.1 Accessibility attributes
- 48.2.2 Keyboard support
- 48.3 NavDropdown.Item
- 48.3.1 Keyboard support
- 49 OverflowScroll
- 49.1 Accessibility attributes
- 49.2 Keyboard support
- 50 Overlays
- 51 PageBanner
- 51.1 Accessibility attributes
- 51.2 Keyboard support
- 52 Pagination
- 52.1 Accessibility attributes
- 52.2 Accessible text
- 52.3 Keyboard support
- 53 Popover
- 53.1 Accessibility attributes
- 53.2 Keyboard support
- 54 ProductTour
- 54.1 Accessibility attributes
- 54.2 Accessible text
- 54.3 Keyboard support
- 55 ProgressBar
- 56 Scrollable
- 56.1 Accessibility attributes
- 56.2 Keyboard support
- 57 SearchField
- 57.1 Accessibility attributes
- 57.2 Accessible text
- 57.3 Keyboard support
- 58 SelectMenu
- 58.1 Accessibility attributes
- 58.2 Keyboard support
- 59 SelectableBox
- 59.1 SelectableBox.Set
- 59.1.1 Accessibility attributes
- 59.2 SelectableBox
- 59.2.1 Accessibility attributes
- 59.2.2 Keyboard support
- 59.1 SelectableBox.Set
- 60 Sheet
- 60.1 Accessibility attributes
- 60.2 Keyboard support
- 61 Skeleton
- 62 Spinner
- 62.1 Accessibility attributes
- 62.2 Accessible text
- 63 Stack
- 64 StandardModal
- 64.1 Accessibility attributes
- 64.2 Keyboard support
- 65 StatefulButton
- 65.1 Accessibility attributes
- 65.2 Keyboard support
- 66 Stepper
- 66.1 Stepper.Header
- 66.1.1 Accessibility attributes
- 66.1 Stepper.Header
- 67 Sticky
- 68 TableFilters
- 69 TableControlBar
- 69.1 Accessibility attributes
- 69.2 Keyboard support
- 70 TableFooter
- 70.1 Accessibility attributes
- 70.2 Keyboard support
- 71 Tabs
- 71.1.1 Accessibility attributes
- 71.2 Tab
- 71.2.1 Accessibility attributes
- 71.2.2 Accessible text
- 71.2.3 Keyboard support
- 71.2.4 Keyboard support with More tab
- 72 Toast
- 72.1 Accessibility attributes
- 72.2 Keyboard support
- 73 Tooltip
- 73.1 Accessibility attributes
- 73.2 Keyboard support
- 74 TransitionReplace
- 75 Truncate
ActionRow
no a11y attributes
Alert
Accessibility attributes
Attribute | Description |
---|---|
| Used to communicate an important and usually time-sensitive message to the user. |
Accessible text
Element | Text |
---|---|
|
|
Alert.Link
Keyboard support
Key | Description |
---|---|
| Moves focus to the next focusable element. |
| Triggers the button |
| Moves focus to the next focusable element. |
AlertModal
Accessibility attributes
Attribute | Description |
---|---|
| Used to mark up an HTML-based application dialog that separates content or UI from the rest of the web application or page. |
| Defines a string value that labels an interactive element. |
| Indicates whether the element is exposed to an accessibility API. |
Keyboard support
Key | Description |
---|---|
| Closes the modal window. |
Annotation
no a11y attributes
Avatar
Accessibility attributes
Attribute | Description |
---|---|
| Used to provide alternative text for an image. |
AvatarButton
Accessibility attributes
Attribute | Description |
---|---|
| Indicates that the element is a button. |
| Used to provide alternative text for an image. |
Keyboard support
Key | Description |
---|---|
| Moves focus to the next focusable element. |
| Moves focus to the next focusable element. |
| Triggers the button action. |
| Triggers the button action. |
Badge
no a11y attributes
Breadcrumbs
Accessibility attributes
Attribute | Description |
---|---|
| Defines a string value that labels an interactive element. |
| Indicates that the element should not be considered part of the available semantics. |
| Used to indicate the current element or page in the navigation context. |
Keyboard support
Key | Description |
---|---|
| Moves focus to the next focusable element. |
| Moves focus to the next focusable element. |
| Triggers the button action. |
Bubble
no a11y attributes
Button
Accessibility attributes
Attribute | Description |
---|---|
| Indicates that the element is a button. |
| Defines a string value that labels an interactive element. |
Keyboard support
Key | Description |
---|---|
| Moves focus to the next focusable element. |
| Moves focus to the next focusable element. |
| Triggers the button action. |
| Triggers the button action. |
ButtonGroup
Accessibility attributes
Attribute | Description |
---|---|
| Used to create a group of elements that are visually and functionally related together. |
| Defines a string value that labels an interactive element. |
| Indicates that a certain element is a toolbar. |
Card
Card.ImageCap
Accessibility attributes
Attribute | Description |
---|---|
| Used to provide alternative text for an image. |
| Is used to tell the browser to download the image immediately, without waiting for the entire page to be fully loaded. |
CardCarusel
Accessible text
Element | Text |
---|---|
|
|
|
|
Clickable card
Keyboard support
Key | Description |
---|---|
| Moves focus to the next focusable element. |
| Moves focus to the next focusable element. |
CardCarousel (Navigation arrows)
Keyboard support
Key | Description |
---|---|
| Moves focus to the next focusable element. |
| Moves focus to the next focusable element. |
| Triggers the button action. |
| Triggers the button action. |
CardCarousel (Cards inside the carousel)
Keyboard support
Key | Description |
---|---|
| Moves focus to the next carousel element. |
| Moves focus to the next carousel element. |
Carousel
Accessibility attributes
Attribute | Description |
---|---|
| Used to indicate that a particular element acts as a button, even if it is not a standard <button> element. |
| Indicates whether the element is exposed to an accessibility API. |
Accessible text
Element | Text |
---|---|
|
|
|
|
Keyboard support
Key | Description |
---|---|
| Moves focus to the next/previous slide. |
| Moves focus to the next/previous slide. |
| Moves focus to the next slide. |
| Moves focus to the previous slide. |
| Moves focus to the carousel navigation arrows. |
| Moves focus from the Next arrow to the Previous or the next focusable element. |
Chip
Accessibility attributes
Attribute | Description |
---|---|
| Used to indicate that a particular element acts as a button, even if it is not a standard <button> element. |
Keyboard support
Key | Description |
---|---|
| Moves focus to the next focusable element. |
ChipCarousel
Accessibility attributes
Attribute | Description |
---|---|
| Used to indicate that a specific element is an area or region of content on a web page that has a specific meaning or functionality. |
| Defines a string value that labels an interactive element. |
| Indicates that the element is a button. |
Accessible text
Element | Text |
---|---|
|
|
|
|
Keyboard support
Key | Description |
---|---|
| Moves focus to the carousel navigation arrows. |
| Scrolls the chip carousel to the next/previous element. |
| Scrolls the chip carousel to the next/previous element. |
| Moves focus from the Next arrow to the Previous or the next focusable element. |
Collapsible
Collapsible.Trigger
Accessibility attributes
Attribute | Description |
---|---|
| Used to indicate that a particular element acts as a button, even if it is not a standard <button> element. |
| Is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden. |
Keyboard support
Key | Description |
---|---|
| Toggles the visibility of the content. |
ColorPicker
Accessibility attributes
Attribute | Description |
---|---|
| Indicates that the element is a button. |
| Defines a string value that labels an interactive element. |
| Used to indicate the current value of an element that has a value and can be interpreted as a numeric. |
| Used to specify the maximum possible value of an element that has a numeric value. |
| Used to specify the minimum possible value of an element that has a numeric value. |
| Used to define an element as a slider. |
| Used to provide a textual description of the current value of an element that has a numeric or similar value. |
Keyboard support
Key | Description |
---|---|
| Toggles the visibility of the palette panel. |
| Move the pointer to the right in the сontrasts palette. |
| Move the pointer to the left in the сontrasts palette. |
| Move the pointer to the top in the сontrasts palette. |
| Move the pointer to the down in the сontrasts palette. |
| Move the pointer to the right in the color palette. |
| Move the pointer to the left in the color palette. |
| Closes the color picker. |
| Moves focus to the next the focusable element in the color picker. |
Container
no a11y attributes
DataViews
no a11y attributes
DataTable
Accessibility attributes
Attribute | Description |
---|---|
| Indicates whether the element is exposed to an accessibility API. |
| Used to mark an element as image. |
| Indicates that the element is a button. |
Accessible text
Element | Text |
---|---|
|
|
|
|
|
|
|
|
Keyboard support
Key | Description |
---|---|
| Moves focus to the next the focusable element. |
| Triggers the checkbox action. |
DataTable.TableControlBar
Accessibility attributes
Attribute | Description |
---|---|
| Used to associate an element with one or more |
| Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set. |
| Is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden. |
| Indicates that the element is a button. |
| Used to define an element as a table. |
| Used to define an element as a row in a table. |
| Used to define an element as a group of rows in a table. |
| Used to define an element as a column heading in a table. |
| Defines the element type as a checkbox. |
| Used to define an element as a cell in a table. |
| Used to provide a hint or additional information about an element. |
Accessible text
Element | Text |
---|---|
|
|
|
|
|
|
Keyboard support
Key | Description |
---|---|
| Moves focus to the next the focusable element. |
| Show dropdown content. |
| Show dropdown content. |
| Hide dropdown content. |
DataTable.TableFooter
Accessibility attributes
Attribute | Description |
---|---|
| Defines a string value that labels an interactive element. |
| Used to determine what types of changes to an element should be taken into account and announced by the screen reader. |
| Used to indicate how changes within an element may affect its textual content. |
| Indicates that the element is a button. |
| Indicates whether the element is exposed to an accessibility API. |
| Used to mark an element as image. |
| Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set. |
| Is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden. |
Accessible text
Element | Text |
---|---|
|
|
|
|
|
|
|
|
Keyboard support
Key | Description |
---|---|
| Moves focus to the next the focusable element. |
| Show dropdown content. |
| Show dropdown content. |
| Hide dropdown content. |
| Triggers the button action. |
| Triggers the button action. |
| Triggers the button action. |
| Triggers the button action. |
Dropdown
DropdownButton
Accessibility attributes
Attribute | Description |
---|---|
| Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set. |
| Is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden. |
| Indicates that the element is a button. |
| Used to associate an element with one or more |
Keyboard support
Key | Description |
---|---|
| Triggers the button action. |
| Triggers the button action. |
Dropdown.Item
Keyboard support
Key | Description |
---|---|
| Moves focus to the previous option, if there is none then visual focus does not change. |
| Moves focus to the next option, if there is none then visual focus does not change. |
| Selects the focused option and closes the popup. |
| Selects the focused option and closes the popup. |
| Moves focus to the next focusable element in the dropdown, if there is none then first focusable element receives the focus. |
| Moves focus to the previous focusable element in the dropdown, if there is none then last focusable element receives the focus. |
| Closes the dropdown, moves focus to the dropdown button. |
Dropdown.Header
Accessibility attributes
Attribute | Description |
---|---|
| Used to indicate that the element is being used as a heading. |
Dropdown.Divider
Accessibility attributes
Attribute | Description |
---|---|
| Used to indicate that the element is being used as a separator. |
Dropzone
Accessibility attributes
Attribute | Description |
---|---|
| Indicates that the element should not be considered part of the available semantics. |
| Used to mark an element as image. |
| Indicates whether the element is exposed to an accessibility API. |
Accessible text
Element | Text |
---|---|
|
|
|
|
|
|
Keyboard support
Key | Description |
---|---|
| Moves focus to the next focusable element. |
| Triggers the upload action. |
| Triggers the upload action. |
Figure
Accessibility attributes
Attribute | Description |
---|---|
| Used to provide alternative text for an image. |
Form.Autosuggest
Accessibility attributes
Attribute | Description |
---|---|
| Is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden. |
| Used to indicate an "owns" relationship between two elements on a web page. |
| Used to create a link between an element and the content that describes it. |
| Used to indicate that an element is being used as a list. |
| Defines a string value that labels an interactive element. |
| Indicates whether the element is exposed to an accessibility API. |
| Used to mark an element as image. |
| The combobox role identifies an element as an input that controls another element |
| Indicates that the element is a button. |
Keyboard support
Key | Description |
---|---|
| Moves focus to the input element. |
| Moves focus to the previous option. |
| Moves focus to the next option. |
| Hides the popup. |
| Selects the highlighted item and closes the popup if popup is visible. |
Form.Checkbox
CheckboxControl
Accessibility attributes
Attribute | Description |
---|---|
| Defines a string value that labels an interactive element. |
Form.Checkbox
Keyboard support
Key | Description |
---|---|
| Toggles the checked state. |
| Moves focus to the checkbox. |
Form.Control
Accessibility attributes
Attribute | Description |
---|---|
| Indicates whether the element is exposed to an accessibility API. |
| Used to mark an element as image. |
| Used to create a link between an element and the content that describes it. |
Keyboard support
Key | Description |
---|---|
| Moves focus to the input element. |
Form.Control.Feedback
Accessibility attributes
Attribute | Description |
---|---|
| Used to mark an element as image. |
| Indicates whether the element is exposed to an accessibility API. |
Form.Group
no a11y attributes
Form.Label
Accessibility attributes
Attribute | Description |
---|---|
| Used in the context of a |
Form.Radio
Accessibility attributes
Attribute | Description |
---|---|
| Used to create a link between an element and the content that describes it. |
Keyboard support
Key | Description |
---|---|
| Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus. |
| Moves focus to the previous radio button, if there is none then last radio button receives the focus. |
| Moves focus to the next radio button, if there is none then first radio button receives the focus. |
| If the focused radio button is unchecked, changes the state to checked. |
Form.RadioSet
Accessibility attributes
Attribute | Description |
---|---|
| Used to indicate that the element is being used as a radio group. |
| Used to create a link between an element and the content that describes it. |
| Used to associate an element with one or more |
Form.Switch
Form.Switch
Accessibility attributes
Attribute | Description |
---|---|
| Used to indicate that the element is being used as a switch. |
SwitchControl
Accessibility attributes
Attribute | Description |
---|---|
| Defines a string value that labels an interactive element. |
Keyboard support
Attribute | Description |
---|---|
| Moves focus to the switch. |
| Toggles the checked state. |
Forms
no a11y attributes
FullscreenModal
Accessibility attributes
Attribute | Description |
---|---|
| Used to mark up an HTML-based application dialog that separates content or UI from the rest of the web application or page. |
| Defines a string value that labels an interactive element. |
Keyboard support
Key | Description |
---|---|
| Moves focus to the next the focusable element within the fullscreen modal. |
| Moves focus to the previous the focusable element within the fullscreen modal. |
| Closes the fullscreen modal. |
| Closes the fullscreen modal. |
| Closes the fullscreen modal. |
Hyperlink
no a11y attributes
Accessible text
Element | Text |
---|---|
Screenreader text (with blank target) |
|
Screenreader text (with icon) |
|
Keyboard support
Key | Description |
---|---|
| Moves focus to the HyperLink. |
| Activates the HyperLink. |
Icon
Accessibility attributes
Attribute | Description |
---|---|
| Used to mark an element as an image. |
| Indicates whether the element is exposed to an accessibility API. |
IconButton
Accessibility attributes
Attribute | Description |
---|---|
| Defines a string value that labels an interactive element. |
| Indicates that the element is a button. |
IconButtonWithTooltip
Keyboard support
Attribute | Description |
---|---|
| Moves focus to the IconButton. |
| Activates the IconButton. |
| Activates the IconButton. |
IconButtonToggle
Accessibility attributes
Attribute | Description |
---|---|
| Used to indicate selection state. |
Keyboard support
Key | Description |
---|---|
| Activates the IconButtonToggle. |
| Activates the IconButtonToggle. |
Image
Accessibility attributes
Attribute | Description |
---|---|
| Used to provide alternative text for an image. |
InputGroup
no a11y attributes
Layout
no a11y attributes
MailtoLink
no a11y attributes
Accessible text
Element | Text |
---|---|
|
|
Icon screenreader text |
|
Keyboard support
Key | Description |
---|---|
| Moves focus to the MailtoLink. |
| Activates the MailtoLink. |
MarketingModal
Accessibility attributes
Attribute | Description |
---|---|
| Used to create a link between an element and the content that describes it. |
| Defines a string value that labels an interactive element. |
Keyboard support
Key | Description |
---|---|
| Moves focus to the next the focusable element within the MarketingModal. |
| Moves focus to the previous the focusable element within the MarketingModal. |
| Closes the MarketingModal. |
| Closes the MarketingModal. |
| Closes the MarketingModal. |
Menu
no a11y attributes
Keyboard support
Key | Description |
---|---|
| Moves focus to the previous MenuItem. |
| Moves focus to the next MenuItem. |
| Triggers the MenuItem action. |
| Triggers the MenuItem action. |
| Moves focus to the next focusable element in the Menu. |
| Moves focus to the previous focusable element in the Menu. |
ModalDialog
Accessibility attributes
Attribute | Description |
---|---|
| Used to create a link between an element and the content that describes it. |
| Defines a string value that labels an interactive element. |
| Indicates that the element is a button. |
| Used to mark an element as an image. |
| Indicates whether the element is exposed to an accessibility API. |
Keyboard support
Key | Description |
---|---|
| Moves focus to the next the focusable element within the ModalDialog. |
| Moves focus to the previous the focusable element within the ModalDialog. |
| Closes the ModalDialog. |
| Closes the ModalDialog. |
| Closes the ModalDialog. |
ModalLayer
Accessibility attributes
Attribute | Description |
---|---|
| Used to create a link between an element and the content that describes it. |
| Defines a string value that labels an interactive element. |
Accessible text
Element | Text |
---|---|
|
|
Keyboard support
Key | Description |
---|---|
| Moves focus to the next the focusable element within the ModalLayer. |
| Moves focus to the previous the focusable element within the ModalLayer. |
| Closes the ModalLayer. |
| Closes the ModalLayer. |
| Closes the ModalLayer. |
| Scroll up ModalLayer content. |
| Scroll down ModalLayer content. |
ModalPopup
Keyboard support
Key | Description |
---|---|
| Moves focus to the next the focusable element within the ModalPopup. |
| Moves focus to the previous the focusable element within the ModalPopup. |
| Closes the ModalPopup. |
| Closes the ModalPopup. |
| Closes the ModalPopup. |
Nav
Nav.Link
Accessibility attributes
Attribute | Description |
---|---|
| Used to indicate that a particular element acts as a button, even if it is not a standard <button> element. |
| Used to indicate whether an element on a web page can be activated or modified by the user using input tools. |
NavDropdown
Accessibility attributes
Attribute | Description |
---|---|
| Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set. |
| Is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden. |
Keyboard support
Key | Description |
---|---|
| Moves focus to the previous NavDropdown.Item, and causes onSelected. |
| Moves focus to the next NavDropdown.Item, and causes onSelected. |
| Calls onSelected and closes the NavDropdown. |
| Calls onSelected and closes the NavDropdown. |
| Moves focus to the next focusable element in the NavDropdown. |
| Moves focus to the previous focusable element in the NavDropdown. |
| Closes the NavDropdown. |
NavDropdown.Item
Accessibility attributes
Attribute | Description |
---|---|
| Used to indicate that a particular element acts as a button, even if it is not a standard <button> element. |
Keyboard support
Key | Description |
---|---|
| Focuses the selected element and calls onSelected. |
| Focuses the selected element and calls onSelected. |
| Calls onSelected and remove focus from elements. |
| Calls onSelected. |
| Moves focus to the next focusable element in the Nav. |
| Moves focus to the previous focusable element in the Nav. |
NavDropdown.Divider
Accessibility attributes
Attribute | Description |
---|---|
| Used to refer to an element that serves as a separator between other elements. |
Navbar
Accessibility attributes
Attribute | Description |
---|---|
| Used to indicate that an element is a navigation menu or navigation bar. |
NavDropdown
Accessibility attributes
Attribute | Description |
---|---|
| Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set. |
| Is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden. |
| Used to indicate that a particular element acts as a button, even if it is not a standard <button> element. |
| Used to associate an element with one or more |
Keyboard support
Key | Description |
---|---|
| Moves focus to the previous NavDropdown.Item, and causes onSelected. |
| Moves focus to the next NavDropdown.Item, and causes onSelected. |
| Calls onSelected and closes the NavDropdown. |
| Calls onSelected and closes the NavDropdown. |
| Moves focus to the next focusable element in the NavDropdown. |
| Moves focus to the previous focusable element in the NavDropdown. |
| Closes the NavDropdown. |
NavDropdown.Item
Keyboard support
Key | Description |
---|---|
| Focuses the selected element and calls onSelected. |
| Focuses the selected element and calls onSelected. |
| Calls onSelected and remove focus from elements. |
| Calls onSelected. |
| Moves focus to the next focusable element in the Navbar. |
| Moves focus to the previous focusable element in the Navbar. |
OverflowScroll
Accessibility attributes
Attribute | Description |
---|---|
| Used to refer to an area or section of a web page with specific content or functionality. |
| Defines a string value that labels an interactive element. |
Keyboard support
Key | Description |
---|---|
| Moves focus to the previous/next slide element. |
| Moves focus to the previous/next slide element. |
| If the scroll area is focused with Moves focus to the next slide element. |
| If the scroll area is focused with Moves focus to the previous slide element. |
Overlays
no a11y attributes
PageBanner
Accessibility attributes
Attribute | Description |
---|---|
| Used to communicate an important and usually time-sensitive message to the user. |
| Used to define the mode in which the element will be updated for users using responsive technologies. |
| Used to indicate how changes within an element may affect its textual content. |
| Defines a string value that labels an interactive element. |
| Indicates that the element is a button. |
Keyboard support
Key | Description |
---|---|
| Hide PaheBanner. |
| Hide PaheBanner. |
Pagination
Accessibility attributes
Attribute | Description |
---|---|
| Used to define the mode in which the element will be updated for users using responsive technologies. |
| Used to indicate which changes to the element's content should be reported to assistive technologies. |
| Used to indicate how changes within an element may affect its textual content. |
| Defines a string value that labels an interactive element. |
| Indicates that the element is a button. |
| Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set. |
| Is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden. |
Accessible text
Element | Text |
---|---|
|
|
|
|
|
|
|
|
|
|
Keyboard support
Key | Description |
---|---|
| Moves focus through the pagination elements. |
| Moves focus through the pagination elements. |
| Executes the paginator element action. |
| Executes the paginator element action. |
| Open/close a dropdown with pagination elements. |
| Open/close a dropdown with pagination elements. |
| Moves focus to the previous pagination element. |
| Moves focus to the next pagination element. |
Popover
Accessibility attributes
Attribute | Description |
---|---|
| Used to designate an element intended to display a tooltip. |
Keyboard support
Key | Description |
---|---|
| Closes the popup and moves focus to the trigger. |
| Closes the popup and moves focus to the trigger. |
ProductTour
Accessibility attributes
Attribute | Description |
---|---|
| Used to associate an element with one or more |
| Used to create a link between an element and the content that describes it. |
| Indicates that the element is a button. |
Accessible text
Element | Text |
---|---|
Checkpoint screenreader header |
|
Keyboard support
Key | Description |
---|---|
| Moves focus to the next focusable element. |
| Moves focus to the previous focusable element. |
| Activates the button action and move progress to the next checkpoint. |
| Activates the button action and remove checkpoints progress. |
| Activates the button action and move progress to the next checkpoint. |
| Activates the button action and remove checkpoints progress. |
| Closes the last checkpoint. |
| Closes the last checkpoint. |
| Closes checkpoint. |
ProgressBar
Accessibility attributes
Attribute | Description |
---|---|
| Used to designate an interface element that is an indicator of the progress or progress of a task. |
| Used to specify the minimum possible value of an element that has a numeric value. |
| Used to specify the maximum possible value of an element that has a numeric value. |
Scrollable
Accessibility attributes
Attribute | Description |
---|---|
| Used to indicate that an interface element is a scrollbar. |
| Used to specify the minimum possible value of an element that has a numeric value. |
| Used to specify the maximum possible value of an element that has a numeric value. |
Keyboard support
Key | Description |
---|---|
| If the scroll area in focus scrolls up the visibility area of the elements. |
| If the scroll area in focus scrolls down the visibility area of the elements. |
SearchField
Accessibility attributes
Attribute | Description |
---|---|
| Is used to designate an element representing a search form. |
| Used to denote an interface element that is a text field into which users can enter queries to search for information. |
| Used to indicate that this element represents a button that is used to submit form data to the server. |
| Is used to indicate that this element represents a button that is used to reset or clear all values in the form to their initial values. |
Accessible text
Element | Text |
---|---|
Submit button |
|
Reset button |
|
Keyboard support
Key | Description |
---|---|
| Moves focus to the next focusable element. |
| Moves focus to the previous focusable element. |
| Activates the button action. |
| Activates the button action. |
SelectMenu
Accessibility attributes
Attribute | Description |
---|---|
| Indicates that the element is a button. |
| Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set. |
| Is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden. |
| A link widget provides an interactive reference to a resource. |
Keyboard support
Key | Description |
---|---|
| Opens select menu. |
| Opens select menu. |
| Moves focus to the previous option. |
| Moves focus to the next option. |
| Selects the focused option and closes the select menu. |
| Selects the focused option and closes the select menu. |
| Moves focus to the next focusable element in the select menu. |
| Moves focus to the previous focusable element in the select menu. |
| Closes the select menu, moves focus to the select menu button. |
SelectableBox
SelectableBox.Set
Accessibility attributes
Attribute | Description |
---|---|
| Defines a string value that labels an interactive element. |
| Used to create a group of elements that are visually and functionally related together. |
SelectableBox
Accessibility attributes
Attribute | Description |
---|---|
| Used to indicate that a particular element acts as a button, even if it is not a standard <button> element. |
| Defines a string value that labels an interactive element. |
Keyboard support
Key | Description |
---|---|
| Moves focus to the next focusable element. |
| Moves focus to the previous focusable element. |
| Trigger SelectableBox action. |
| Trigger SelectableBox action. |
Sheet
Accessibility attributes
Attribute | Description |
---|---|
| Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set. |
| Is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden. |
| Indicates that the element is a button. |
| Used to indicate that a particular element acts as a button, even if it is not a standard <button> element. |
| Used to define the mode in which the element will be updated for users using responsive technologies. |
| Used to indicate how changes within an element may affect its textual content. |
| Used to communicate an important and usually time-sensitive message to the user. |
Keyboard support
Key | Description |
---|---|
| Triggers the button action. |
| Triggers the button action. |
| Selects the focused option and closes the sheet. |
| Selects the focused option and closes the sheet. |
| Closes the sheet, moves focus to the sheet button. |
Skeleton
Accessibility attributes
Attribute | Description |
---|---|
| Used to indicate that an interface element or area is busy performing an operation or process and the user should wait for that operation to complete. |
| Used to define the mode in which the element will be updated for users using responsive technologies. |
Spinner
Accessibility attributes
Attribute | Description |
---|---|
| Used to indicate an area or element intended to display status information or notifications to the user. |
Accessible text
Element | Text |
---|---|
Screenreader text |
|
Stack
no a11y attributes
StandardModal
Accessibility attributes
Attribute | Description |
---|---|
| Used to create a link between an element and the content that describes it. |
| Defines a string value that labels an interactive element. |
| Indicates that the element is a button. |
Keyboard support
Key | Description |
---|---|
| Moves focus to the next the focusable element within the StandartModal. |
| Moves focus to the previous the focusable element within the StandartModal. |
| Closes the StandartModal. |
| Closes the StandartModal. |
| Closes the StandartModal. |
StatefulButton
Accessibility attributes
Attribute | Description |
---|---|
| Used to determine the importance level of notifications or content. |
| Used to indicate whether an element on a web page can be activated or modified by the user using input tools. |
| Indicates that the element is a button. |
Keyboard support
Key | Description |
---|---|
| Moves focus to the next focusable element. |
| Moves focus to the next focusable element. |
| Triggers the button action. |
| Triggers the button action. |
Stepper
Stepper.Header
Accessibility attributes
Attribute | Description |
---|---|
| Indicates whether the element is exposed to an accessibility API. |
Sticky
no a11y attributes
TableFilters
Accessibility attributes
Attribute | Description |
---|---|
| Used to associate an element with one or more |
| Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set. |
| Is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden. |
| Used to define an element as a table. |
| Used to define an element as a row in a table. |
| Used to define an element as a column heading in a table. |
| Used to define an element as a cell in a table. |
| Used to define an element as a cell in a table. |
TableControlBar
Accessibility attributes
Attribute | Description |
---|---|
| Used to associate an element with one or more |
| Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set. |
| Is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden. |
| Indicates that the element is a button. |
Keyboard support
Key | Description |
---|---|
| Moves focus to the next the focusable element. |
| Show dropdown content. |
| Show dropdown content. |
| Hide dropdown content. |
TableFooter
Accessibility attributes
Attribute | Description |
---|---|
| Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set. |
| Is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden. |
| Indicates that the element is a button. |
| Defines a string value that labels an interactive element. |
| Used to define the mode in which the element will be updated for users using responsive technologies. |
| Used to indicate how changes within an element may affect its textual content. |
| Used to indicate which changes to the element's content should be reported to assistive technologies. |
Keyboard support
Key | Description |
---|---|
| Moves focus to the next the focusable element. |
| Show dropdown content. |
| Show dropdown content. |
| Hide dropdown content. |
| Triggers the button action. |
| Triggers the button action. |
| Triggers the button action. |
| Triggers the button action. |
Tabs
Accessibility attributes
Attribute | Description |
---|---|
| Used to define a list of tabs. |
Tab
Accessibility attributes
Attribute | Description |
---|---|
| Applied to a UI element that is a tab on a web page. |
| Points to the element that is controlled by or associated with the current element. |
| Used to indicate selection state. |
| Used to associate an element with one or more |
| Applied to a UI element to designate it as a container for containing information associated with a tab on a web page. |
| Indicates whether the element is exposed to an accessibility API. |
| Used to define the mode in which the element will be updated for users using responsive technologies. |
| Used to indicate an area or element intended to display status information or notifications to the user. |
Accessible text
Element | Text |
---|---|
Notification screenreader text |
|
Keyboard support
Key | Description |
---|---|
| Moves focus through the next title. |
| Moves focus through the previous title. |
| Activates the focused tab title. |
| Activates the focused tab title. |
| Moves focus to the previous title. |
| Moves focus to the next title. |
| Moves focus to the next title. |
| Moves focus to the previous title. |
Keyboard support with More tab
Key | Description |
---|---|
| Moves focus to the More button and the next drop-down menu items. |
| Moves focus to the More button and previous drop-down menu items. |
| Opens tabs dropdown menu. |
| Opens tabs dropdown menu. |
| Moves focus to the next dropdown option. |
| Moves focus to the previous dropdown option. |
| Closes dropdown menu. |
Toast
Accessibility attributes
Attribute | Description |
---|---|
| Used to communicate an important and usually time-sensitive message to the user. |
| Used to determine the importance level of notifications or content. |
| Used to indicate how changes within an element may affect its textual content. |
| Defines a string value that labels an interactive element. |
| Indicates that the element is a button. |
| Indicates whether the element is exposed to an accessibility API. |
Keyboard support
Key | Description |
---|---|
| Closes the message. |
Tooltip
Accessibility attributes
Attribute | Description |
---|---|
| Used to create a link between an element and the content that describes it. |
| Used to designate an element intended to display a tooltip. |
Keyboard support
Key | Description |
---|---|
| Moves focus to the next focusable item and shows tooltip. |
| Moves focus to the previous focusable item and shows tooltip. |
TransitionReplace
no a11y attributes
Truncate
Accessibility attributes
Attribute | Description |
---|---|
| Defines a string value that labels an interactive element. |
| Used to provide a hint or additional information about an element. |