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:

  • 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.

ActionRow

no a11y attributes

Alert

Accessibility attributes

Attribute

Description

Attribute

Description

role="alert" editable

Used to communicate an important and usually time-sensitive message to the user.

Accessible text

Element

Text

Element

Text

Close button

Dismiss

Alert.Link

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next focusable element.

Enter

Triggers the button <Alert.Link /> action.

Shift+Tab

Moves focus to the next focusable element.

AlertModal

Accessibility attributes

Attribute

Description

Attribute

Description

role="dialog" editable

Used to mark up an HTML-based application dialog that separates content or UI from the rest of the web application or page.

aria-label editable

Defines a string value that labels an interactive element.

aria-hidden

Indicates whether the element is exposed to an accessibility API.

Keyboard support

Key

Description

Key

Description

Escape

Closes the modal window.

Annotation

no a11y attributes

Avatar

Accessibility attributes

Attribute

Description

Attribute

Description

alt editable

Used to provide alternative text for an image.

AvatarButton

Accessibility attributes

Attribute

Description

Attribute

Description

type="button" editable

Indicates that the element is a button.

alt (Icon)

Used to provide alternative text for an image.

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next focusable element.

Shift+Tab

Moves focus to the next focusable element.

Space

Triggers the button action.

Enter

Triggers the button action.

Badge

no a11y attributes

Breadcrumbs

Accessibility attributes

Attribute

Description

Attribute

Description

aria-label editable

Defines a string value that labels an interactive element.

role="presentation"

Indicates that the element should not be considered part of the available semantics.

aria-current

Used to indicate the current element or page in the navigation context.

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next focusable element.

Shift+Tab

Moves focus to the next focusable element.

Enter

Triggers the button action.

Bubble

no a11y attributes

Button

Accessibility attributes

Attribute

Description

Attribute

Description

type="button" editable

Indicates that the element is a button.

aria-label editable

Defines a string value that labels an interactive element.

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next focusable element.

Shift+Tab

Moves focus to the next focusable element.

Enter

Triggers the button action.

Space

Triggers the button action.

ButtonGroup

Accessibility attributes

Attribute

Description

Attribute

Description

role="group" editable

Used to create a group of elements that are visually and functionally related together.

aria-label editable

Defines a string value that labels an interactive element.

role="toolbar" editable

Indicates that a certain element is a toolbar.

Card

Card.ImageCap

Accessibility attributes

Attribute

Description

Attribute

Description

alt editable

Used to provide alternative text for an image.

loading="eager"

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

Element

Text

Next button

Scroll to next

Previous button

Scroll to previous

Clickable card

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next focusable element.

Shift+Tab

Moves focus to the next focusable element.

CardCarousel (Navigation arrows)

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next focusable element.

Shift+Tab

Moves focus to the next focusable element.

Enter

Triggers the button action.

Space

Triggers the button action.

CardCarousel (Cards inside the carousel)

Keyboard support

Key

Description

Key

Description

Tab+RightArrow

Moves focus to the next carousel element.

Tab+LeftArrow

Moves focus to the next carousel element.

Carousel

Accessibility attributes

Attribute

Description

Attribute

Description

role="button" (Navigation buttons)

Used to indicate that a particular element acts as a button, even if it is not a standard <button> element.

aria-hidden (Navigation buttons)

Indicates whether the element is exposed to an accessibility API.

Accessible text

Element

Text

Element

Text

Next button

Next

Previous button

Previous

Keyboard support

Key

Description

Key

Description

Enter (Previous/Next arrow)

Moves focus to the next/previous slide.

Space (Previous/Next arrow)

Moves focus to the next/previous slide.

RightArrow

Moves focus to the next slide.

LeftArrow

Moves focus to the previous slide.

Tab

Moves focus to the carousel navigation arrows.

Shift+Tab

Moves focus from the Next arrow to the Previous or the next focusable element.

Chip

Accessibility attributes

Attribute

Description

Attribute

Description

role="button" (Action button)

Used to indicate that a particular element acts as a button, even if it is not a standard <button> element.

Keyboard support

Key

Description

Key

Description

Tab (Close button)

Moves focus to the next focusable element.

ChipCarousel

Accessibility attributes

Attribute

Description

Attribute

Description

role="region"

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.

aria-label editable

Defines a string value that labels an interactive element.

type="button" (Navigation buttons)

Indicates that the element is a button.

Accessible text

Element

Text

Element

Text

Next button

Scroll to next

Previous button

Scroll to previous

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the carousel navigation arrows.

Enter (Previous/Next arrow)

Scrolls the chip carousel to the next/previous element.

Space (Previous/Next arrow)

Scrolls the chip carousel to the next/previous element.

Shift+Tab

Moves focus from the Next arrow to the Previous or the next focusable element.

Collapsible

Collapsible.Trigger

Accessibility attributes

Attribute

Description

Attribute

Description

role="button"

Used to indicate that a particular element acts as a button, even if it is not a standard <button> element.

aria-expanded

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

Key

Description

Enter

Toggles the visibility of the content.

ColorPicker

Accessibility attributes

Attribute

Description

Attribute

Description

type="button"

Indicates that the element is a button.

aria-label

Defines a string value that labels an interactive element.

aria-valuenow

Used to indicate the current value of an element that has a value and can be interpreted as a numeric.

aria-valuemax

Used to specify the maximum possible value of an element that has a numeric value.

aria-valuemin

Used to specify the minimum possible value of an element that has a numeric value.

role="slider"

Used to define an element as a slider.

aria-valuetext

Used to provide a textual description of the current value of an element that has a numeric or similar value.

Keyboard support

Key

Description

Key

Description

Enter

Toggles the visibility of the palette panel.

RightArrow (Contrast pointer)

Move the pointer to the right in the сontrasts palette.

LeftArrow (Contrast pointer)

Move the pointer to the left in the сontrasts palette.

UpArrow (Contrast pointer)

Move the pointer to the top in the сontrasts palette.

DownArrow (Contrast pointer)

Move the pointer to the down in the сontrasts palette.

RightArrow (Pallete pointer)

Move the pointer to the right in the color palette.

LeftArrow (Pallete pointer)

Move the pointer to the left in the color palette.

Escape

Closes the color picker.

Tab

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

Attribute

Description

aria-hidden (Icon button)

Indicates whether the element is exposed to an accessibility API.

role="img" (Icon button)

Used to mark an element as image.

type="button" (Icon button)

Indicates that the element is a button.

Accessible text

Element

Text

Element

Text

View button

Card

Filters sidebar title

Filters

Filters sidebar input placeholder

Search name

Filters sidebar label

Search famous for

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next the focusable element.

Space

Triggers the checkbox action.

DataTable.TableControlBar

Accessibility attributes

Attribute

Description

Attribute

Description

aria-labelledby

Used to associate an element with one or more <id> elements containing a textual description or label for that element.

aria-haspopup

Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.

aria-expanded

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.

type="button"

Indicates that the element is a button.

role="table"

Used to define an element as a table.

role="row"

Used to define an element as a row in a table.

role="rowgroup"

Used to define an element as a group of rows in a table.

role="columnheader"

Used to define an element as a column heading in a table.

type="checkbox"

Defines the element type as a checkbox.

role="cell"

Used to define an element as a cell in a table.

title

Used to provide a hint or additional information about an element.

Accessible text

Element

Text

Element

Text

Filters button

Filters

Search input

Search title

Showing status

Showing [number] of [number].

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next the focusable element.

Space (Filter dropdown)

Show dropdown content.

Enter (Filter dropdown)

Show dropdown content.

Escape (Filter dropdown)

Hide dropdown content.

DataTable.TableFooter

Accessibility attributes

Attribute

Description

Attribute

Description

aria-label

Defines a string value that labels an interactive element.

aria-relevant

Used to determine what types of changes to an element should be taken into account and announced by the screen reader.

aria-atomic

Used to indicate how changes within an element may affect its textual content.

type="button"

Indicates that the element is a button.

aria-hidden

Indicates whether the element is exposed to an accessibility API.

role="img"

Used to mark an element as image.

aria-haspopup

Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.

aria-expanded

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

Element

Text

Showing status

Showing [number] of [number].

Showing dropdown (Pagination)

[number] of [number]

Pagination next button

Next, Page [number]

Pagination previous button

Previous

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next the focusable element.

Space (Pagination dropdown)

Show dropdown content.

Enter (Pagination dropdown)

Show dropdown content.

Escape (Pagination dropdown)

Hide dropdown content.

Enter (RightArrow)

Triggers the button action.

Enter (LeftArrow)

Triggers the button action.

Space (RightArrow)

Triggers the button action.

Space (LeftArrow)

Triggers the button action.

Dropdown

DropdownButton

Accessibility attributes

Attribute

Description

Attribute

Description

aria-haspopup

Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.

aria-expanded

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.

type="button"

Indicates that the element is a button.

aria-labelledby

Used to associate an element with one or more <id> elements containing a textual description or label for that element.

Keyboard support

Key

Description

Key

Description

Enter

Triggers the button action.

Space

Triggers the button action.

Dropdown.Item

Keyboard support

Key

Description

Key

Description

UpArrow

Moves focus to the previous option, if there is none then visual focus does not change.

DownArrow

Moves focus to the next option, if there is none then visual focus does not change.

Enter

Selects the focused option and closes the popup.

Space

Selects the focused option and closes the popup.

Tab

Moves focus to the next focusable element in the dropdown, if there is none then first focusable element receives the focus.

Shift+Tab

Moves focus to the previous focusable element in the dropdown, if there is none then last focusable element receives the focus.

Escape

Closes the dropdown, moves focus to the dropdown button.

Dropdown.Header

Accessibility attributes

Attribute

Description

Attribute

Description

role="heading" editable

Used to indicate that the element is being used as a heading.

Dropdown.Divider

Accessibility attributes

Attribute

Description

Attribute

Description

role="separator" editable

Used to indicate that the element is being used as a separator.

Dropzone

Accessibility attributes

Attribute

Description

Attribute

Description

role="presentation" editable

Indicates that the element should not be considered part of the available semantics.

role="img"

Used to mark an element as image.

aria-hidden

Indicates whether the element is exposed to an accessibility API.

Accessible text

Element

Text

Element

Text

Dropzone upload description

Drag and drop your file here or click to upload.

Dropzone upload restriction message

Upload PNG files (Between 1MB and 20MB)

Dropzone upload restriction message (With file preview)

Upload image files

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next focusable element.

Enter

Triggers the upload action.

Space

Triggers the upload action.

Figure

Accessibility attributes

Attribute

Description

Attribute

Description

alt editable

Used to provide alternative text for an image.

Form.Autosuggest

Accessibility attributes

Attribute

Description

Attribute

Description

aria-expanded editable

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.

aria-owns editable

Used to indicate an "owns" relationship between two elements on a web page.

aria-describedby editable

Used to create a link between an element and the content that describes it.

role="list"

Used to indicate that an element is being used as a list.

aria-label

Defines a string value that labels an interactive element.

aria-hidden

Indicates whether the element is exposed to an accessibility API.

role="img"

Used to mark an element as image.

role="combobox"

The combobox role identifies an element as an input that controls another element

type="button" (Icon button)

Indicates that the element is a button.

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the input element.

UpArrow

Moves focus to the previous option.

DownArrow

Moves focus to the next option.

Escape

Hides the popup.

Enter

Selects the highlighted item and closes the popup if popup is visible.

Form.Checkbox

CheckboxControl

Accessibility attributes

Attribute

Description

Attribute

Description

aria-label editable

Defines a string value that labels an interactive element.

Form.Checkbox

Keyboard support

Key

Description

Key

Description

Space

Toggles the checked state.

Tab

Moves focus to the checkbox.

Form.Control

Accessibility attributes

Attribute

Description

Attribute

Description

aria-hidden (Icon)

Indicates whether the element is exposed to an accessibility API.

role="img" (Icon)

Used to mark an element as image.

aria-describedby (If Form.Control.Feedback is present)

Used to create a link between an element and the content that describes it.

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the input element.

Form.Control.Feedback

Accessibility attributes

Attribute

Description

Attribute

Description

role="img"

Used to mark an element as image.

aria-hidden

Indicates whether the element is exposed to an accessibility API.

Form.Group

no a11y attributes

Form.Label

Accessibility attributes

Attribute

Description

Attribute

Description

for

Used in the context of a <label> element to establish an association between a label and a control.

Form.Radio

Accessibility attributes

Attribute

Description

Attribute

Description

aria-describedby

Used to create a link between an element and the content that describes it.

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus.

LeftArrow, UpArrow

Moves focus to the previous radio button, if there is none then last radio button receives the focus.

RightArrow, DownArrow

Moves focus to the next radio button, if there is none then first radio button receives the focus.

Space

If the focused radio button is unchecked, changes the state to checked.

Form.RadioSet

Accessibility attributes

Attribute

Description

Attribute

Description

role="radiogroup" editable

Used to indicate that the element is being used as a radio group.

aria-describedby editable

Used to create a link between an element and the content that describes it.

aria-labelledby editable

Used to associate an element with one or more <id> elements containing a textual description or label for that element.

Form.Switch

Form.Switch

Accessibility attributes

Attribute

Description

Attribute

Description

role="switch"

Used to indicate that the element is being used as a switch.

SwitchControl

Accessibility attributes

Attribute

Description

Attribute

Description

aria-label editable

Defines a string value that labels an interactive element.

Keyboard support

Attribute

Description

Attribute

Description

Tab

Moves focus to the switch.

Space

Toggles the checked state.

Forms

no a11y attributes

FullscreenModal

Accessibility attributes

Attribute

Description

Attribute

Description

role="dialog"

Used to mark up an HTML-based application dialog that separates content or UI from the rest of the web application or page.

aria-label editable

Defines a string value that labels an interactive element.

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next the focusable element within the fullscreen modal.

Shift+Tab

Moves focus to the previous the focusable element within the fullscreen modal.

Escape

Closes the fullscreen modal.

Enter (Close button)

Closes the fullscreen modal.

Space (Close button)

Closes the fullscreen modal.

Hyperlink

no a11y attributes

Accessible text

Element

Text

Element

Text

Screenreader text (with blank target)

in a new tab

Screenreader text (with icon)

Visit edX Home

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the HyperLink.

Enter

Activates the HyperLink.

Icon

Accessibility attributes

Attribute

Description

Attribute

Description

role="img"

Used to mark an element as an image.

aria-hidden

Indicates whether the element is exposed to an accessibility API.

IconButton

Accessibility attributes

Attribute

Description

Attribute

Description

aria-label editable

Defines a string value that labels an interactive element.

type="button" editable

Indicates that the element is a button.

IconButtonWithTooltip

Keyboard support

Attribute

Description

Attribute

Description

Tab

Moves focus to the IconButton.

Enter

Activates the IconButton.

Space

Activates the IconButton.

IconButtonToggle

Accessibility attributes

Attribute

Description

Attribute

Description

aria-selected

Used to indicate selection state.

Keyboard support

Key

Description

Key

Description

Enter

Activates the IconButtonToggle.

Space

Activates the IconButtonToggle.

Image

Accessibility attributes

Attribute

Description

Attribute

Description

alt editable

Used to provide alternative text for an image.

InputGroup

no a11y attributes

Layout

no a11y attributes

MailtoLink

no a11y attributes

Accessible text

Element

Text

Element

Text

title

Opens in a new tab

Icon screenreader text

Dismiss

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the MailtoLink.

Enter

Activates the MailtoLink.

MarketingModal

Accessibility attributes

Attribute

Description

Attribute

Description

role="dialog"

Used to create a link between an element and the content that describes it.

aria-label editable

Defines a string value that labels an interactive element.

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next the focusable element within the MarketingModal.

Shift+Tab

Moves focus to the previous the focusable element within the MarketingModal.

Escape

Closes the MarketingModal.

Enter (Close button)

Closes the MarketingModal.

Space (Close button)

Closes the MarketingModal.

Menu

no a11y attributes

Keyboard support

Key

Description

Key

Description

UpArrow

Moves focus to the previous MenuItem.

DownArrow

Moves focus to the next MenuItem.

Enter

Triggers the MenuItem action.

Space

Triggers the MenuItem action.

Tab

Moves focus to the next focusable element in the Menu.

Shift+Tab

Moves focus to the previous focusable element in the Menu.

ModalDialog

Accessibility attributes

Attribute

Description

Attribute

Description

role="dialog"

Used to create a link between an element and the content that describes it.

aria-label editable

Defines a string value that labels an interactive element.

type="button" (Close button)

Indicates that the element is a button.

role="img" (Close button)

Used to mark an element as an image.

aria-hidden

Indicates whether the element is exposed to an accessibility API.

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next the focusable element within the ModalDialog.

Shift+Tab

Moves focus to the previous the focusable element within the ModalDialog.

Escape

Closes the ModalDialog.

Enter (Close button)

Closes the ModalDialog.

Space (Close button)

Closes the ModalDialog.

ModalLayer

Accessibility attributes

Attribute

Description

Attribute

Description

role="dialog"

Used to create a link between an element and the content that describes it.

aria-label editable

Defines a string value that labels an interactive element.

Accessible text

Element

Text

Element

Text

title

My dialog

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next the focusable element within the ModalLayer.

Shift+Tab

Moves focus to the previous the focusable element within the ModalLayer.

Escape

Closes the ModalLayer.

Enter (Close button)

Closes the ModalLayer.

Space (Close button)

Closes the ModalLayer.

UpArrow (Not small variant)

Scroll up ModalLayer content.

DownArrow (Not small variant)

Scroll down ModalLayer content.

ModalPopup

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next the focusable element within the ModalPopup.

Shift+Tab

Moves focus to the previous the focusable element within the ModalPopup.

Escape

Closes the ModalPopup.

Enter (Close button)

Closes the ModalPopup.

Space (Close button)

Closes the ModalPopup.

Nav

Nav.Link

Accessibility attributes

Attribute

Description

Attribute

Description

role="button"

Used to indicate that a particular element acts as a button, even if it is not a standard <button> element.

aria-disabled

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

Attribute

Description

aria-haspopup

Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.

aria-expanded

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

Key

Description

UpArrow

Moves focus to the previous NavDropdown.Item, and causes onSelected.

DownArrow

Moves focus to the next NavDropdown.Item, and causes onSelected.

Enter

Calls onSelected and closes the NavDropdown.

Space

Calls onSelected and closes the NavDropdown.

Tab

Moves focus to the next focusable element in the NavDropdown.

Shift+Tab

Moves focus to the previous focusable element in the NavDropdown.

Escape

Closes the NavDropdown.

NavDropdown.Item

Accessibility attributes

Attribute

Description

Attribute

Description

role="button"

Used to indicate that a particular element acts as a button, even if it is not a standard <button> element.

Keyboard support

Key

Description

Key

Description

UpArrow

Focuses the selected element and calls onSelected.

DownArrow

Focuses the selected element and calls onSelected.

Enter

Calls onSelected and remove focus from elements.

Space

Calls onSelected.

Tab

Moves focus to the next focusable element in the Nav.

Shift+Tab

Moves focus to the previous focusable element in the Nav.

NavDropdown.Divider

Accessibility attributes

Attribute

Description

Attribute

Description

role="separator" editable

Used to refer to an element that serves as a separator between other elements.

Navbar

Accessibility attributes

Attribute

Description

Attribute

Description

role="navigation" editable

Used to indicate that an element is a navigation menu or navigation bar.

NavDropdown

Accessibility attributes

Attribute

Description

Attribute

Description

aria-haspopup

Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.

aria-expanded

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.

role="button"

Used to indicate that a particular element acts as a button, even if it is not a standard <button> element.

aria-labelledby

Used to associate an element with one or more <id> elements containing a textual description or label for that element.

Keyboard support

Key

Description

Key

Description

UpArrow

Moves focus to the previous NavDropdown.Item, and causes onSelected.

DownArrow

Moves focus to the next NavDropdown.Item, and causes onSelected.

Enter

Calls onSelected and closes the NavDropdown.

Space

Calls onSelected and closes the NavDropdown.

Tab

Moves focus to the next focusable element in the NavDropdown.

Shift+Tab

Moves focus to the previous focusable element in the NavDropdown.

Escape

Closes the NavDropdown.

NavDropdown.Item

Keyboard support

Key

Description

Key

Description

UpArrow

Focuses the selected element and calls onSelected.

DownArrow

Focuses the selected element and calls onSelected.

Enter

Calls onSelected and remove focus from elements.

Space

Calls onSelected.

Tab

Moves focus to the next focusable element in the Navbar.

Shift+Tab

Moves focus to the previous focusable element in the Navbar.

OverflowScroll

Accessibility attributes

Attribute

Description

Attribute

Description

role="region"

Used to refer to an area or section of a web page with specific content or functionality.

aria-label editable

Defines a string value that labels an interactive element.

Keyboard support

Key

Description

Key

Description

Enter (Prev/Next button)

Moves focus to the previous/next slide element.

Space (Prev/Next button)

Moves focus to the previous/next slide element.

RightArrow

If the scroll area is focused with Moves focus to the next slide element.

LeftArrow

If the scroll area is focused with Moves focus to the previous slide element.

Overlays

no a11y attributes

PageBanner

Accessibility attributes

Attribute

Description

Attribute

Description

role="alert" editable

Used to communicate an important and usually time-sensitive message to the user.

aria-live="polite" editable

Used to define the mode in which the element will be updated for users using responsive technologies.

aria-atomic editable

Used to indicate how changes within an element may affect its textual content.

aria-label (Button)

Defines a string value that labels an interactive element.

type="button" (Button)

Indicates that the element is a button.

Keyboard support

Key

Description

Key

Description

Enter (Close button)

Hide PaheBanner.

Space (Close button)

Hide PaheBanner.

Pagination

Accessibility attributes

Attribute

Description

Attribute

Description

aria-live="polite"

Used to define the mode in which the element will be updated for users using responsive technologies.

aria-relevant

Used to indicate which changes to the element's content should be reported to assistive technologies.

aria-atomic

Used to indicate how changes within an element may affect its textual content.

aria-label editable

Defines a string value that labels an interactive element.

type="button"

Indicates that the element is a button.

aria-haspopup

Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.

aria-expanded

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

Element

Text

Previous button

Previous

Next button

Next

Page button

Page

currentPage button

Current Page

pageOfCount block

of

Keyboard support

Key

Description

Key

Description

Tab

Moves focus through the pagination elements.

Shift+Tab

Moves focus through the pagination elements.

Enter

Executes the paginator element action.

Space

Executes the paginator element action.

Enter (variant="reduced")

Open/close a dropdown with pagination elements.

Space (variant="reduced")

Open/close a dropdown with pagination elements.

UpArrow (variant="reduced")

Moves focus to the previous pagination element.

DownArrow (variant="reduced")

Moves focus to the next pagination element.

Popover

Accessibility attributes

Attribute

Description

Attribute

Description

role="tooltip" editable

Used to designate an element intended to display a tooltip.

Keyboard support

Key

Description

Key

Description

Enter

Closes the popup and moves focus to the trigger.

Escape

Closes the popup and moves focus to the trigger.

ProductTour

Accessibility attributes

Attribute

Description

Attribute

Description

aria-labelledby

Used to associate an element with one or more <id> elements containing a textual description or label for that element.

role="dialog"

Used to create a link between an element and the content that describes it.

type="button"

Indicates that the element is a button.

Accessible text

Element

Text

Element

Text

Checkpoint screenreader header

Top of step

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next focusable element.

Shift+Tab

Moves focus to the previous focusable element.

Enter (Next button)

Activates the button action and move progress to the next checkpoint.

Enter (Dismiss button)

Activates the button action and remove checkpoints progress.

Space (Next button)

Activates the button action and move progress to the next checkpoint.

Space (Dismiss button)

Activates the button action and remove checkpoints progress.

Enter (Okay button)

Closes the last checkpoint.

Space (Okay button)

Closes the last checkpoint.

Escape

Closes checkpoint.

ProgressBar

Accessibility attributes

Attribute

Description

Attribute

Description

role="progressbar" editable

Used to designate an interface element that is an indicator of the progress or progress of a task.

aria-valuemin

Used to specify the minimum possible value of an element that has a numeric value.

aria-valuemax

Used to specify the maximum possible value of an element that has a numeric value.

Scrollable

Accessibility attributes

Attribute

Description

Attribute

Description

role="scrollbar"

Used to indicate that an interface element is a scrollbar.

aria-valuemin

Used to specify the minimum possible value of an element that has a numeric value.

aria-valuemax

Used to specify the maximum possible value of an element that has a numeric value.

Keyboard support

Key

Description

Key

Description

UpArrow

If the scroll area in focus scrolls up the visibility area of the elements.

DownArrow

If the scroll area in focus scrolls down the visibility area of the elements.

SearchField

Accessibility attributes

Attribute

Description

Attribute

Description

role="search"

Is used to designate an element representing a search form.

role="searchbox"

Used to denote an interface element that is a text field into which users can enter queries to search for information.

type="submit"

Used to indicate that this element represents a button that is used to submit form data to the server.

type="reset"

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

Element

Text

Submit button

submit search

Reset button

clear search

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next focusable element.

Shift+Tab

Moves focus to the previous focusable element.

Enter (Action button)

Activates the button action.

Space (Action button)

Activates the button action.

SelectMenu

Accessibility attributes

Attribute

Description

Attribute

Description

type="button"

Indicates that the element is a button.

aria-haspopup

Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.

aria-expanded

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.

role="link"

A link widget provides an interactive reference to a resource.

Keyboard support

Key

Description

Key

Description

Enter

Opens select menu.

Space

Opens select menu.

UpArrow

Moves focus to the previous option.

DownArrow

Moves focus to the next option.

Enter

Selects the focused option and closes the select menu.

Space

Selects the focused option and closes the select menu.

Tab

Moves focus to the next focusable element in the select menu.

Shift+Tab

Moves focus to the previous focusable element in the select menu.

Escape

Closes the select menu, moves focus to the select menu button.

SelectableBox

SelectableBox.Set

Accessibility attributes

Attribute

Description

Attribute

Description

aria-label editable

Defines a string value that labels an interactive element.

role="group"

Used to create a group of elements that are visually and functionally related together.

SelectableBox

Accessibility attributes

Attribute

Description

Attribute

Description

role="button" editable

Used to indicate that a particular element acts as a button, even if it is not a standard <button> element.

aria-label editable

Defines a string value that labels an interactive element.

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next focusable element.

Shift+Tab

Moves focus to the previous focusable element.

Enter

Trigger SelectableBox action.

Space

Trigger SelectableBox action.

Sheet

Accessibility attributes

Attribute

Description

Attribute

Description

aria-haspopup

Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.

aria-expanded

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.

type="button"

Indicates that the element is a button.

role="button" editable

Used to indicate that a particular element acts as a button, even if it is not a standard <button> element.

aria-live="polite"

Used to define the mode in which the element will be updated for users using responsive technologies.

aria-atomic

Used to indicate how changes within an element may affect its textual content.

role="alert"

Used to communicate an important and usually time-sensitive message to the user.

Keyboard support

Key

Description

Key

Description

Enter

Triggers the button action.

Space

Triggers the button action.

Enter

Selects the focused option and closes the sheet.

Space

Selects the focused option and closes the sheet.

Escape

Closes the sheet, moves focus to the sheet button.

Skeleton

Accessibility attributes

Attribute

Description

Attribute

Description

aria-busy="true"

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.

aria-live="polite"

Used to define the mode in which the element will be updated for users using responsive technologies.

Spinner

Accessibility attributes

Attribute

Description

Attribute

Description

role="status"

Used to indicate an area or element intended to display status information or notifications to the user.

Accessible text

Element

Text

Element

Text

Screenreader text

loading

Stack

no a11y attributes

StandardModal

Accessibility attributes

Attribute

Description

Attribute

Description

role="dialog"

Used to create a link between an element and the content that describes it.

aria-label editable

Defines a string value that labels an interactive element.

type="button" (Close icon)

Indicates that the element is a button.

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next the focusable element within the StandartModal.

Shift+Tab

Moves focus to the previous the focusable element within the StandartModal.

Escape

Closes the StandartModal.

Enter (Close button)

Closes the StandartModal.

Space (Close button)

Closes the StandartModal.

StatefulButton

Accessibility attributes

Attribute

Description

Attribute

Description

aria-live="assertive" editable

Used to determine the importance level of notifications or content.

aria-disabled editable

Used to indicate whether an element on a web page can be activated or modified by the user using input tools.

type="button" editable

Indicates that the element is a button.

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next focusable element.

Shift+Tab

Moves focus to the next focusable element.

Enter

Triggers the button action.

Space

Triggers the button action.

Stepper

Stepper.Header

Accessibility attributes

Attribute

Description

Attribute

Description

aria-hidden

Indicates whether the element is exposed to an accessibility API.

Sticky

no a11y attributes

TableFilters

Accessibility attributes

Attribute

Description

Attribute

Description

aria-labelledby

Used to associate an element with one or more <id> elements containing a textual description or label for that element.

aria-haspopup

Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.

aria-expanded

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.

role="table"

Used to define an element as a table.

role="row"

Used to define an element as a row in a table.

role="columnheader"

Used to define an element as a column heading in a table.

role="rowgroup"

Used to define an element as a cell in a table.

role="cell"

Used to define an element as a cell in a table.

TableControlBar

Accessibility attributes

Attribute

Description

Attribute

Description

aria-labelledby

Used to associate an element with one or more <id> elements containing a textual description or label for that element.

aria-haspopup

Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.

aria-expanded

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.

type="button"

Indicates that the element is a button.

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next the focusable element.

Space (Filter dropdown)

Show dropdown content.

Enter (Filter dropdown)

Show dropdown content.

Escape (Filter dropdown)

Hide dropdown content.

TableFooter

Accessibility attributes

Attribute

Description

Attribute

Description

aria-haspopup

Indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.

aria-expanded

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.

type="button"

Indicates that the element is a button.

aria-label

Defines a string value that labels an interactive element.

aria-live="polite"

Used to define the mode in which the element will be updated for users using responsive technologies.

aria-atomic

Used to indicate how changes within an element may affect its textual content.

aria-relevant

Used to indicate which changes to the element's content should be reported to assistive technologies.

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next the focusable element.

Space (Pagination dropdown)

Show dropdown content.

Enter (Pagination dropdown)

Show dropdown content.

Escape (Pagination dropdown)

Hide dropdown content.

Enter (RightArrow)

Triggers the button action.

Enter (LeftArrow)

Triggers the button action.

Space (RightArrow)

Triggers the button action.

Space (LeftArrow)

Triggers the button action.

Tabs

Accessibility attributes

Attribute

Description

Attribute

Description

role="tablist"

Used to define a list of tabs.

Tab

Accessibility attributes

Attribute

Description

Attribute

Description

role="tab"

Applied to a UI element that is a tab on a web page.

aria-controls

Points to the element that is controlled by or associated with the current element.

aria-selected

Used to indicate selection state.

aria-labelledby

Used to associate an element with one or more <id> elements containing a textual description or label for that element.

role="tabpanel"

Applied to a UI element to designate it as a container for containing information associated with a tab on a web page.

aria-hidden

Indicates whether the element is exposed to an accessibility API.

aria-live="polite"

Used to define the mode in which the element will be updated for users using responsive technologies.

role="status"

Used to indicate an area or element intended to display status information or notifications to the user.

Accessible text

Element

Text

Element

Text

Notification screenreader text

notification

Keyboard support

Key

Description

Key

Description

Tab

Moves focus through the next title.

Shift+Tab

Moves focus through the previous title.

Enter

Activates the focused tab title.

Space

Activates the focused tab title.

RightArrow

Moves focus to the previous title.

LeftArrow

Moves focus to the next title.

UpArrow

Moves focus to the next title.

DownArrow

Moves focus to the previous title.

Keyboard support with More tab

Key

Description

Key

Description

Tab

Moves focus to the More button and the next drop-down menu items.

Shift+Tab

Moves focus to the More button and previous drop-down menu items.

Enter

Opens tabs dropdown menu.

Space

Opens tabs dropdown menu.

UpArrow

Moves focus to the next dropdown option.

DownArrow

Moves focus to the previous dropdown option.

Escape

Closes dropdown menu.

Toast

Accessibility attributes

Attribute

Description

Attribute

Description

role="alert"

Used to communicate an important and usually time-sensitive message to the user.

aria-live="assertive"

Used to determine the importance level of notifications or content.

aria-atomic

Used to indicate how changes within an element may affect its textual content.

aria-label editable

Defines a string value that labels an interactive element.

type="button"

Indicates that the element is a button.

aria-hidden

Indicates whether the element is exposed to an accessibility API.

Keyboard support

Key

Description

Key

Description

Enter

Closes the message.

Tooltip

Accessibility attributes

Attribute

Description

Attribute

Description

aria-describedby

Used to create a link between an element and the content that describes it.

role="tooltip" editable

Used to designate an element intended to display a tooltip.

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next focusable item and shows tooltip.

Shift+Tab

Moves focus to the previous focusable item and shows tooltip.

TransitionReplace

no a11y attributes

Truncate

Accessibility attributes

Attribute

Description

Attribute

Description

aria-label editable

Defines a string value that labels an interactive element.

title editable

Used to provide a hint or additional information about an element.