ARIA: Präsentationsrolle

Die presentation- und ihre Synonymrolle none entfernen die implizite ARIA-Semantik eines Elements, damit diese nicht im Zugänglichkeitsbaum sichtbar ist.

Der Inhalt des Elements bleibt für unterstützende Technologien verfügbar; es sind nur die Semantiken des Containers — und in einigen Fällen erforderliche zugeordnete Nachfahren —, die ihre Zuordnungen zur Zugänglichkeits-API nicht mehr offenlegen.

Beschreibung

Während ARIA hauptsächlich dazu verwendet wird, Semantik auszudrücken, gibt es einige Situationen, in denen es hilfreich ist, die Semantik eines Elements vor unterstützenden Technologien zu verbergen. Dies wird mit der presentation-Rolle oder ihrer Synonymrolle none erreicht, die angeben, dass ein Element nur zur Darstellung verwendet wird und daher keine Zugänglichkeitssemantiken besitzt.

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

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

Wird presentation oder none auf ein <table>-Element angewendet, erben die Nachfahren <caption>, <thead>, <tbody>, <tfoot>, <tr>, <th>, und <td> die Rolle und sind somit nicht für unterstützende Technologien sichtbar. Aber Elemente innerhalb der <th> und <td>-Elemente, einschließlich verschachtelter Tabellen, sind für unterstützende Technologien sichtbar.

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 verlangt, dass listitem-Elemente ein übergeordnetes list-Element haben. Während die <li>-Elemente in diesem Fall nicht für unterstützende Technologien sichtbar sind, sind Nachfahren dieser erforderlichen Elemente sichtbar. Wenn wir innerhalb eines dieser <li>-Elemente eine Liste verschachtelt hätten, wären sie für unterstützende Technologien sichtbar. Bei Elementen ohne erforderliche Kinder behalten alle innerhalb des Elements mit role="presentation" oder role="none" verschachtelten Elemente ihre Semantik. In diesem Fall sind die innerhalb dieser <li>-Elemente enthaltenen <a>-Elemente sichtbar.

Das <a> ist ein besonderer Fall. Seine Rolle wäre sichtbar gewesen, selbst wenn es direkt mit der presentation- oder none-Rolle belegt worden wäre. Browser ignorieren role="presentation" und role="none" bei fokussierbaren Elementen, einschließlich Links und Eingaben, oder bei allem, was ein tabindex-Attribut gesetzt hat. Browser ignorieren auch die Einbeziehung der Rolle, wenn eines der Elemente globale ARIA-Zustände und -Eigenschaften enthält, wie beispielsweise aria-describedby.

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

Zugeordnete WAI-ARIA-Rollen, -Zustände und -Eigenschaften

Keine. Wenn ein globaler ARIA-Zustand und eine -Eigenschaft gesetzt 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