Accessibility Aria
An ARIA role is added via a role="" attribute, and does not ever change for an element once it is set. There are four categories of ARIA roles:
- landmark
- document
- widget
- abstract
banner: A region that contains the prime heading or internal title of a page. complementary: Any section of the document that supports the main content, yet is separate and meaningful on its own. contentinfo: A region that contains information about the parent document such as copyrights and links to privacy statements. form: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. main: Main content in a document. In almost all cases a page will have only one role=“main”. navigation: A collection of links suitable for use when navigating the document or related documents. search: The search tool of a Web document. application: A region declared as a web application, as opposed to a web document. (note: The role of application should only be used with caution because it gives a signal to screen reading software to turn off normal web navigation controls. Simple widgets should generally not be given the application role, nor should an entire web page be given the application role, unless it is not to be used at all like a web page, and not without much user testing with assistive technology.)
eg. Navigation
eg.html lang
eg.list with ul
eg.menu with div
article: A section of a page that consists of a composition that forms an independent part of a document, page, or site. columnheader definition: A definition of a term or concept. directory document 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. heading: A heading for a section of the page. img list listitem math note presentation region row rowgroup rowheader separator toolbar
alert: A message with important, and usually time-sensitive, information. See related alertdialog and status. 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. button: An input that allows for user-triggered actions when clicked or pressed. checkbox: A checkable input that has three possible values: true, false, or mixed. 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. See related alertdialog. gridcell link log marquee menuitem menuitemcheckbox menuitemradio option progressbar radio: A checkable input in a group of radio roles, only one of which can be checked at a time. scrollbar slider spinbutton status tab: A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user. tabpanel: A container for the resources associated with a tab, where each tab is contained in a tablist. textbox: Input that allows free-form text as its value. timer tooltip treeitem
State and properties are used to support ARIA roles and complement information. State is more dynamic and updating when the page is changed
aria-activedescendant: Identifies the currently active descendant of a composite widget. Use with autofill search suggestions. aria-autocomplete: Indicates whether user input completion suggestions are provided. Use with autofill search suggestions. aria-checked (state): Indicates the current “checked” state of checkboxes, radio buttons, and other widgets. You can set this to true, false, or mixed state. See related aria-pressed and aria-selected. aria-controls: Identifies the element (or elements) whose contents or presence are controlled by the current element. See related aria-owns. aria-describedby: Identifies the element (or elements) that describes the object. See related aria-labelledby. aria-disabled (state): Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. See related aria-hidden and aria-readonly. aria-expanded (state): Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. aria-hidden (state): Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author. See related aria-disabled. aria-invalid (state): 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. See related aria-labelledby. According to a Google Accessibility tutorial, it is not always practical or desirable to have visible labels for all of your objects. For example, there might only be enough space in your toolbar for a printer icon without a visible “Print” label. In cases like this, you should use the aria-label attribute to provide text labels so that users of screen readers and other adaptive technologies can understand what the object is used for. In cases where we use an X, or X as a close button, it is especially important to have an aria label of “Close button” as a screen reader will otherwise read ‘multiplication’ or 'X’ to its user. aria-labelledby: Identifies the element (or elements) that labels the current element. See related aria-label and aria-describedby. aria-live: Indicates that an element is dynamic, changing, and will be updated, and describes the types of updates the user can expect from the live region. There are two types of live regions: polite and assertive. When an element uses the polite attribute, the screen reader is able to finish reading what it was focused on before it reads the updated live region. With an assertive attribute, the screen reader interrupts what it is doing to read the updated live region. aria-owns: 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. See related aria-controls. aria-pressed (state): Indicates the current “pressed” state of toggle buttons. See related aria-checked and aria-selected. aria-required: Indicates that user input is required on the element before a form may be submitted. aria-selected (state): Indicates the current “selected” state of various widgets. See related aria-checked and aria-pressed.