aria-hidden (Icon button)

Indicates whether the element is exposed to an accessibility API.

role="tableimg" (Icon button)

Used to define mark an element as a tableimage.

roletype="rowbutton"

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.

type="checkbox"

Defines the element type as a checkbox.

title

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

role="rowgroup"

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

role="cell"

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

aria-hidden

Indicates whether the element is exposed to an accessibility API.

role="img"

Used to mark an element as image (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.

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

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.

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.

Enter

Triggers the button action.

Space

Triggers the button action.

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.

role="heading"

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

role="separator"

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

role="presentation"

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.

Tab

Moves focus to the next focusable element.

Enter

Triggers the upload action.

Space

Triggers the upload action.

alt

Used to provide alternative text for an image.

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.

aria-owns

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

aria-describedby

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.

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

Defines a string value that labels an interactive element.

focusable element.

Enter

Triggers the upload action.

Space

Triggers the upload action.

alt

Used to provide alternative text for an image.

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.

aria-owns

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

aria-describedby

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

Space

Toggles the checked state.

Tab

Moves focus to the checkbox.

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

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

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.

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"

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

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

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

aria-describedby

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

aria-labelledby

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

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

Defines a string value that labels an interactive element.

Tab

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

aria-label

Defines a string value that labels an interactive element.

type="button"

Indicates that the element is a button.

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

Defines a string value that labels an interactive element.

type="button"

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.

Tab

Moves focus to the next the focusable element.

alt

Used to provide alternative text for an image.

role="dialog"

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

aria-label

Defines a string value that labels an interactive element.

role="dialog"

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

aria-label

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.

role="dialog"

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

aria-label

Defines a string value that labels an interactive element.

role="separator"

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

role="navigation"

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

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

role="region"

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

aria-label

Defines a string value that labels an interactive element.

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.

role="alert"

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

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.

the next slide element.

LeftArrow

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

role="alert"

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

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-label (Button)

Defines a string value that labels an interactive element.

type="button" (Button)

Indicates that the element is a button.

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

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.

role="tooltip""

Used to designate an element intended to display a tooltip.

role="progressbar"

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.

aria-hidden

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.

aria-label

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.

role="button"

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

aria-label

Defines a string value that labels an interactive 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="button"

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.

role="dialog"

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

aria-label

Defines a string value that labels an interactive element.

type="button" (Close icon)

Indicates that the element is a button.

aria-live="assertive"

Used to determine the importance level of notifications or content.

aria-disabled

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

type="button"

Indicates that the element is a button.

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

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.

aria-describedby

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

role="tooltip"

Used to designate an element intended to display a tooltip.

aria-label

Defines a string value that labels an interactive element.

title

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