role="alert" editable

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

Close button

Dismiss

Tab

Moves focus to the next focusable element.

Enter

Triggers the button <Alert.Link /> action.

Shift+Tab

Moves focus to the next focusable element.

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.

Escape

Closes the modal window.

alt editable

Used to provide alternative text for an image.

type="button" editable

Indicates that the element is a button.

alt (Icon)

Used to provide alternative text for an image.

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.

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.

Tab

Moves focus to the next focusable element.

Shift+Tab

Moves focus to the next focusable element.

Enter

Triggers the button action.

type="button" editable

Indicates that the element is a button.

aria-label editable

Defines a string value that labels an interactive element.

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.

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.

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.

Next button

Scroll to next

Previous button

Scroll to previous

Tab

Moves focus to the next focusable element.

Shift+Tab

Moves focus to the next focusable element.

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.

Tab+RightArrow

Moves focus to the next carousel element.

Tab+LeftArrow

Moves focus to the next carousel element.

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.

Next button

Next

Previous button

Previous

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.

role="button" (Action button)

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

Tab (Close button)

Moves focus to the next focusable element.

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.

Next button

Scroll to next

Previous button

Scroll to previous

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.

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.

Enter

Toggles the visibility of the content.

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.

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.

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.

View button

Card

Filters sidebar title

Filters

Filters sidebar input placeholder

Search name

Filters sidebar label

Search famous for

Tab

Moves focus to the next the focusable element.

Space

Triggers the checkbox action.

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.

Filters button

Filters

Search input

Search title

Showing status

Showing [number] of [number].

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.

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.

Showing status

Showing [number] of [number].

Showing dropdown (Pagination)

[number] of [number]

Pagination next button

Next, Page [number]

Pagination previous button

Previous

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.

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.

Enter

Triggers the button action.

Space

Triggers the button action.

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.

role="heading" editable

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

role="separator" editable

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

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.

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

Tab

Moves focus to the next focusable element.

Enter

Triggers the upload action.

Space

Triggers the upload action.

alt editable

Used to provide alternative text for an image.

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.

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.

aria-label editable

Defines a string value that labels an interactive element.

Space

Toggles the checked state.

Tab

Moves focus to the checkbox.

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.

Tab

Moves focus to the input element.

role="img"

Used to mark an element as image.

aria-hidden

Indicates whether the element is exposed to an accessibility API.

for

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

aria-describedby

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

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.

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.

role="switch"

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

aria-label editable

Defines a string value that labels an interactive element.

Tab

Moves focus to the switch.

Space

Toggles the checked state.

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.

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.

Screenreader text (with blank target)

in a new tab

Screenreader text (with icon)

Visit edX Home

Tab

Moves focus to the HyperLink.

Enter

Activates the HyperLink.

role="img"

Used to mark an element as an image.

aria-hidden

Indicates whether the element is exposed to an accessibility API.

aria-label editable

Defines a string value that labels an interactive element.

type="button" editable

Indicates that the element is a button.

Tab

Moves focus to the IconButton.

Enter

Activates the IconButton.

Space

Activates the IconButton.

aria-selected

Used to indicate selection state.

Enter

Activates the IconButtonToggle.

Space

Activates the IconButtonToggle.

alt editable

Used to provide alternative text for an image.

title

Opens in a new tab

Icon screenreader text

Dismiss

Tab

Moves focus to the MailtoLink.

Enter

Activates the MailtoLink.

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.

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.

UpArrow

Moves focus to the previous MenuItem.

DownArrow

Moves focus to the next MenuItem.