• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Digital A11Y

Digital A11Y

Your Accessibility Partner

  • About
  • Articles
  • WAI-ARIA
  • WCAG
  • Resources
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact
You are here: Home / Web Accessibility / WAI-ARIA / WAI-ARIA 1.1 Cheat Sheet

WAI-ARIA 1.1 Cheat Sheet

Last Modified: April 25, 2019 by Raghavendra Satish Peri 1 Comment

WAI-ARIA stands for Web Accessibility Initiative – Accessible Rich Internet Applications. WAI-ARIA help achieve the accessibility of complex widgets & dynamic content developed with Java Script, HTML, Ajax & other related technologies. Since March 20th 2014 WAI-ARIA is a W3C recommendation & it is being adapted widely by the developer community.

You could think of ARIA as a suite of attributes to be included in your usual HTML code, these additional attributes will help the assistive technologies understand the relationships, states & properties in user interface components. In this way ARIA helps developers create applications that are usable by people with disability. ARIA attributes communicate the role, state & property symantics to assistive technologies via the accessibility API s implemented in browsers.

ARIA Roles

ARIA Roles
Roles  

Summary

Reference
alert A message with important, and usually time-sensitive, information. Alert
alertdialog A type of dialog that contains an alert message, where initial focus goes to an element within the dialog. alertdialog
application A region declared as a web application, as opposed to a web document. application
article A section of a page that consists of a composition that forms an independent part of a document, page, or site. article
banner A region that contains mostly site-oriented content, rather than page-specific content. banner
button An input that allows for user-triggered actions when clicked or pressed. button
cell A cell in a tabular container. cell
checkbox A checkable input that has three possible values: true, false, or mixed. checkbox
columnheader A cell containing header information for a column. columnheader
combobox 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. combobox
command A form of widget that performs an action but does not receive input data. command
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. complementary
composite A widget that may contain navigable descendants or owned children. composite
contentinfo A large perceivable region that contains information about the parent document. contentinfo
definition A definition of a term or concept. definition
dialog 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. dialog
directory A list of references to members of a group, such as a static table of contents. directory
document A region containing related information that is declared as document content, as opposed to a web application. document
feed A scrollable list of articles where scrolling may cause articles to be added to or removed from either end of the list. feed
figure A perceivable section of content that typically contains a graphical document, images, code snippets, or example text. The parts of a figure MAY be user-navigable. figure
form A landmark region that contains a collection of items and objects that, as a whole, combine to create a form. form
grid An interactive control which contains cells of tabular data arranged in rows and columns, like a table. grid
gridcell A cell in a grid or treegrid. gridcell
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. group
heading A heading for a section of the page. heading
img A container for a collection of elements that form an image. img
input A generic type of widget that allows user input. input
landmark A region of the page intended as a navigational landmark. landmark
link An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. link
list A group of non-interactive list items. list
listbox that allows the user to select one or more items from a list of choices listbox
listitem A single item in a list or directory. listitem
log A type of live region where new information is added in meaningful order and old information may disappear. log
main The main content of a document. main
marquee A type of live region where non-essential information changes frequently marquee
math Content that represents a mathematical expression. math
menu A type of widget that offers a list of choices to the user. menu
menubar A presentation of menu that usually remains visible and is usually presented horizontally. menubar
menuitem An option in a set of choices contained by a menu or menubar. menuitem
menuitemcheckbox A menuitem with a checkable state whose possible values are true, false, or mixed. menuitemcheckbox
menuitemradio A checkable menuitem in a set of elements with role menuitemradio, only one of which can be checked at a time. menuitemradio
navigation A collection of navigational elements (usually links) for navigating the document or related documents. navigation
note A section whose content is parenthetic or ancillary to the main content of the resource. note
option A selectable item in a select list. option
presentation An element whose implicit native role semantics will not be mapped to the accessibility API. presentation
progressbar An element that displays the progress status for tasks that take a long time. progressbar
radio A checkable input in a group of radio roles, only one of which can be checked at a time. radio
radiogroup A group of radio buttons. radiogroup
range An input representing a range of values that can be set by the user. range
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. region
roletype The base role from which all other roles in this taxonomy inherit. roletype
row A row of cells in a grid. row
rowgroup A group containing one or more row elements in a grid. rowgroup
rowheader A cell containing header information for a row in a grid. rowheader
scrollbar A graphical object that controls the scrolling of content within a viewing area. scrollbar
search A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility. search
section A renderable structural containment unit in a document or application section
sectionhead A structure that labels or summarizes the topic of its related section. sectionhead
select A structure that labels or summarizes the topic of its related section. select
separator A divider that separates and distinguishes sections of content or groups of menu items separator
slider A user input where the user selects a value from within a given range. slider
spinbutton A form of range that expects the user to select from among discrete choices. spinbutton
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. status
structure A document structural element. structure
tab A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user. tab
tablist A list of tab elements, which are references to tabpanel elements. tablist
tabpanel A container for the resources associated with a tab, where each tab is contained in a tablist. tabpanel
textbox Input that allows free-form text as its value. textbox
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. timer
toolbar A collection of commonly used function buttons or controls represented in compact visual form. toolbar
tooltip A contextual popup that displays a description for an element. tooltip
tree A type of list that may contain sub-level nested groups that can be collapsed and expanded. tree
treegrid A grid whose rows can be expanded and collapsed in the same manner as for a tree. treegrid
treeitem An option item of a tree treeitem
widget An interactive component of a graphical user interface (GUI). widget
window A browser or application window. window
none An element whose implicit native role semantics will not be mapped to the accessibility API. none
term A word or phrase with a corresponding definition. term

ARIA States

ARIA States
States summary reference
aria-busy Indicates whether an element, and its subtree, are currently being updated. aria-busy
aria-checked Indicates the current “checked” state of checkboxes, radio buttons, and other widgets. aria-checked
aria-disabled Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. aria-disabled
aria-expanded Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. aria-expanded
aria-grabbed Indicates an element’s “grabbed” state in a drag-and-drop operation. aria-grabbed
aria-hidden Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author. aria-hidden
aria-invalid Indicates the entered value does not conform to the format expected by the application. aria-invalid
aria-pressed Sets or retrieves the pressed state of a button that can be toggled. aria-pressed
aria-selected Sets or retrieves the selection state of the element. aria-selected
aria-current Indicates the element that represents the current item within a container or set of related elements. aria-current

ARIA Properties

ARIA Properties
Properties Summary Reference

aria-activedescendant

Identifies the currently active descendant of a composite widget. aria-activedescendant
aria-atomic 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-atomic
aria-autocomplete Indicates whether user input completion suggestions are provided. aria-autocomplete
aria-controls Identifies the element (or elements) whose contents or presence are controlled by the current element. aria-controls
aria-describedby Identifies the element (or elements) that describes the object. aria-describedby
aria-dropeffect Indicates what functions can be performed when the dragged object is released on the drop target. aria-dropeffect
aria-flowto 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-flowto
aria-haspopup Indicates that the element has a popup context menu or sub-level menu. aria-haspopup
aria-label Defines a string value that labels the current element. aria-label
aria-labelledby Identifies the element (or elements) that labels the current element. aria-labelledby
aria-level Defines the hierarchical level of an element within a structure. aria-level
aria-live Sets or retrieves how assistive technology announces updates to live regions. aria-live
aria-multiline Indicates whether a text box accepts multiple lines of input or only a single line aria-multiline
aria- multiselectable Indicates that the user may select more than one item from the current selectable descendants. aria-multiselectable
aria-orientation Indicates that the user may select more than one item from the current selectable descendants. aria-orientation
aria-owns Sets or retrieves a list of child objects, including elements that are not direct descendants of the current object. aria-owns
aria-posinset Sets or retrieves the current position of an item within a set. Not required if all elements in the set are present in the DOM. aria-posinset
aria-readonly Sets or retrieves the read-only state of this element aria-readonly
aria-relevant Sets or retrieves which changes to a live region are relevant. aria-relevant
aria-required Indicates that user input is required on the element before a form may be submitted. aria-required
aria-setsize Sets or retrieves the set size of this element. Not required if all elements in the set are present in the DOM. aria-setsize
aria-sort Indicates if items in a table or grid are sorted in ascending or descending order. aria-sort
aria-valuemax Sets or retrieves the maximum value that a user can provide. aria-valuemax
aria-valuemin Sets or retrieves the minimum value that a user can provide. aria-valuemin
aria-valuenow Sets or retrieves the current value of the element. aria-valuenow
aria-valuetext Defines the human readable text alternative of aria-valuenow for a range widget. aria-valuetext

References

  • WAI-ARIA Overview
  • WAI-ARIA Authoring Practices 1.1
  • WAI-ARIA FAQ

Disclaimer

All the material provided on the WAI-ARIA cheat sheet is copied from the web from different locations. Most of the content is intact & nothing has been modified by Digital A11Y team. All the definitions & examples provided for each WAI-ARIA Role, State & Property is taken from the WAI-ARIA authoring practice. All the Roles, States & Properties contain a link to the WAI-ARIA authoring practice document. For more information on the license please check the links below from W3C

  • W3C Software and Document Notice and License
  • Using WAI Material: Permission to Use with Attribution

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

More Accessibility Articles

Filed Under: WAI-ARIA Tagged With: cheat sheet, WAI-ARIA

About Raghavendra Satish Peri

Raghavendra Satish Peri is a digital accessibility evangelist working at Deque Systems as Senior Accessibility Consultant breaking web accessibility & mobile accessibility challenges. He authors an Accessibility Blog & is galvanizing the adoption of accessibility by inspiring the local tech community with meetups and mentorship. He propelled this thought by founding HelloA11y, a community of accessibility professionals, developers and enthusiasts. When away from his computer, Raghava can be found at local cafes & restaurants sampling cuisines, attending local meetups, listening to audio books or writing on his Personal Blog. Raghavendra Satish Peri also helps small business & individuals with Digital Marketing Trainings & SEO consulting… He has been building websites & doing SEO Consulting for more than 14years.

Reader Interactions

Comments

  1. Raghu says

    May 13, 2019 at 10:47 pm

    Awesome Article Raghava 🙂 Well planned all contents in one sheet 🙂 I liked the idea 🙂

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name
  • Knowbility looking for mentors in its Accessible Internet Rally
  • Understanding SC 2.5.2 Pointer Cancellation

Recent Comments

  • Al on Understanding SC 4.1.2 Name, Role, Value
  • Randy on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Understanding SC 1.4.12 Text Spacing
  • Raghavendra Satish Peri on Understanding SC 4.1.2 Name, Role, Value

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • Uncategorized
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y