WAI-ARIA 1.1 Roles Flashcards
alert
An assertive live region used to alert the user about important, and usually time-sensitive, information.
- On: the element with the message.
- Focus: none; should not require closing by the user
- Implicit values: aria-live="assertive", aria-atomic="true"
alertdialog
A type of dialog that contains an alert message.
- On: node containing alert message and the rest of the dialog
- Focus: an element within the dialog; SHOULD be trapped
- Name: Required. SHOULD use aria-describedby to reference the message element
application
Contains 1+ focusable elements requiring user input & not following a standard interaction pattern supported by a widget role.
- On: node containing the entire application functionality
- Focus: Some ATs only surface focusable elements within application, so author MUST make non-decorative content accessible:
- associate with focusable element using aria-labelledby or aria-describedby, OR
- place content in a focusable element with role document or article, OR
- manage focus of descendants using aria-activedescendant
- Name: Required, from author.
article
A section/composition that forms an independent part of a document, page, or site.
- Not a navigational landmark.
- May be nested; if so, this indicates that the child article content relates to the parent article.
banner
A region that contains mostly site-oriented content (e.g. logo, site search, etc), rather than page-specific content.
- SHOULD be treated as a navigational landmark.
- SHOULD be a single instance in any document or application.
- Default on HTML header
button
An input that allows from user-triggered actions when clicked or pressed, mostly used for discrete actions.
- Attributes: optionally supports aria-pressed (boolean) to create a toggle button.
- name: from contents
- Default for HTML button
cell
A cell in a tabular container.
- MUST be contained in or owned by an element with role row.
- name: required, from contents
- Default for HTML td
checkbox
A checkable input that has three possible values: true, false, and mixed.
- attributes: aria-checked indicates the value
- name: required, from contents
- implicit values: aria-checked="false"
- Default for HTML input[type="checkbox"]
columnheader
A cell containing header information for a column, usually in a table (non-interactive) or grid (interactive). Establishes a relationship between itself and all the cells in the corresponding column.
- MUST be contained in or owned by an element with role row.
- name: required, from contents
- Default for HTML th[scope=["col"]
combobox
A composite widget containing a single-line textbox or searchbox and another element, such as listbox or grid, that can dynamically pop up to help the user with its value.
- If the textbox uses autocomplete, aria-autocomplete MUST be set.
- MUST set aria-expanded according to its state (defaults to false)
- When expanded, MUST own/contain a listbox, tree, grid or dialog as the popup, and MUST set aria-controls on the textbox to a value that refers to this element.
- MUST have a value for aria-haspopup if it is not the default listbox
- Focus: SHOULD initially be on textbox, and SHOULD be managed among descendants
- Required attributes: aria-controls and aria-expanded
- Name: required, from author
- Implicit values: aria-expanded="false", aria-haspopup="listbox"
command
A form of widget that performs an action but doesn’t receive input data (button, link, menuitem).
- Abstract role, not to be used by authors.
complementary
A supporting section of the document, at the same level as and complementary/relevant to the main content but remaining meaningful on its own.
- SHOULD be treated as navigational landmarks.
- Default for HTML aside
composite
A widget that may contain navigable descendants or owned children.
- Abstract role, not to be used by authors.
contentinfo
A large perceivable region that contains information about the parent document (e.g. copyright, privacy statements, etc.).
- SHOULD be treated as navigational landmark.
- SHOULD be only one instance in any document or application.
- Default on HTML footer
definition
A definition of a term or concept.
- SHOULD identify the element (role term) being defined and reference it with aria-labelledby.
- Default on HTML dd
dialog
A descendant window of the primary window of the web application (for HTML pages, the body), most often used to prompt the user to enter or respond to information. When designed to interrupt workflow, it is usually modal.
- SHOULD have a label, via aria-label or aria-labelledby
- Focus: SHOULD have at least one focusable descendant, which SHOULD be focused when the dialog is modal
directory
A list of references to members of a group.
- SHOULD be used for a static table of contents (linked or unlinked).
document
An element containing content that AT users might want to browse in a ‘reading mode’ (default for all elements except those with widget or application roles, so only useful if the element is a descendant of one of these).
feed
A scrollable list of articles, where scrolling may cause articles to be added or removed from either end of the list.
- SHOULD have aria-busy="true" while the list is updating, and false otherwise.
- MAY include an article at the end(s) with a button to load more articles.
- On: a container whose children have role article
- Focus: SHOULD be made possible on each child article (e.g. using tabindex in HTML)
figure
A perceivable section of content that contains a graphical document, image, code snippet or example text.
- Parts of a figure MAY be user-navigable.
- SHOULD be referenced from main text.
- MAY provide a label using aria-label or aria-labelledby, and MAY reference text serving as a caption using aria-describedby.
- Default for HTML figure
form
A landmark region containing a collection of elements (any mix of host language form controls, scripted controls, and hyperlinks) that together create a form.
- SHOULD have a visible label, referenced with aria-labelledby.
- Default for HTML form
grid
A composite widget with 1+ cells in 1+ rows forming a grid, where each cell is focusable using methods of two-dimensional navigation (e.g. arrow keys). This role implies only relationships among elements, not specific visuals.
- MUST be structured grid (> rowgroup) > row > gridcell/rowheader/columnheader .
- Focus: SHOULD be managed within; SHOULD be set on the cell itself, but MAY be on a widget within a cell (if it is the only content and doesn’t require arrow keys)
- SHOULD provide a mechanism to operate any interactive content within a cell
gridcell
A cell in a grid or treegrid. May be focusable, editable, and selectable, and may have relationships (e.g. aria-controls).
- SHOULD have aria-describedby to refer to a rowheader or columnheader, if these cannot be determined from DOM structure.
- MUST be contained in or owned by a row.
group
A set of UI objects which are not intended to be included in a page summary or table of contents by ATs (in contrast to region).
- SHOULD be used to form a logical collection of items in a widget.
heading
A heading for a section of the page; often referenced with aria-labelledby on the section itself.
- name: Required
- implicit values: aria-level="2"
- Default for HTML h1 to h6.
img
A container for a collection of elements that form an image (a single graphic). Can contain captions and descriptive text, as well as multiple image files that together give the impression of a single image.
- name: Required, from alternative text or label
- Default for HTML img.
input
A generic type of widget that allows user input.
landmark
A perceivable section containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to it easily and have it listed in a summary of the page.
- Abstract role, not to be used by authors.
link
An interactive reference to an internal or external resource that, when activated, causes the UA to navigate to that source.
- name: Required, from contents
- Default for HTML a[href] & link
list
A section containing listitem elements (or group elements which contain listitems).
- Default for HTML ol, ul.
listbox
A widget that allows the user to select 1+ items from a list of choices, each as an element with role option.
- Focus: SHOULD be managed within, applied on descendants.
- Name: required
- Implicit values: aria-orientation="vertical"
- Default for HTML select.
listitem
A single item in a list or directory.
- MUST be contained in or owned by list or group.
- Default for HTML li.
log
A type of live region where new information is added in meaningful order and old information may disappear (e.g. chat logs, messaging history, game log, error log).
- Name: required
- Implicit values: aria-live="polite"
main
The main content (directly related or expands on the central topic) of a document.
- SHOULD be treated as a navigational landmark.
- SHOULD be a single instance in any document or application.
marquee
A type of live region where non-essential information changes frequently (e.g. stock ticker, ad banner).
- Name: required
- Implicit values: aria-live="off"
math
Content that represents a mathematical expression, marked up in an accessible format (e.g. MathML, TeX, LaTeX) or in a format which can be made accessible via polyfill.
menu
A type of widget that offers a list of choices (e.g. actions, functions to invoke) to the user, appropriate when the list is presented in a manner similar to a menu on a desktop application.
- Focus: SHOULD be managed within.
- Implicit values: aria-orientation="vertical"
- Required descendants: any of [group>menuitemradio, menuitem, menuitemcheckbox, menuitemradio]
menubar
A presentation of menu that usually remains visible and is usually presented horizontally, used to present a consistent set of frequently-used commands.
- SHOULD have similar interaction to a typical menubar in a desktop GUI.
- Focus: SHOULD be managed within
- Implicit values: aria-orientation="horizontal"
- Required descendants: any of [group>menuitemradio, menuitem, menuitemcheckbox, menuitemradio]
menuitem
An option in a set of choices contained by a menu or menubar.
- MAY be disabled. MAY be used to launch a sub-level menu, indicated with aria-haspopup.
- MUST be owned by menu or menubar.
- Name: required, from content
menuitemcheckbox
A menuitem with a checkable state, whose possible values are true, false, or mixed (indicated by the aria-checked attribute).
- MUST be owned by menu or menubar.
- name: required, from content
- implicit values: aria-checked="false"
menuitemradio
A checkable menuitem in a set of elements with the same role, only one of which can be checked (indicated by aria-checked) at a time.
- MUST be owned by group, menu, or menubar.
- If there are multiple sets of menuitemradio elements, these SHOULD be nested in group elements, and SHOULD be delimited with a separator.
- name: required, from content
- implicit values: aria-checked="false"
navigation
A collection of navigational elements (usually links) for navigating the document or related documents.
- SHOULD be treated as a landmark.
- Default for HTML nav.
none
An element whose implicit native role semantics will not be mapped to the accessibility API.
- Synonym to presentation & recommended as a redundant/fallback role for the same until support is more widespread.
note
A section whose content is parenthetic or ancillary to the main content of the resource.
option
A selectable item in a select list.
- MUST be contained in or owned by an element with the role listbox.
- name: required, from content
- required attributes: aria-selected
- implicit values: aria-selected="false"
- Default for HTML option.
presentation
An element whose implicit native role semantics will not be mapped to the accessibility API. Intended for use when an element is used to change the look of a page but does not have all the functional, interactive, or structural relevance implied by the element type (e.g. presentational content like spacers and decorative graphics, layout tables).
- Causes a given element to be treated as if having no role, or to be removed from the accessibility tree (but does not do the same for its content).
- Role will be inherited (and semantics stripped) on any required owned elements and labels.
progressbar
An element that displays the progress status for tasks that take a long time, indicating that the application is making progress toward completing a user’s requested action.
- SHOULD have values for aria-valuenow (unless indeterminate), aria-valuemin, and aria-valuemax, and SHOULD update aria-valuenow with progress.
- SHOULD use aria-describedby on a relevant element if the progressbar relates to a region of the page, and SHOULD set aria-busy="true" on the region until it is finished loading.
- aria-valuenow is generally expressed as a percent of the range between aria-valuemin and aria-valuemax, unless aria-valuetext specified.
- Name: required
- children presentational
radio
A checkable input in a group of elements with the same role, only one of which can be checked at a time.
- SHOULD be explicitly grouped by element with role radiogroup to indicate which ones affect the same value.
- Name: required, from author or contents
- children presentational
- implicit values: aria-checked="false"
radiogroup
A group of radio buttons.
- SHOULD only allow one radio button to be checked at one time (when one becomes checked, all other become unchecked).
- Name: required, from author
range
An input representing a range of values that can be set by the user.
- Abstract role, not to be used by authors.
region
A perceivable section of content; a generic landmark role.
- SHOULD be limited to regions that cannot be accurately described by other landmark roles.
- MUST have a brief label that describes the purpose of its content, which SHOULD be a heading if possible, and SHOULD be referenced by aria-labelledby, if visible.
- Name: required
- Default for HTML section
roletype
The base role from which all others in the taxonomy inherit.
- Abstract role, not to be used by authors.
row
A row of cell or gridcell elements in tabular container (table or grid) or treegrid.
- MUST be contained in or owned by table, grid, rowgroup, or treegrid.
- MAY be marked as expandable with aria-expandable in a treegrid.
rowgroup
A structure containing 1+ row elements in a tabular container, which established a relationship between them.
- Structural equivalent to thead, tfoot, and tbody in HTML table element
- MUST be contained in or owned by a table or grid
rowheader
A cell containing header information for a row in a table or grid, establishing a relationship between it and all cells in the corresponding row.
- Structural equivalent to th[scope="row"] in HTML.
- MUST be contained in or owned by a grid or table
- Applying aria-selected on a rowheader MUST not cause automatic propagation of the state to all cells in the corresponding row, but MAY propagate it intentionally.
- SHOULD NOT have aria-required and aria-readonly in a rowheader descending from a table, only in an interactive grid
scrollbar
A graphical object that controls the scrolling of content within a viewing area.
- MUST reference the scrollable area it controls with aria-controls on the scrollbar element
- MUST set aria-valuenow, aria-valuemin, and aria-valuemax
- Implicit values: aria-valuemin="0", aria-valuemax="100", aria-valuenow is halfway between min and max values, aria-orientation="vertical"
- children presentational
search
A landmark region that contains a set of elements (e.g. form controls, scripted controls, hyperlinks) that combine to provide search functionality.
searchbox
A type of textbox intended for specifying search criteria.
- Default for HTML input[type="search"]
- name: required, from author
section
A renderable structural containment unit in a document or application.
- abstract role, not to be used by authors
sectionhead
A structure that labels or summarizes the topic of its related section.
- abstract role, not to be used by authors
select
A form widget that allows the user to make selections from a set of choices.
- abstract role, not to be used by authors
separator
A divider that separates and distinguishes sections of content or groups of menuitems, providing a visible boundary.
- MAY be made focusable to create a widget that enables the user to change the relative size of the sections by changing its position.
- If focusable, MUST have aria-valuemin, aria-valuemax, and aria-valuenow set to a number reflecting the current position, and MUST update aria-valuenow when it changes.
- SHOULD provide an accessible name in applications with more than one focusable separator
- implicit values: aria-valuemin="0", aria-valuemax="100", aria-valuenow="50", aria-orientation="horizontal"
- children presentational
slider
A user input where the user selects a value from within a given range.
- MUST set aria-valuenow, aria-valuemin, and aria-valuemax
- Implicit values: aria-valuemin="0", aria-valuemax="100", aria-valuenow is halfway between min and max values, aria-orientation="horizontal"
- name: required, from author
- children presentational
spinbutton
A form of range that expects the user to select from among discrete choices, especially appropriate when the set is very large (e.g. 1 to 1,000,000)
- SHOULD be controllable via keyboard up/down keys on the keyboard until a min/max value is reached.
- MAY be created with children or owned elements, but these MUST be a textbox and two buttons
- Focus: SHOULD be managed on descendants; initially applied to textbox, if present, and to spinbutton element otherwise (but NOT around button elements).
- MUST have aria-valuenow and SHOULD have aria-valuemin and aria-valuemax if these values exist
- Implicit values: aria-valuemin & aria-valuemax are null; aria-valuenow="0"
- Name: required, from author
- HTML default for input[type="number"]
status
A type of live region whose content is advisory information but not important enough to justify an alert; often, but not necessarily, presented as a status bar.
- Focus: SHOULD not receive focus as a result of status change
- If another part of the page controls the status, it SHOULD have aria-controls to make the relationship explicit
- Implicit values: aria-live="polite", aria-atomic="true"
structure
A structural element of a document, used to create widget roles or assist content adaptation for ATs & help determine active content vs. static document content
- Abstract role, not to be used by content authors
switch
A type of checkbox that represents on/off values, as opposed to checked/unchecked values.
- aria-checked may be true or false; mixed is not valid, and is treated as false
- Name: required, from author or contents
- children presentational
- Implicit values: aria-checked="false"
tab
An interactive element providing a mechanism for selecting the tab content (in a related tabpanel) to render to the user.
- MUST be contained in or owned by tablist
- When active, the associated tabpanel SHOULD be perceivable by the user and SHOULD have aria-expanded="true"
- The active tab(s) SHOULD have aria-selected="true" and provide a visual indicator, and all others should be set to false
- Name: required, from contents or author
- children presentational
Implicit values: aria-selected="false"
table
A section containing non-interactive data arranged in rows and columns.
- Authors SHOULD use native table markup instead, wherever possible
- Default for HTML table
- Required elements: row or rowgroup
- Name: required, from author
tablist
A list of tab elements, placed near (usually preceding) a series of tabpanel elements.
- Focus: SHOULD be managed within
- Implicit values: aria-orientation="horizontal"
- Required owned elements: tab
tabpanel
A container for the content associated with a given tab, typically placed after the tablist.
- SHOULD be associated with a tab, either by using aria-controls on the tab (referencing the tabpanel) or by using aria-labelledby on the tabpanel (referencing the tab)
- Name: required, from author
term
A word or phrase with a corresponding definition (provided by the author or expected to be provided by the user).
- SHOULD NOT be used on interactive elements, because this may interfere with AT
- Default for HTML dt
textbox
A type of input that allows free-form text as its value.
- Accepts line breaks if aria-multiline="true" (note: this changes behaviour of ENTER/RETURN key)
- Default for HTML input[type="text"] or textarea
- Name: required, from author
timer
A type of live region containing a numerical counter where the text contents, indicating the current time measurement, are updated to represent either elapsed time or remaining time.
- Text content SHOULD be updated at fixed intervals, except when timer is paused or reaches an end-point
- Implicit values: aria-live="off"
- Name: required, from author
toolbar
A collection of commonly-used buttons/controls represented in compact visual form.
- MUST be labeled when the application contains >1 toolbar
- Focus: MAY be managed within
- Implicit values: aria-orientation="horizontal"
tooltip
A contextual pop-up that displays a description for an element, typically becoming visible on mouse hover or keyboard focus.
- SHOULD become visible after a short delay (typically 1-5s) following mouse hover or keyboard focus
- SHOULD be referenced using aria-describedby
- Name: required, from contents or author
tree
A type of list that may contain sub-level nested groups that can be collapsed/expanded.
- Focus: SHOULD be managed on descendants
- Implicit values: aria-orientation="vertical"
- Name: required, from author
treegrid
A grid whose rows can be expanded/collapsed in the same manner as a tree.
- If aria-readonly="true", the UA MUST propagate this value to all gridcells, but an author MAY override this for individual gridcells
- aria-readonly on a gridcell does not represent availability of functions for navigating or manipulating the treegrid itself
- Focus: SHOULD be managed within
- Required owned elements: row or rowgroup
- Name: required, from author
treeitem
An option item within a tree; it may be expanded/collapsed if it contains a sub-level group of elements.
- MUST be contained in or owned by group or tree
- Name: required, from contents or author
widget
An interactive component of a GUI. Roles map to standard Accessibility API features.
- ATs SHOULD switch to application browsing mode when a user navigates to a widget and pass keyboard events through.
- Abstract role, not to be used by content authors
window
A browser or application window, or an element having “window-like” behaviour in a GUI.
- Abstract role, not to be used by content authors
