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=”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.
role=”button”
An input that allows for user-triggered actions when clicked or pressed.
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 termsGoalKicker.com – HTML5 Notes for Professionals 100
role=”columnheader”
A cell containing header information for a column.
| Day 1 | Day 2 | Day 3 |
|---|
role=”gridcell”
A cell in a grid or treegrid.
| 17 | 64 | 18 |
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.
GoalKicker.com – HTML5 Notes for Professionals 108
role=”searchbox”
A type of textbox intended for specifying search criteria.
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.
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.
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.
Slopey=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 sublevel group of treeitems.
- Part 1
- Chapter 1
- Chapter 2
- Chapter 3
- Part 2
- Chapter 4
- Chapter 5
- Chapter 6
- Part 3
- Chapter 7
- Chapter 8
- Chapter 9