ARIA: Präsentationsrolle

Die presentation-Rolle und ihr Synonym none entfernen implizite ARIA-Semantik eines Elements, sodass diese nicht im Barrierefreiheitsbaum sichtbar wird.

Der Inhalt des Elements wird nach wie vor für unterstützende Technologien verfügbar sein; lediglich die Semantik des Containers – und in manchen Fällen erforderliche zugehörige Nachfahren – wird ihre Zuordnungen zur Zugänglichkeits-API nicht mehr offenlegen.

Beschreibung

Während ARIA hauptsächlich verwendet wird, um Semantik auszudrücken, gibt es einige Situationen, in denen es hilfreich ist, die Semantik eines Elements vor assistiven Technologien zu verbergen. Dies wird mit der presentation-Rolle oder ihrer synonymen Rolle none erreicht, die erklären, dass ein Element nur zur Präsentation verwendet wird und daher keine Zugänglichkeits-Semantik hat.

Das Schreiben von <h2 role="presentation">Democracy Dies in Darkness</h2> entfernt die Überschrift-Semantik des h2-Elements, was es dem Äquivalent von <div>Democracy Dies in Darkness</div> gleichstellt. Die Semantik der Überschriftenrolle wird entfernt, aber der Inhalt selbst bleibt verfügbar.

Wenn ein Element erforderliche Nachfahren hat, wie die verschiedenen <table>-Elemente und <li>-Kinder eines <ul> oder <ol>, entfernt die presentation- oder none-Rolle bei der Tabelle oder Liste die Standardsemantik des Elements, auf das sie angewendet wird, sowie deren erforderliche Nachfahrenelemente.

Wird die presentation- oder none-Rolle auf ein <table>-Element angewendet, erben die Nachfahren <caption>, <thead>, <tbody>, <tfoot>, <tr>, <th> und <td> die Rolle und werden somit nicht an assistive Technologien weitergegeben. Aber Elemente innerhalb der <th>- und <td>-Elemente, einschließlich verschachtelter Tabellen, werden assistiven Technologien zugänglich gemacht.

html
<ul role="presentation">
  <li>
    <a href="#">Link 1</a>
  </li>
  <li>
    <a href="#">Link 2</a>
  </li>
  <li>
    <a href="#">Link 3</a>
  </li>
</ul>

Da die presentation-Rolle auf das <ul>-Element angewendet wurde, erbt jedes Kind-<li>-Element die presentation-Rolle. Dies liegt daran, dass ARIA erfordert, dass die listitem-Elemente ein übergeordnetes list-Element haben. Während die <li>-Elemente in diesem Fall nicht für assistive Technologien sichtbar sind, sind Nachfahren dieser erforderlichen Elemente sichtbar. Hätten wir eine Liste innerhalb eines dieser <li>s verschachtelt, wäre diese für assistive Technologien sichtbar. Bei Elementen ohne erforderliche Kinder behalten alle Elemente, die innerhalb des Elements mit role="presentation" oder role="none" verschachtelt sind, ihre Semantik. In diesem Fall sind die <a>-Elemente, die innerhalb dieser <li>-Elemente enthalten sind, sichtbar.

Das <a>-Element ist ein Sonderfall. Seine Rolle wäre auch dann sichtbar, wenn direkt die presentation- oder none-Rolle darauf angewendet worden wäre. Browser ignorieren role="presentation" und role="none" bei fokussierbaren Elementen, einschließlich Links und Eingaben, oder allem mit einem tabindex-Attribut. Browser ignorieren auch die einbezogene Rolle, wenn eines der Elemente globale ARIA-Zustände und Eigenschaften enthält, wie z.B. aria-describedby.

Hinweis: Das Element mit role="presentation" ist kein Teil des Barrierefreiheitsbaums und sollte keinen zugänglichen Namen haben. Verwenden Sie nicht aria-labelledby oder aria-label.

Zugehörige WAI-ARIA-Rollen, Zustände und Eigenschaften

Keine. Wenn ein globaler ARIA-Zustand und eine Eigenschaft festgelegt sind, werden presentation oder none ignoriert und die implizite Rolle des Elements wird verwendet.

Beispiele

html
<hr role="none" />

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# presentation

Siehe auch