Zustand Widget-Zustand

`aria-readonly`

Gibt an, dass der Wert eines Formularsteuerelements nicht bearbeitet werden kann, das Steuerelement jedoch weiterhin bedienbar ist — fokussierbar, kopierbar und beim Absenden des Formulars übermittelt. Unterscheidet sich von aria-disabled, das das Steuerelement inoperabel macht.

Verwendung

Auf einem Formularsteuerelement, dessen Wert der Benutzer sehen und kopieren, aber nicht ändern kann — eine Bestellübersichtszeile, die nicht bearbeitet werden soll, der Kommentar eines Prüfers in einem mehrstufigen Genehmigungsverfahren oder eine generierte Kennung. Der Benutzer kann weiterhin per Tab-Taste dorthin navigieren, den Text markieren und lesen; das Formular übermittelt den Wert beim Absenden.

Bei Verwendung von <input>, <textarea> oder <select> übernimmt das HTML-Attribut readonly dies nativ und ist zu bevorzugen. aria-readonly kommt bei benutzerdefinierten Widgets zum Einsatz: role="combobox", role="grid", role="listbox", role="slider", role="spinbutton" und role="textbox" (benutzerdefiniert).

Im Vergleich mit verwandten Zuständen:

aria-readonly — fokussierbar, Wert sichtbar und kopierbar, Wert wird übermittelt, Wert kann nicht geändert werden.
aria-disabled — fokussierbar (bleibt in der Tab-Reihenfolge), reagiert jedoch nicht auf Eingaben und wird üblicherweise nicht übermittelt.
HTML disabled — vollständig aus der Tab-Reihenfolge entfernt, ignoriert, nicht übermittelt.
aria-hidden — aus dem Barrierefreiheitsbaum entfernt; dies dient einem anderen Zweck.

Die Wahl zwischen schreibgeschützt und deaktiviert ist semantisch: Schreibgeschützt bedeutet „gültiger Wert, der sichtbar ist“, deaktiviert bedeutet „derzeit nicht relevant“.

Synchron halten

Gültige Werte sind "true" und "false". Standardmäßig "false" (oder weglassen) bei bearbeitbaren Steuerelementen; auf "true" wechseln, wenn das Feld schreibgeschützt wird.

Wenn aria-readonly="true" gesetzt ist:

Das Steuerelement muss fokussierbar bleiben. tabindex="-1" darf nicht zusätzlich gesetzt werden.
Klick- und Tastatur-Handler dürfen den Wert nicht ändern. Das Markieren und Kopieren von Text muss weiterhin funktionieren.
Das Feld sollte so gestaltet sein, dass der schreibgeschützte Zustand optisch von einem bearbeitbaren Feld unterscheidbar ist — üblicherweise durch einen anderen Hintergrund, keinen Cursor und keine Hover-Affordanz.

Häufige Fehler

aria-readonly auf einem nativen <input> setzen, obwohl bereits das HTML-Attribut readonly verwendet wird. Das native Attribut ist ausreichend; die Duplikation kann zu Inkonsistenzen führen.
aria-readonly auf einem Nicht-Formularelement wie <p> oder <div> verwenden — der Zustand hat dort keine Bedeutung.
aria-readonly="true" und aria-disabled="true" gleichzeitig setzen. Eines davon sollte gewählt werden, je nachdem ob das Feld „gültig, aber gesperrt“ oder „derzeit ignorieren“ bedeutet.
Ein schreibgeschütztes Feld unfokussierbar machen (mit tabindex="-1") — Screenreader-Nutzer können es dann nicht mehr erreichen, um den Wert zu lesen.
Das schreibgeschützte Feld visuell ausblenden, es aber in der Tab-Reihenfolge belassen.

Beispiel

<label for="order-id">Order ID</label>
<input
  id="order-id"
  type="text"
  value="ORD-83472"
  readonly
>

<!-- Custom widget where the native attribute isn't available -->
<div
  role="textbox"
  tabindex="0"
  aria-readonly="true"
  aria-label="Generated reference"
>
  ORD-83472
</div>