Syntax
• aria-live
• aria-relevant
• aria-autocomplete
• aria-checked
• aria-disabled
• aria-expanded
• aria-haspopup
• aria-hidden
• aria-invalid
• aria-label
• aria-level
• aria-multiline
• aria-multiselectable
• aria-orientation
• aria-pressed
• aria-readonly
• aria-required
• aria-selected
• aria-sort
• aria-valuemax
• aria-valuemin
• aria-valuenow
• aria-valuetext
• aria-atomic
• aria-busy
• aria-dropeffect
• aria-dragged
• aria-activedescendant
• aria-controls
• aria-describedby
• aria-flowto
• aria-labelledby
• aria-owns
• aria-posinset
• aria-setsize
Remarks
ARIA is a specification for semantically describing rich web applications. Following ARIA
standards can increase accessibility for those using assistive technologies (such as a screen
reader) to access your content. Examples role=”alert” A message with important, and usually time-sensitive, information. Your session will expire in 60 seconds. Note that I’ve included both role=”alert” and aria-live=”assertive” at the same time. These are synonymous attributes, but some screen readers only support one or the other. By using both simultaneously we therefore maximize the chances that the live region will function as expected. Source – Heydon Pickering ‘Some practical ARIA examples’ role=”alertdialog” A type of dialog that contains an alert message, where initial focus goes to an element within the dialog.
Warning
Your session will expire in 60 seconds. role=”application” A region declared as a web application, as opposed to a web document. In this example, the application is a simple calculator that might add two numbers together.
Calculator
+ = role=”article” A section of a page that consists of a composition that forms an independent part of a document, page, or site.
My first article
Lorem ipsum… You would use role=article on non-semantic elements (not recommended, invalid)
My first article
Lorem ipsum… W3C Entry for role=article role=”banner” A region that contains mostly site-oriented content, rather than page-specific content.
My Site
role=”button” An input that allows for user-triggered actions when clicked or pressed. Add role=”cell” A cell in a tabular container.
| 95 | 14 | 25 |
role=”checkbox”
A checkable input that has three possible values: true, false, or mixed.
I agree to the terms role=”columnheader” A cell containing header information for a column.
| Day 1 | Day 2 | Day 3 |
|---|
role=”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. Typically, you would use JavaScript to build the rest of the typeahead or list select functionality. role=”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.
More Articles
role=”contentinfo” A large perceivable region that contains information about the parent document.
Author: Albert Einstein
Published: August 15, 1940 role=”definition” A definition of a term or concept. Love an intense feeling of deep affection. role=”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.
Are you sure? Yes No role=”directory” A list of references to members of a group, such as a static table of contents.
role=”document” A region containing related information that is declared as document content, as opposed to a web application.
The Life of Albert Einstein
Lorem ipsum… role=”form” A landmark region that contains a collection of items and objects that, as a whole, combine to create a form. Using the semantically correct HTML element implies default ARIA semantics, meaning role=form is not required as you should not apply a contrasting role to an element that is already
semantic, as adding a role overrides the native semantics of an element. Setting an ARIA role and/or aria-* attribute that matches the default implicit ARIA semantics is unnecessary and is not recommended as these properties are already set by the browser. Login form Your username Your username is your email address Your password Was emailed to you when you signed up You would use role=form on non-semantic elements (not recommended, invalid) Sign up role=”grid” A grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table. role=”gridcell” A cell in a grid or treegrid.
| 17 |
64 18 role=”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. Previous Next role=”heading” A heading for a section of the page.
Introduction
Lorem ipsum… role=”img” A container for a collection of elements that form an image.
Two Three role=”listbox” A widget that allows the user to select one or more items from a list of choices.
- One
- Two
- Three
Typically, you would use JavaScript to build the multiple-selection functionality. role=”listitem” A single item in a list or directory.
- One
- Two
- Three
role=”log” A type of live region where new information is added in meaningful order and old information may disappear.
- User 1 logged in.
- User 2 logged in.
- User 1 logged out.
role=”main” The main content of a document.
Lorem ipsum… role=”marquee” A type of live region where non-essential information changes frequently.
- Dow +0.26%
- Nasdaq +0.54%
- S&P +0.44%
role=”math” Content that represents a mathematical expression.
role=”menu” A type of widget that offers a list of choices to the user.
- New
- Open
- Save
- Close
role=”menubar” A presentation of menu that usually remains visible and is usually presented horizontally.
- File
- Edit
- View
- Help
role=”menuitem” An option in a group of choices contained by a menu or menubar.
- File
- Edit
- View
- Help
role=”menuitemcheckbox” A checkable menuitem that has three possible values: true, false, or mixed.
Console Layout Word wrap role=”menuitemradio” A checkable menuitem in a group of menuitemradio roles, only one of which can be checked at a time.
- Left
- Center
- Right
role=”navigation” A collection of navigational elements (usually links) for navigating the document or related documents.
role=”note” A section whose content is parenthetic or ancillary to the main content of the resource.
Lorem ipsum…
Lorem ipsum…
Lorem ipsum… role=”option” A selectable item in a select list.
- Option 1
- Option 2
- Option 3
role=”presentation” An element whose implicit native role semantics will not be mapped to the accessibility API.
Some content on the left. Some content on the right role=”progressbar” An element that displays the progress status for tasks that take a long time. 25% role=”radio” A checkable input in a group of radio roles, only one of which can be checked at a time. One
Two
Three role=”region” A large perceivable section of a web page or document, that the author feels 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. Home team: 4
Away team: 2 role=”radiogroup” A group of radio buttons. One
Two
Three role=”row” A row of cells in a tabular container.
role=”rowgroup” A group containing one or more row elements in a grid.
role=”rowheader” A cell containing header information for a row in a grid.
| Day 1 | 65 |
|---|---|
| Day 2 | 74 |
role=”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. Lorem ipsum…
role=”search” A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility. Search role=”searchbox” A type of textbox intended for specifying search criteria. Search role=”separator” A divider that separates and distinguishes sections of content or groups of menuitems.
Lorem ipsum…
Lorem ipsum… role=”slider” A user input where the user selects a value from within a given range. role=”spinbutton” A form of range that expects the user to select from among discrete choices.
type=”number” value=”25″> role=”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. Online role=”switch” A type of checkbox that represents on/off values, as opposed to checked/unchecked values. On Off role=”tab” A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user.
- Introduction
- Chapter 1
- Chapter 2
role=”table” A section containing data arranged in rows and columns. The table role is intended for tabular containers which are not interactive. role=”tablist” A list of tab elements, which are references to tabpanel elements.
Introduction Chapter 1 Chapter 2 role=”tabpanel” A container for the resources associated with a tab, where each tab is contained in a tablist.
- Introduction
- Chapter 1
- Chapter 2
role=”textbox” Input that allows free-form text as its value. role=”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.
60 seconds remaining. role=”toolbar” A collection of commonly used function buttons represented in compact visual form.
role=”tooltip” A contextual popup that displays a description for an element. Slope y=mx+b
Typically, the tooltip would be hidden. Using JavaScript, the tooltip would be displayed after a delay when the user hovers over the element that it describes. role=”tree” A type of list that may contain sub-level nested groups that can be collapsed and expanded.
- Part 1
- Chapter 1
- Chapter 2
- Chapter 3
- Part 2
- Chapter 4
- Chapter 5
- Chapter 6
- Part 3
- Chapter 7
- Chapter 8
- Chapter 9
role=”treegrid” A grid whose rows can be expanded and collapsed in the same manner as for a tree. role=”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 treeitems.
- Part 1
- Chapter 1
- Chapter 2
- Chapter 3
- Part 2
Code program language 