LANDMARKS

Landmark Roles
The following roles are regions of the page intended as navigational landmarks. All of these roles inherit from the landmark base
type and, with the exception of application, all are imported from the Role Attribute.
JAWS announces the type and text of ARIA landmarks, and provides navigation to the next and previous landmark on the page
using the SEMICOLON and SHIFT+SEMICOLON quick navigation keys. In addition, pressing INSERT+CONTROL+SEMICOLON
should bring up a list of landmarks. (source: Freedom Scientific)
Role Description Analogous To
application A region declared as a web application, as opposed to a web document.
A section of a page that consists of a composition that forms an independent part of a

article <article>
document, page, or site.
<header>,
banner A region that contains mostly site-oriented content, rather than page-specific content. <div
id="header">
A supporting section of the document, designed to be complementary to the main content at a

complementary similar level in the DOM hierarchy, but remains meaningful when separated from the main <aside>
content.
contentinfo A large perceivable region that contains information about the parent document. <footer>
directory A list of references to members of a group, such as a static table of contents.
A region containing related information that is declared as document content, as opposed to a

document <body>
web application.
A landmark region that contains a collection of items and objects that, as a whole, combine to
form <form>
create a form. See related search
A type of live region where new information is added in meaningful order and old information
may disappear. See related marquee.
log
Note: Elements with the role log have an implicit aria-live value of polite.
<div
main The main content of a document. id="content">
<main>
A collection of navigational elements (usually links) for navigating the document or related
navigation <nav>
documents.
note A section whose content is parenthetic or ancillary to the main content of the resource.
A large perceivable section of a web page or document, that the author feels is important <div>,
region enough to be included in a page summary or table of contents, for example, an area of the page <frame>,
containing live sporting event statistics. <section>
A landmark region that contains a collection of items and objects that, as a whole, combine to
search
create a search facility. See related form.
A container whose content is advisory information for the user but is not important enough to
status justify an alert, often but not necessarily presented as a status bar. See related alert. <output>
Note: Elements with the role status have an implicit aria-live value of polite.
Widget Roles
The following roles act as standalone user interface widgets or as part of larger, composite widgets.
Role Description Analogous To
A message with important, and usually time-sensitive, information. See

related alertdialog and status.
alert alert()
Note: Elements with the role alert have an implicit aria-live value of
assertive.
A type of dialog that contains an alert message, where initial focus goes
alertdialog
to an element within the dialog. See related alert and dialog.
<button>, <input
An input that allows for user-triggered actions when clicked or pressed. type="submit">, <input
button
See related link. type="reset">, <input
type="image">
checkbox A checkable input that has three possible values: true, false, or mixed <input type="checkbox">
columnheader A cell containing header information for a column. <th scope="col">
A presentation of a select; usually similar to a textbox where users can <select>, HTML5<input> types
combobox type ahead to select an option, or type to enter arbitrary text as a new which provide suggestions
item in the list. See related listbox.
definition A definition of a term or concept.
A dialog is an application window that is designed to interrupt the

dialog current processing of an application in order to prompt the user to enter
information or require a response. See related alertdialog.
A list of references to members of a group, such as a static table of

directory
contents.
A grid is an interactive control which contains cells of tabular data

grid <table>
arranged in rows and columns, like a table.
gridcell A cell in a grid or treegrid. <td>
A set of user interface objects which are not intended to be included in a

group <fieldset>, <optgroup>
page summary or table of contents by assistive technologies.
<h1>, <h2>, etc. (aria-level must

heading A heading for a section of the page.
be set appropriately)
img A container for a collection of elements that form an image. <img>
An interactive reference to an internal or external resource that, when

link activated, causes the user agent to navigate to that resource. See related <a href...>, <area>
button.
list A group of non-interactive list items. See related listbox. <ul>, <ol>
<select>, <datalist> (when

A widget that allows the user to select one or more items from a list of
listbox aria-multiselectable set to false
choices. See related combobox and list. on listbox)
listitem A single item in a list or directory. <li>
A type of live region where non-essential information changes

frequently. See related log.
marquee
Note: Elements with the role marquee maintain the default aria-live
value of off.
math Content that represents a mathematical expression.
menu A type of widget that offers a list of choices to the user. <menu type="list">
A presentation of menu that usually remains visible and is usually

menubar
presented horizontally.
menuitem An option in a group of choices contained by a menu or menubar.
A checkable menuitem that has three possible values: true, false, or

menuitemcheckbox
mixed.
A checkable menuitem in a group of menuitemradio roles, only one of

menuitemradio
which can be checked at a time.
option A selectable item in a select list. <option>
An element whose implicit native role semantics will not be mapped to

presentation alt=""
the accessibility API.
An element that displays the progress status for tasks that take a long
time.
progressbar <progress>
Note: Elements with the role progressbar have an implicit aria-readonly
value of true.
A checkable input in a group of radio roles, only one of which can be

radio <input type="radio">
checked at a time.
radiogroup A group of radio buttons.
row A row of cells in a grid. <tr>
rowgroup A group containing one or more row elements in a grid. <thead>, <tfoot>, <tbody>
rowheader A cell containing header information for a row in a grid. <th scope="row">
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.
scrollbar
Note: Elements with the role scrollbar have an implicit aria-orientation
value of vertical.
A divider that separates and distinguishes sections of content or groups

separator <hr>
of menuitems.
slider A user input where the user selects a value from within a given range. <input type="range">
A form of range that expects the user to select from among discrete input element with a type
spinbutton
choices. attribute in the Number state
tab A grouping label providing a mechanism for selecting the tab content
that is to be rendered to the user.
tablist A list of tab elements, which are references to tabpanel elements.
A container for the resources associated with a tab, where each tab is
tabpanel
contained in a tablist.
<input type="text"> (and other
text-like inputs, such as

textbox Input that allows free-form text as its value.
'password', 'email', etc.).
<textarea>
A type of live region containing a numerical counter which indicates an

timer amount of elapsed time from a start point, or the time remaining until an
end point.
A collection of commonly used function buttons represented in compact

toolbar <menu type="toolbar">
visual form.
tooltip A contextual popup that displays a description for an element.
A type of list that may contain sub-level nested groups that can be
tree
collapsed and expanded.
A grid whose rows can be expanded and collapsed in the same manner as
treegrid
for a tree.
An option item of a tree. This is an element within a tree that may be

treeitem
expanded or collapsed if it contains a sub-level group of treeitems.
States & Properties

Potential Value Types
Value Description
true/false Value representing either true or false, with a default "false" value.
Value representing true or false, with an intermediate "mixed" value. Default value is "false" unless
tristate
otherwise specified.
Value representing true or false, with a default "undefined" value indicating the state or property is not
true/false/undefined
relevant.
ID reference Reference to the ID of another element in the same document
ID reference list A list of one or more ID references.
integer A numerical value without a fractional component.
number Any real numerical value.
string Unconstrained value type.
token token list
Global States & Properties
Some states and properties are applicable to all host language elements regardless of whether a role is applied. The following global
states and properties are supported by all roles and by all base markup elements. They are marked as such below.
Widget Attributes
Attribute Description Value Applicable Role(s) Analogous To

token:
aria- Indicates whether user input completion inline combobox

autocomplete suggestions are provided. list textbox
both
none
tristate:
'checked'
Indicates the current "checked" state of
aria-checked true attribute on
checkboxes, radio buttons, and other widgets. See option
(state) false <command>,
related aria-pressed and aria-selected.
mixed <input>
undefined
Indicates that the element is perceivable but

aria-disabled disabled, so it is not editable or otherwise <input
true/false
(state) (global) operable. See related aria-hidden and aria- disabled>
readonly.
button
document
Indicates whether the element, or another link 'open'
aria-expanded section
grouping element it controls, is currently true/false/undefined attribute on
(state) sectionhead
expanded or collapsed. <details>
separator
window
aria-haspopup Indicates that the element has a popup context 'contextmenu'

true/false
(global) menu or sub-level menu. attribute
Indicates that the element and all of its 'hidden' value

aria-hidden descendants are not visible or perceivable to any on type
true/false
(state) (global) user as implemented by the author. See related attribute for
aria-disabled. <input>
token
aria-invalid Indicates the entered value does not conform to grammar

(state) (global) the format expected by the application. false
spelling
true
<label>, 'title'
aria-label Defines a string value that labels the current
string attribute, 'alt'
(global) element. See related aria-labelledby.
attribute
grid
heading
Defines the hierarchical level of an element listitem
aria-level integer
within a structure. row
tablist
Indicates whether a text box accepts multiple textbox

aria-multiline true/false
lines of input or only a single line.
grid
aria- Indicates that the user may select more than one listbox <select
multiselectable item from the current selectable descendants. true/false multiple>
tree
token scrollbar
aria- Indicates whether the element and orientation is separator
orientation horizontal or vertical. vertical slider
horizontal
tristate
Indicates the current "pressed" state of toggle
aria-pressed true button
buttons. See related aria-checked and aria-
(state) false
selected.
mixed
undefined
grid
Indicates that the element is not editable, but is gridcell <input
aria-readonly true/false
otherwise operable. See related aria-disabled. textbox readonly>
combobox
gridcell 'required'
listbox attribute on
Indicates that user input is required on the radiogroup
aria-required true/false <input>,
element before a form may be submitted. spinbutton <select>,
textbox <textarea>
tree
gridcell
Indicates the current "selected" state of various
aria-selected widgets. See related aria-checked and aria- true/false/undefined option <option
(state) pressed. row selected>
tab
token
Indicates if items in a table or grid are sorted in ascending columnheader

aria-sort rowheader
ascending or descending order. descending
none
other
Defines the maximum allowed value for a range range

aria-valuemax number
widget.
Defines the minimum allowed value for a range range

aria-valuemin number
widget.
Defines the current value for a range widget. See range

aria-valuenow number
related aria-valuetext.
Defines the human readable text alternative of range

aria-valuetext string
aria-valuenow for a range widget.
Live Region Attributes
Live regions are perceivable regions of a web page that are typically updated as a result of an external event when user focus may
be elsewhere. These regions are not always updated as result of a user interaction. This practices has become common place with
the growing use of Ajax. Examples of live regions are a chat log, stock ticker, or a sport scoring section that updates periodically to
reflect game statistics. Since these asynchronous areas are expected to update outside the user's area of focus, assistive
technologies such as screen readers have either been unaware of their existence or unable to process them for the user. WAI-ARIA
has provided a collection of properties that allow the author to identify these live regions and how to process them: aria-live, aria-
relevant, aria-atomic, and aria-busy.
Applicable
Attribute Description Value
Role(s)
aria- Indicates whether assistive technologies will present all, or only parts of, the changed
atomic region based on the change notifications defined by the aria-relevant attribute. See true/false
(global) related aria-relevant.
aria-busy
(state) Indicates whether an element, and its subtree, are currently being updated true/false
(global)
token
aria-live Indicates that an element will be updated, and describes the types of updates the
off
(global) user agents, assistive technologies, and user can expect from the live region.
polite
assertive
token list
additions
aria-
Indicates what user agent change notifications (additions, removals, etc.) assistive removals
relevant
technologies will receive within a live region. See related aria-atomic. text
(global)
all
additions
text
Drag and Drop Attributes
Applicable
Attribute Description Value
Role(s)
token list:
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 copy
aria-
options available to users, including whether a pop-up menu of choices is move
dropeffect
provided by the application. Typically, drop effect functions can only be provided link
(global)
once an object has been grabbed for a drag operation as the drop effect functions execute
available are dependent on the object being dragged. popup
none
aria-
grabbed
Indicates an element's "grabbed" state in a drag-and-drop operation. true/false/undefined
(state)
(global)
Relationship Attributes
Applicable
Attribute Description Value Analogous To
Role(s)
Identifies the currently active descendant of a composite composite

aria- ID
widget. Used to deal with multiple focusable children, ie. in a group
activedescendant Reference
tree menu textbox
Identifies the element (or elements) whose contents or ID
aria-controls
presence are controlled by the current element. See related Reference
(global)
aria-owns. Announced for form controls List
ID <label>
aria-describedby Identifies the element (or elements) that describes the object.
Reference <th>
(global) See related aria-labelledby.
List
Identifies the next element (or elements) in an alternate

ID
aria-flowto reading order of content which, at the user's discretion,
Reference
(global) allows assistive technology to override the general default of
List
reading in document source order.
ID
aria-labelledby Identifies the element (or elements) that labels the current
Reference
(global) element. See related aria-label and aria-describedby.
List
Identifies an element (or elements) in order to define a visual,

ID
aria-owns functional, or contextual parent/child relationship between
Reference
(global) DOM elements where the DOM hierarchy cannot be used to
List
represent the relationship. See related aria-controls.
Defines an element's number or position in the current set of

aria-posinset listitems or treeitems. Not required if all elements in the set integer
are present in the DOM. See related aria-setsize.
Defines the number of items in the current set of listitems or

listitem
aria-setsize treeitems. Not required if all elements in the set are present integer option
in the DOM. See related aria-posinset.

LANDMARKS

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

LANDMARKS

Hochgeladen von

Copyright:

Verfügbare Formate

Landmark Roles

Role Description Analogous To

application A region declared as a web application, as opposed to a web document.

A section of a page that consists of a composition that forms an independent part of a

A supporting section of the document, designed to be complementary to the main content at a

A region containing related information that is declared as document content, as opposed to a

main The main content of a document. id="content">

Role Description Analogous To

A message with important, and usually time-sensitive, information. See

columnheader A cell containing header information for a column. <th scope="col">

definition A definition of a term or concept.

A dialog is an application window that is designed to interrupt the

A list of references to members of a group, such as a static table of

A grid is an interactive control which contains cells of tabular data

gridcell A cell in a grid or treegrid. <td>

A set of user interface objects which are not intended to be included in a

<h1>, <h2>, etc. (aria-level must

img A container for a collection of elements that form an image. <img>

An interactive reference to an internal or external resource that, when

<select>, <datalist> (when

listitem A single item in a list or directory. <li>

A type of live region where non-essential information changes

math Content that represents a mathematical expression.

A presentation of menu that usually remains visible and is usually

menuitem An option in a group of choices contained by a menu or menubar.

A checkable menuitem that has three possible values: true, false, or

A checkable menuitem in a group of menuitemradio roles, only one of

option A selectable item in a select list. <option>

An element whose implicit native role semantics will not be mapped to

A checkable input in a group of radio roles, only one of which can be

radiogroup A group of radio buttons.

row A row of cells in a grid. <tr>

A graphical object that controls the scrolling of content within a viewing

A divider that separates and distinguishes sections of content or groups

tablist A list of tab elements, which are references to tabpanel elements.

<input type="text"> (and other

text-like inputs, such as

A type of live region containing a numerical counter which indicates an

A collection of commonly used function buttons represented in compact

tooltip A contextual popup that displays a description for an element.

An option item of a tree. This is an element within a tree that may be

States & Properties

ID reference Reference to the ID of another element in the same document

ID reference list A list of one or more ID references.

integer A numerical value without a fractional component.

number Any real numerical value.

string Unconstrained value type.

token token list

Global States & Properties

Attribute Description Value Applicable Role(s) Analogous To

aria- Indicates whether user input completion inline combobox

Indicates that the element is perceivable but

aria-haspopup Indicates that the element has a popup context 'contextmenu'

Indicates that the element and all of its 'hidden' value

aria-invalid Indicates the entered value does not conform to grammar

Indicates whether a text box accepts multiple textbox

Indicates if items in a table or grid are sorted in ascending columnheader

Defines the maximum allowed value for a range range

Defines the minimum allowed value for a range range

Defines the current value for a range widget. See range

Defines the human readable text alternative of range

Live Region Attributes

Identifies the currently active descendant of a composite composite