ARIA: Rolle `suggestion`

Die Rolle suggestion bezeichnet semantisch eine einzelne vorgeschlagene Änderung in einem bearbeitbaren Dokument. Diese Rolle sollte auf ein Element angewendet werden, das ein Element mit der Rolle insertion und eines mit der Rolle deletion umschließt.

Beispiele

Wenn Sie eine Inhaltsänderung haben, die eine Einfügung und eine Löschung umfasst, gibt es für Benutzer von Screenreadern keine Möglichkeit zu erkennen, ob die beiden miteinander verbunden sind. Hier kommt role="suggestion" ins Spiel, das auf ein Element gesetzt werden sollte, das beide umschließt, wie folgt:

html

<p>
  Freida's pet is a
  <span role="suggestion">
    <span role="deletion">black Cat called Luna</span>
    <span role="insertion">purple T. Rex called Tiny</span></span
  >.
</p>

Wir könnten sogar eine Informationsbox bereitstellen, die angibt, wer den Vorschlag gemacht hat und wann, und diese über aria-details mit dem Vorschlag verknüpfen:

html

<p>
  Freida's pet is a
  <span role="suggestion" aria-details="comment-source">
    <span role="deletion">black Cat called Luna</span>
    <span role="insertion">purple T. Rex called Tiny</span></span
  >.
</p>

<div id="comment-source">
  Suggested by Chris,
  <time datetime="2019-03-30T19:29">March 30 2019, 19:29</time>
</div>

Browser neigen dazu, standardmäßig eine schwarze Durchstreichung für Löschungen und eine schwarze Unterstreichung für Einfügungen bereitzustellen, wenn HTML-Elemente verwendet werden, die diese Rollen implizit offenlegen. Bei der Verwendung expliziter ARIA-Rollen, um HTML-Elemente wie divs zu modifizieren, müssen Sie jedoch CSS verwenden, um das visuelle Styling für solche Löschungen und Einfügungen anzupassen.

ARIA: Rolle `suggestion`

Beispiele

Best Practices

Bevorzugen Sie HTML

Spezifikationen