ARIA: Rolle figure

Ein figure ist ein wahrnehmbarer Abschnitt von Inhalt, der typischerweise ein grafisches Dokument, Bilder, Code-Snippets oder Beispieltext enthält. Die Teile eines Bilds KÖNNEN vom Benutzer navigierbar sein. Jeder Inhalt, der zusammengefasst und als Bild konsumiert werden soll (was Bilder, Videos, Audios, Code-Snippets oder anderen Inhalt einschließen könnte), kann als Bild mit role="figure" identifiziert werden.

<div role="figure" aria-labelledby="caption">
  <img src="image.png" alt="put image description here" />
  <p id="caption">Figure 1: The caption</p>
</div>

Im obigen Beispiel haben wir eine Abbildung, die aus zwei separaten Inhaltselementen besteht — einem Bild und einer Beschriftung. Dies wird durch ein <div>-Element umschlossen, das den Inhalt als Bild identifiziert, indem es role="figure" verwendet.

Für HTML verwenden Sie die Elemente <figure> und <figcaption>. Die figcaption dient als zugänglicher Name für das Bild. Wenn Sie kein HTML verwenden oder bestehendes HTML nachträglich anpassen, verwenden Sie aria-labelledby auf dem Bild und verweisen auf die Bildunterschrift. Wenn keine sichtbare Bildunterschrift vorhanden ist, kann aria-label verwendet werden.

<div role="figure" aria-labelledby="figure-1">
  …
  <p id="figure-1">Text that describes the figure.</p>
</div>

• Verwenden Sie aria-labelledby, wenn der Text ein prägnantes Label ist.
• Verwenden Sie aria-describedby, wenn der Text eine längere Beschreibung ist.
• Verwenden Sie aria-label, wenn keine sichtbare Bildunterschrift vorhanden ist.

Dies kann semantisch, ohne ARIA, mit dem HTML-Element <figure> zusammen mit <figcaption> umgesetzt werden.

<figure>
  <img src="image.png" alt="put image description here" />
  <figcaption>Figure 1: The caption</figcaption>
</figure>

aria-describedby

Die ID eines Elements, das Referenztext enthält, der als Beschriftung dient.

aria-labelledby

Die ID eines Elements, das Text enthält, der als Label dient.

aria-label

Wenn kein Element vorhanden ist, das Text enthält, der als Label dienen könnte, können Sie das Label direkt als Wert der aria-label zum Element mit der figure-Rolle oder zum <figure>-Element hinzufügen.

Keine spezifschen Tastaturinteraktionen für diese Rolle.

Keine spezifischen JavaScript-Anforderungen für diese Rolle. Wenn Sie keine Kontrolle über die HTML-Semantik haben, können Sie die Zugänglichkeit von HTML verbessern, indem Sie diese Rollen und Eigenschaften mit JavaScript hinzufügen.

Wir könnten das anfängliche Beispiel auf der Seite erweitern, um auch einen Absatz zu identifizieren, der ein beschreibendes Label für das Bild durch Referenzierung seiner ID in aria-labelledby bereitstellt:

<div role="figure" aria-labelledby="figure-1">
  <img
    src="diagram.png"
    alt="diagram showing the four layers of awesome and their relative priority order —
        music, cats, nature, and ice cream" />
  <pre>
`
        let awesome = ['music', 'cats', 'nature', 'ice cream'];
      `</pre
  >
  <p id="figure-1">Figure 1: The four layers of awesome.</p>
</div>

Verwenden Sie role="figure" nur, wenn es notwendig ist — zum Beispiel, wenn Sie keine Kontrolle über Ihr HTML haben, aber in der Lage sind, die Zugänglichkeit dynamisch im Nachhinein mit JavaScript zu verbessern.

Wenn möglich, sollten Sie die entsprechenden semantischen HTML-Elemente verwenden, um ein Bild und seine Beschriftung zu markieren — <figure> und <figcaption>. Zum Beispiel sollte unser obiges Beispiel wie folgt umgeschrieben werden:

<figure>
  <img
    src="diagram.png"
    alt="diagram showing the four layers of awesome and their relative priority order —
         music, cats, nature, and ice cream" />
  <pre>
`
    let awesome = ['music', 'cats', 'nature', 'ice cream'];
  `</pre
  >
  <figcaption>Figure 1: The four layers of awesome.</figcaption>
</figure>

• Accessibility Object Model
• ARIA in HTML
• HTML <figure>-Element
• HTML <figcaption>-Element