Category: Bootstrap

More specifically, ARIA attributes aim to make Rich Internet Applications (RIA) more accessible – hence ARIA, where the first letter in the acronym is ‘Accessible’. This article aims to provide both an overview of ARIA and quick reference guide of its roles and attributes.

In this article:

• Background
• Introduction to ARIA
• Summary of Roles
• Summary of Properties and States
• ARIA and Bootstrap

Background

RIA websites often employ techniques, or may contain content, that can make it difficult to navigate using assistive technologies (such as screen readers.) This is due to the way that the Internet has evolved, from simple, static HTML pages to complex, dynamic websites that mimic feature rich computer applications and have multi-tier menus, dynamic content display, video, animated graphics, periodic or event driven partial-page updates, etc.

Also, as time passes, more and more functionality is being provided via Web front-ends over native per-device user interface applications. A lot of mobile device applications that don’t rely on optimised graphics performance are now being developed cross-platform as Web user interfaces (UI), sitting atop a runtime (such as Phone Gap), and bundled into an application construct. Those Web application UIs can often be skinned just using CSS classes to meet different operating system material designs with little extra work required. Providing this single, cohesive, approach to the user experience (UX) across devices/hosts can be beneficial both from a development cost and an end-user perspective, and hence RIAs have taken off – especially with mobile friendly toolkits like Bootstrap that allow Web applications to scale across devices. RIAs in a client-server environment are also likely to be easy to migrate to the cloud, since they’ll normally be hosted server-side with the ‘client’ being a web browser that could be running on any number of platforms.

On the back of the RIA revolution, numerous Web Frameworks/Libraries have been designed and developed (such as jQuery, AngularJS, etc.) to make authoring of RIA websites easier and more feature rich. These have brought about ‘single page’ websites where rendering of content has become so dynamic it can represent an entire multi-page website or web application. To compound matters, traditional RIA solutions that largely resolved requests to web page content server-side have given way to a raft of JavaScript APIs that perform a lot more dynamic layout AFTER the web page has loaded in the browser. With this level of complexity being embedded into pages, it is no wonder that something had to be done to address issues it introduces for users who cannot enjoy the full RIA experience due to limitations of their viewers (e.g. blind people using screen readers.)

(Back to Top)

Introduction to ARIA

NOTE: This guide is based on WAI-ARIA 1.0. Later versions may contain extensions or addendums to the initial major version.

WAI-ARIA (or just ARIA) aims to establish a set of metadata descriptions that help assistive technologies to interpret, and present a suitable view of, a Web Document Object Model (DOM). While those viewers could traverse the DOM directly and try to resolve context themselves, ARIA promotes mapping of context through the user agent’s accessibility provider. This has the advantage of inferring that complex accessibility requirements will be handled by the host (i.e. the operating system) instead of bulking out the viewer/browser with unnecessary, duplicated, behaviours.

ARIA relies on viewer/browser support to alter how Web application features are exposed to accessibility handlers, and also on the assistive technologies being used to consume the enhanced information available to convey semantic and interaction data to the user.

Before proceeding to investigate how ARIA might be declared in HTML documents, it is worth noting that ARIA promotes proper use of language semantics in preference to using aria- attributes where possible. For example, it is better to use the <h2> tag than attempting to use an alternative tag, such as <span> or <div>, with a custom CSS class and the ‘role=heading’ attribute.

ARIA relies on the concept of roles, states and properties. Roles describe the context of use of an element or group of elements (e.g. the ‘heading’ role implies the element represents the title of a region of content.) States and Properties both provide metadata descriptions of contextual aspects or behaviours associated with a role (e.g. aria-labellby=”myTitle”, would declare that another element with an ID of ‘myTitle’ provides the label for the current element.) A key differentiator between properties and states is how transient they are in nature. For example, aria-labelledBy=”myLabel” is likely to remain statically defined, and as such it is a property, but aria-checked=”true” may change at any time in response to the user de-selecting the check-box option so it would be considered a transient state. In most cases developers can simply think of both properties and states as descriptive attributes they associate with a role, but it is worth noting the delineation since it is defined in the WAI-ARIA specification to differentiate between active and passive behaviours.

(Back to Top)

Summary of Roles

Roles are defined as a hierarchy of inherited definitions. At the top level are abstract roles that shouldn’t be used in web pages but it is useful to be aware of them for informative purposes (for example, region is inherited by alert, and alert is inherited by alertdialog.)

NOTE: Names and descriptions reproduced based on the information provided here.

Role Name	Description
command	A form of widget that performs an action but does not receive input data.
composite	A widget that may contain navigable descendants or owned children.
input	A generic type of widget that allows user input.
landmark	A region of the page intended as a navigational landmark.
range	An input representing a range of values that can be set by the user.
roletype	The base role from which all other roles in this taxonomy inherit.
section	A renderable structural containment unit in a document or application.
sectionhead	A structure that labels or summarizes the topic of its related section.
select	A form widget that allows the user to make selections from a set of choices.
structure	A document structural element.
widget	An interactive component of a graphical user interface (GUI).
window	A browser or application window.

The remaining, applicable, roles are defined in sub-sets as widget-based, structure-based or landmark-based roles.

Widget-Based Roles

Role Name	Description	Additional Information
alert	A message with important, and usually time-sensitive, information. See related alertdialog and status.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
alertdialog	A type of dialog that contains an alert message, where initial focus goes to an element within the dialog. See related alert and dialog.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
button	An input that allows for user-triggered actions when clicked or pressed.	Properties: aria-expanded (state), aria-pressed (state), aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
checkbox	A checkable input that has three possible values: true, false, or mixed.	Properties: aria-checked (state, required), aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
dialog	A dialog is an application window that is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
gridcell	A cell in a grid or treegrid.	Required parent role: row. Properties: aria-readonly, aria-required, aria-selected (state), aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
link	An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
log	A type of live region where new information is added in meaningful order and old information may disappear.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
marquee	A type of live region where non-essential information changes frequently.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
menuitem	An option in a set of choices contained by a menu or menubar.	Required parent role: group, menu, menubar. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
menuitemcheckbox	A menuitem with a checkable state whose possible values are true, false, or mixed.	Required parent role: menu, menubar. Properties: aria-atomic, aria-busy (state), aria-checked (state, required), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
menuitemradio	A checkable menuitem in a set of elements with role menuitemradio, only one of which can be checked at a time.	Required parent role: group, menu, menubar. Properties: aria-atomic, aria-busy (state), aria-checked (state, required), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-posinset, aria-relevant, aria-selected (state), aria-setsize
option	A selectable item in a select list.	Required parent role: listbox. Properties: aria-checked (state), aria-posinset, aria-selected (state), aria-setsize, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
progressbar	An element that displays the progress status for tasks that take a long time.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext
radio	A checkable input in a group of radio roles, only one of which can be checked at a time.	Properties: aria-atomic, aria-busy (state), aria-checked (state, required), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-posinset, aria-relevant, aria-selected (state), aria-setsize
scrollbar	A graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area.	Properties: aria-controls (required), aria-orientation (required), aria-valuemax (required), aria-valuemin (required), aria-valuenow (required), aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant, aria-valuetext
slider	A user input where the user selects a value from within a given range.	Properties: aria-valuemax (required), aria-valuemin (required), aria-valuenow (required), aria-orientation, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant, aria-valuetext
spinbutton	A form of range that expects the user to select from among discrete choices.	Properties: aria-valuemax (required), aria-valuemin (required), aria-valuenow (required), aria-required, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant, aria-valuetext
status	A container whose content is advisory information for the user but is not important enough to justify an alert, often but not necessarily presented as a status bar.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
tab	A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user.	Required parent role: tablist. Properties: aria-selected (state), aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
tabpanel	A container for the resources associated with a tab, where each tab is contained in a tablist.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
textbox	Input that allows free-form text as its value.	Properties: aria-activedescendant, aria-autocomplete, aria-multiline, aria-readonly, aria-required, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
timer	A type of live region containing a numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
tooltip	A contextual popup that displays a description for an element.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
treeitem	An option item of a tree. This is an element within a tree that may be expanded or collapsed if it contains a sub-level group of treeitem elements.	Required parent role: group, tree. Properties: aria-atomic, aria-busy (state), aria-checked (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-level, aria-live, aria-owns, aria-posinset, aria-relevant, aria-selected (state), aria-setsize
combobox	(composite) A presentation of a select; usually similar to a textbox where users can type ahead to select an option, or type to enter arbitrary text as a new item in the list.	Required owned elements: listbox, textbox. Properties: aria-expanded (state, required), aria-autocomplete, aria-required, aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
grid	(composite) A grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table.	Required owned elements: row, rowgroup → row. Properties: aria-level, aria-multiselectable, aria-readonly, aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
listbox	(composite) A widget that allows the user to select one or more items from a list of choices. See related combobox and list.	Required owned elements: option. Properties: aria-multiselectable, aria-required, aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
menu	(composite) A type of widget that offers a list of choices to the user.	Required owned elements: group → menuitemradio, menuitem, menuitemcheckbox, menuitemradio. Properties: aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed , (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
menubar	(composite) A presentation of menu that usually remains visible and is usually presented horizontally.	Properties: aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
radiogroup	(composite) A group of radio buttons.	Required owned elements: radio. Properties: aria-required, aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
tablist	(composite) A list of tab elements, which are references to tabpanel elements.	Required owned elements: tab. Properties: aria-level, aria-multiselectable, aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
tree	(composite) A type of list that may contain sub-level nested groups that can be collapsed and expanded.	Required owned elements: group → treeitem, treeitem. Properties: aria-multiselectable, aria-required, aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
treegrid	A grid whose rows can be expanded and collapsed in the same manner as for a tree.	Required owned elements: row. Properties: aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-level, aria-live, aria-multiselectable, aria-owns, aria-readonly, aria-relevant, aria-required

Structure-Based Roles

Role Name	Description	Additional Information
article	Properties: A section of a page that consists of a composition that forms an independent part of a document, page, or site.	aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
columnheader	A cell containing header information for a column.	Properties: aria-sort, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-readonly, aria-relevant, aria-required, aria-selected (state)
definition	A definition of a term or concept.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
directory	A list of references to members of a group, such as a static table of contents.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
document	A region containing related information that is declared as document content, as opposed to a web application.	Properties: aria-expanded (state), aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
group	A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies.	Properties: aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
heading	A heading for a section of the page.	Properties: aria-level, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
img	A container for a collection of elements that form an image.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
list	A group of non-interactive list items. See related listbox.	Required owned elements group → listitem, listitem. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
listitem	A single item in a list or directory.	Required parent role: group, list. Properties: aria-level, aria-posinset, aria-setsize, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
math	Content that represents a mathematical expression.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
note	A section whose content is parenthetic or ancillary to the main content of the resource.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
presentation	An element whose implicit native role semantics will not be mapped to the accessibility API.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
region	A large perceivable section of a web page or document, that is important enough to be included in a page summary or table of contents, for example, an area of the page containing live sporting event statistics.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
row	A row of cells in a grid.	Required parent role: grid, rowgroup, treegrid. Required owned elements: columnheader, gridcell, rowheader. Properties: aria-level, aria-selected (state), aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
rowgroup	A group containing one or more row elements in a grid.	Require parent role: grid. Required owned elements: row. Properties: aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
rowheader	A cell containing header information for a row in a grid.	Required parent role: row. Properties: aria-sort, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-readonly, aria-relevant, aria-required, aria-selected (state)
separator	A divider that separates and distinguishes sections of content or groups of menuitems.	Properties: aria-expanded (state), aria-orientation, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
toolbar	A collection of commonly used function buttons or controls represented in compact visual form.	Properties: aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant

Landmark-Based Roles

Role Name	Description	Additional Information
application	A region declared as a web application, as opposed to a web document.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
banner	A region that contains mostly site-oriented content, rather than page-specific content.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
complementary	A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
contentinfo	A large perceivable region that contains information about the parent document.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
form	A landmark region that contains a collection of items and objects that, as a whole, combine to create a form.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
main	The main content of a document.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
navigation	A collection of navigational elements (usually links) for navigating the document or related documents.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
search	A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility.	Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant

(Back to Top)

Summary of Properties and States

NOTE: Names and descriptions reproduced based on the information provided here.

Global Attributes

Property Name	Description
aria-atomic	Expected values: true, false. Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
aria-busy (state)	Expected values: true / false. Indicates whether an element, and its subtree, are currently being updated.
aria-controls	Expects a space delimited list of one or more control IDs. Identifies the element (or elements) whose contents or presence are controlled by the current element. For example, tabs that control the display of associated tab panels.
aria-describedby	Identifies the element (or elements) that describes the object. NOTE: This differs from aria-labelledby in that labels are expected to be concise and descriptions can provide more explanatory information.
aria-disabled (state)	Expected values: true, false. Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable
aria-dropeffect	Expects a space delimited list of tokens. Allowed tokens are: copy, move, link, execute, popup, none (default). For descriptions of each token, see the WAI-ARIA section here. Indicates what functions can be performed when the dragged object is released on the drop target. This allows assistive technologies to convey the possible drag options available to users, including whether a pop-up menu of choices is provided by the application.
aria-flowto	Expects a space delimited list of one or more control IDs. Identifies the next element (or elements) in an alternate reading order of content which, at the user’s discretion, allows assistive technology to override the general default of reading in document source order.
aria-grabbed (state)	Expected values: true, false, undefined. Indicates an element’s “grabbed” state in a drag-and-drop operation.
aria-haspopup	Expected values: true, false. Indicates that the element has a popup context menu or sub-level menu.
aria-hidden (state)	Expected values: true, false. Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author.
aria-invalid (state)	Expects a space delimited list of tokens. Allowed tokens are: grammar, spelling, true, false. For descriptions of each token, see the WAI-ARIA section here. Indicates the entered value does not conform to the format expected by the application.
aria-label	Defines a string value that labels the current element. If the label text is visible on screen in another element, authors should use aria-labelledby on the associated data element and should not use this property.
aria-labelledby	Identifies the element (or elements) that labels the current element. NOTE: This differs from aria-describedby in that labels are expected to be concise identifiers (e.g. of fields.)
aria-live	Expects a space delimited list of tokens. Allowed tokens are: off (default), polite, assertive. For descriptions of each token, see the WAI-ARIA section here. Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
aria-owns	Expects a space delimited list of one or more control IDs. Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
aria-relevant	Expects a space delimited list of tokens. Allowed tokens are: additions, removals, text, all. Default value is “additions text”. For descriptions of each token, see the WAI-ARIA section here. Indicates what user agent change notifications (additions, removals, etc.) assistive technologies will receive within a live region.

Widget Attributes

Property Name	Description
aria-autocomplete	Expects a space delimited list of tokens. Allowed tokens are: inline, list, both, none (default). For descriptions of each token, see the WAI-ARIA section here. Indicates whether user input completion suggestions are provided.
aria-checked (state)	Expected values: true, false, mixed, undefined (default). (Mixed allows for tri-state values.) Indicates the current “checked” state of checkboxes, radio buttons, and other widgets.
aria-disabled (state)	Expected values: true, false (default). Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
aria-expanded (state)	Expected values: true, false, undefined (default). Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
aria-haspopup	Expected values: true, false (default). Indicates that the element has a popup context menu or sub-level menu.
aria-hidden (state)	Expected values: true, false (default). Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author.
aria-invalid (state)	Expects a space delimited list of tokens. Allowed tokens are: grammar, spelling, true, false. For descriptions of each token, see the WAI-ARIA section here. Indicates the entered value does not conform to the format expected by the application.
aria-label	Defines a string value that labels the current element. If the label text is visible on screen in another element, authors should use aria-labelledby on the associated data element and should not use this property.
aria-level	Expects a numeric integer value greater than zero. Defines the hierarchical level of an element within a structure. Level numbers should increase with nesting.
aria-multiline	Expected values: true, false (default). Indicates whether a text box accepts multiple lines of input or only a single line
aria-multiselectable	Expected values: true, false (default). Indicates that the user may select more than one item from the current selectable descendants.
aria-orientation	Expects one of the following token values: vertical, horizontal (default). Indicates whether the element and orientation is horizontal or vertical.
aria-pressed (state)	Expected values: true, false, mixed, undefined (default). (Mixed allows for tri-state values.) Indicates the current “pressed” state of toggle buttons.
aria-readonly	Expected values: true, false (default). Indicates that the element is not editable, but is otherwise operable.
aria-required	Expected values: true, false (default). Indicates that user input is required on the element before a form may be submitted.
aria-selected (state)	Expected values: true, false, undefined (default). Indicates the current “selected” state of various widgets.
aria-sort	Expects one of the following tokens: ascending, descending, other, none (default). (“Other” implies a sorting algorithm other than ascending or descending has been applied.) Indicates if items in a table or grid are sorted in ascending or descending order.
aria-valuemax	Expects a decimal or integer numeric value. Defines the maximum allowed value for a range widget.
aria-valuemin	Expects a decimal or integer numeric value. Defines the minimum allowed value for a range widget.
aria-valuenow	Expects a decimal or integer numeric value. Defines the current value for a range widget
aria-valuetext	Defines the human readable text alternative of aria-valuenow for a range widget.

Live-Region Attributes

Property Name	Description
aria-atomic	Expected values: true, false. Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
aria-busy (state)	Expected values: true / false. Indicates whether an element, and its subtree, are currently being updated.
aria-live	Expects a space delimited list of tokens. Allowed tokens are: off (default), polite, assertive. For descriptions of each token, see the WAI-ARIA section here. Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
aria-relevant	Expects a space delimited list of tokens. Allowed tokens are: additions, removals, text, all. Default value is “additions text”. For descriptions of each token, see the WAI-ARIA section here. Indicates what user agent change notifications (additions, removals, etc.) assistive technologies will receive within a live region.

Drag-Drop Attributes

Property Name	Description
aria-dropeffect	Expects a space delimited list of tokens. Allowed tokens are: copy, move, link, execute, popup, none (default). For descriptions of each token, see the WAI-ARIA section here. Indicates what functions can be performed when the dragged object is released on the drop target. This allows assistive technologies to convey the possible drag options available to users, including whether a pop-up menu of choices is provided by the application.
aria-grabbed (state)	Expected values: true, false, undefined. Indicates an element’s “grabbed” state in a drag-and-drop operation.

Relationship Attributes

Property Name	Description
aria-activedescendant	Expects a control ID. Identifies the currently active descendant of a composite widget.
aria-controls	Expects a space delimited list of one or more control IDs. Identifies the element (or elements) whose contents or presence are controlled by the current element. For example, tabs that control the display of associated tab panels.
aria-describedby	Identifies the element (or elements) that describes the object. NOTE: This differs from aria-labelledby in that labels are expected to be concise and descriptions can provide more explanatory information.
aria-disabled (state)	Expected values: true, false. Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable
aria-flowto	Expects a space delimited list of one or more control IDs. Identifies the next element (or elements) in an alternate reading order of content which, at the user’s discretion, allows assistive technology to override the general default of reading in document source order.
aria-labelledby	Identifies the element (or elements) that labels the current element. NOTE: This differs from aria-describedby in that labels are expected to be concise identifiers (e.g. of fields.)
aria-owns	Expects a space delimited list of one or more control IDs. Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
aria-posinset	Expects a numeric integer value. Defines an element’s number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
aria-setsize	Expects a numeric integer value. Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

(Back to Top)

ARIA and Bootstrap

The Bootstrap API website has a brief section on Accessibility, and most of the examples on their website include aria- attributes in tags definitions. Bootstrap also provides a few CSS classes to support assistive technologies. These are ‘sr-only’ (for displaying content only to screen readers), and ‘sr-only-focusable’ which will ensure a link becomes visible once focus is on it (for sighted keyboard-only users.)

Beyond that, you need to rely on ARIA roles and attributes to provide accessibility features.

(Back to Top)