ARIA Roles

27. Juni 2018

Bedeutung von ARIA Roles

ARIA steht für Accessible Rich Internet Applications. Sie werden von der Web Accessibility Initiative (WAI) des World Wide Web Consortium entwickelt. Es handelt sich dabei um einen Standard, der explizit das Arbeiten mit assistierenden Technologien unterstützen soll.

Was etwas auf einer Webseite ist, wozu es dient und in welchem Zustand es sich befindet, ist visuell intuitiv verständlich, sofern die grafische Darstellung einer Webseite und ihrer Elemente nicht ganz blöd gemacht ist. Für Screen Reader hingegen müssen Name, Rolle (role) und Zustand (state) technisch wahrnehmbar gemacht werden.

In HTML genügt es oft schon, das richtige Markup Element zu verwenden, um dem Screen Reader Namen, Rolle und Zustand verständlich zu machen. Für Fälle, in denen dies nicht gewährleistet ist, wurden für mögliche Rollen von Seitenelementen von der WAI die ARIA Roles entwickelt.

Verwendung der ROLE-Attribute

Allgemeine Hinweise zur Verwendung von ARIA Roles

Ich fasse hier die wesentlichen normativen Hinweise der WAI zusammen.

Wenn vorhanden, sollten Elemente mit inhärenter Semantik verwendet werden. In HTML etwa sollte <p> verwendet werden und nicht <div role="paragraph">.
Die Rolle eines Elements darf sich nicht zeitbasiert oder durch Aktionen der User ändern. Assistierende Technologien sind darauf noch nicht gefasst (Stand 2016). Um die Rolle eines Elements zu ändern muss das Element samt aller Kindelemente gelöscht werden, und durch das gewünschte neue Element mit der entsprechenden Rolle eingefügt werden.

[W3C] The Roles Model

Verwendung von ARIA in HTML

Grundsätzlich sollte ARIA nicht zu HTML-Markup hinzugefügt werden, wenn dieses schon die gewünschte Semantik impliziert:

<button role="button">

Schon gar nicht sollte ARIA eingesetzt werden, um die HTML-Semantik umzudeuten:

<button role="link">

Leider verhalten sich Screen Readern gelegentlich merkwürdig, sodass eine Ergänzung von Attributen oder Umdeutung von Elementen durch ARIA notwendig erscheint:

aria-required scheint von Screen Readern besser unterstützt zu werden als das HTML5 Attribut required.
Voice Over fügt Formularelementen mit dem Typ range automatisch ein % an. Um das zu vermeiden, kann role="text" verwendet werden.

Alphabetische Liste verfügbarer ARIA Rollen [in Aufbau]

alert: A type of live region 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 .
application: A structure containing one or more focusable elements requiring user input, such as keyboard or gesture events, that do not follow a standard interaction pattern supported by a widget role.
article: A section of a page that consists of a composition that forms an independent part of a document, page, or site.
banner: A region that contains mostly site-oriented content, rather than page-specific content.
button: An input that allows for user-triggered actions when clicked or pressed. See related link .
cell: A cell in a tabular container. See related gridcell .
checkbox: A checkable input that has three possible values XX: true, false, or mixed.
columnheader: A cell containing header information for a column.
combobox: A composite widget containing a single-line textbox and another element, such as a listbox or grid , that can dynamically pop up to help the user set the value of the textbox .
command (abstract role): A form of widget that performs an action but does not receive input data.
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.
composite (abstract role): A widget that may contain navigable descendants or owned children.
contentinfo: A large perceivable region that contains information about the parent document.
definition: A definition of a term or concept. See related term .
dialog: A dialog is a descendant window of the primary window of a web application. For HTML pages, the primary application window is the entire web document, i.e., the body element.
directory: A list of references to members of a group, such as a static table of contents.
document: An element containing content that assistive technology users may want to browse in a reading mode.
feed: A scrollable list of articles where scrolling may cause articles to be added to or removed from either end of the list.
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.
form: A landmark region that contains a collection of items and objects that, as a whole, combine to create a form. See related search .
grid: A composite widget containing a collection of one or more rows with one or more cells where some or all cells in the grid are focusable by using methods of two-dimensional navigation, such as directional arrow keys.
gridcell: A cell in a grid or treegrid .
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: A container for a collection of elements that form an image.
input (abstract role): A generic type of widget that allows user input.
landmark (abstract role): A perceivable section containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Such a page summary could be generated dynamically by a user agent or assistive technology.
link: An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. See related button .
list: A section containing listitem elements. See related listbox .
listbox: A widget that allows the user to select one or more items from a list of choices. See related combobox and list .
listitem: A single item in a list or directory.
log: A type of live region where new information is added in meaningful order and old information may disappear. See related marquee .
main: The main content of a document.
marquee: A type of live region where non-essential information changes frequently. See related log .
math: Content that represents a mathematical expression.
menu: A type of widget that offers a list of choices to the user.
menubar: A presentation of menu that usually remains visible and is usually presented horizontally.
menuitem: An option in a set of choices contained by a menu or menubar .
menuitemcheckbox: A menuitem with a checkable state whose possible values XX are true, false, or mixed.
menuitemradio: A checkable menuitem in a set of elements with the same role, only one of which can be checked at a time.
navigation: A collection of navigational elements (usually links) for navigating the document or related documents.
none: An element whose implicit native role semantics will not be mapped to the accessibility API . See synonym presentation .
note: A section whose content is parenthetic or ancillary to the main content of the resource.
option: A selectable item in a select list.
presentation: An element whose implicit native role semantics will not be mapped to the accessibility API . See synonym none .
progressbar: An element that displays the progress status for tasks that take a long time.
radio: A checkable input in a group of elements with the same role, only one of which can be checked at a time.
radiogroup: A group of radio buttons.
range (abstract role): An input representing a range of values that can be set by the user.
region: A perceivable section containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Such a page summary could be generated dynamically by a user agent or assistive technology.
roletype (abstract role): The base role from which all other roles in this taxonomy inherit.
row: A row of cells in a tabular container.
rowgroup: A structure containing one or more row elements in a tabular container.
rowheader: A cell containing header information for a row in a grid.
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.
search: A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility. See related form and searchbox .
searchbox: A type of textbox intended for specifying search criteria. See related textbox and search .
section (abstract role): A renderable structural containment unit in a document or application.
sectionhead (abstract role): A structure that labels or summarizes the topic of its related section.
select (abstract role): A form widget that allows the user to make selections from a set of choices.
separator: A divider that separates and distinguishes sections of content or groups of menuitems.
slider: A user input where the user selects a value from within a given range.
spinbutton: A form of range that expects the user to select from among discrete choices.
status: A type of live region 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.
structure (abstract role): A document structural element .
switch: A type of checkbox that represents on/off values, as opposed to checked/unchecked values. See related checkbox .
tab: A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user.
table: A section containing data arranged in rows and columns. See related grid .
tablist: A list of tab elements , which are references to tabpanel elements.
tabpanel: A container for the resources associated with a tab , where each tab is contained in a tablist .
term: A word or phrase with a corresponding definition. See related definition .
textbox: A type of input that allows free-form text as its value.
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.
toolbar: A collection of commonly used function buttons or controls represented in compact visual form.
tooltip: A contextual popup that displays a description for an element.
tree: A type of list that may contain sub-level nested groups that can be collapsed and expanded.
treegrid: A grid whose rows can be expanded and collapsed in the same manner as for a tree .
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 tree item elements.
widget (abstract role): An interactive component of a graphical user interface ( GUI ).
window (abstract role): A browser or application window.

W3C ARIA 1.1 Spezifikation

Seitenbereiche kennzeichnen mit ARIA Roles

Landmark Roles - Die maßgeblichen Bereiche einer Webseite

Landmark Roles sind Attribute für ganze Seitenbereiche, die überwiegend die Navigation für Screen Reader erleichtern. Die Bedeutung und Verwendung erarbeite ich im in der obigen Überschrift verlinkten eigenen Webartikel.

`group` – Kennzeichnen eines kleinen Bereichs von Funktionalitäten

Mit dem Attribut role="group" wird ein Bereich mit Bedienungselementen (User Interface Objects) gekennzeichnet. Die Verwendung ist mit fieldset in HTML vergleichbar.

Als Faustregel zur Abgrenzung von role="region" gilt, dass der Bereich nicht so wichtig sein sollte, dass er gegebenenfalls auch in einem Inhaltsverzeichnis angeführt werden müsste.

Das Attribut liefert nur die semantische Information und noch keine Beschriftung, wie es etwa in einem fieldset mit dem Element legend realisiert werden kann. Eine vergleichbare Beschriftung muss daher gewährleistet werden, auf die gegebenenfalls auch mit aria-describedby referenziert werden kann.

menubar - Das Hauptmenü einer Webanwendung

Menüs sind Bedienungselemente in Webanwendungen (Applications). Die ARIA Rollen müssen in einfachen Navigationsbereichen, die mit HTML realisiert sind, nicht angewendet werden.

Ein Menü besteht üblicherweise aus einem Hauptmenü, das immer sichtbar ist, und Unterpunkten zu den einzelnen Hauptmenüpunkten. Die einzelnen Unterpunkte sollten konsistent in der Erscheinung und der Anordnung verbleiben. Das Hauptmenü ist im englischen die menu bar.

Typischerweise wird eine Menu Bar am Bildschirm horizontal dargestellt, ähnlich wie Hauptmenüpunkte in einer Desktop Anwendung.

Links zu menubar

`presentation / none` - Verbergen der HTML-Semantik eines Elements

Mittels des Attributs role="presentation" kann für Screen Reader die natürliche (HTML)-Semantik verborgen werden. Dies ist insbesondere zweckmäßig, wenn die Semantik nur der visuellen Formatierung dient, etwa bei Layout-Tabellen .

Seit ARIA 1.1 steht auch role="none" mit exakt derselben Funktion zur Verfügung. Dadurch sollte die Verwirrung beseitigt werden, die durch den Ausdruck Präsentation vielfach entsteht. Solange die Implementierung von ARIA 1.1 noch nicht sicher gewährleistet ist, empfiehlt die W3C jedoch role="presentation" zu verwenden. (Stand Juni 2018)

Ich habe die Beobachtung gemacht, dass das Attribut keine Wirkung auf Formularelemente hat.

separator - Trennlinien

Was aus HTML als HR-Tag bekannt ist, kann mit role="separator" realisiert und sogar dynamisiert werden. Die Zweckmäßigkeit des Einsatzes sollte jedoch auf dem Hintergrund der visuellen und technischen Anforderungen gut reflektiert werden.

Seite in Aufbau

Sie werden bemerken, dass diese Seite noch nicht fertig ist. Inhalte und Funktionalitäten sind noch nicht gänzlich verfügbar. Sie können aber gerne um die Baustelle herumgehen und den Fortschritt beobachten. Das Betreten der Baustelle ist erlaubt und völlig ungefährlich!