Stan Stan widgetu

`aria-readonly`

Wskazuje, że wartości kontrolki formularza nie można edytować, ale kontrolka pozostaje operatywna — można ją sfokusować, skopiować jej treść i zostaje ona przesłana wraz z formularzem. Różni się od aria-disabled, który czyni kontrolkę nieooperatywną.

Kiedy stosować

Na kontrolce formularza, której wartość użytkownik może zobaczyć i skopiować, ale nie może jej zmienić — linia podsumowania zamówienia, której nie należy edytować, komentarz recenzenta w wieloetapowym procesie zatwierdzania, wygenerowany identyfikator. Użytkownik może nadal przejść do niej tabulatorem, zaznaczyć tekst i go odczytać; formularz nadal prześle jej wartość.

Jeśli używa się elementów <input>, <textarea> lub <select>, atrybut HTML readonly obsługuje to wszystko natywnie i jest preferowany. Po aria-readonly należy sięgać w przypadku niestandardowych widżetów: role="combobox", role="grid", role="listbox", role="slider", role="spinbutton" i role="textbox" (niestandardowy).

Porównanie z powiązanymi stanami:

aria-readonly — fokusowalny, wartość widoczna i możliwa do skopiowania, wartość przesyłana, wartość nie może ulec zmianie.
aria-disabled — fokusowalny (pozostaje w kolejności tabulacji), ale nie reaguje na dane wejściowe i umownie nie jest przesyłany.
HTML disabled — całkowicie wyłączony z kolejności tabulacji, ignorowany, nieprzesyłany.
aria-hidden — usunięty z drzewa dostępności; to odmienny cel.

Wybór między trybem tylko do odczytu a wyłączonym jest semantyczny: tylko do odczytu oznacza „poprawna wartość, którą można zobaczyć”, wyłączony oznacza „nie zawracaj sobie głowy tym polem w tej chwili”.

Jak utrzymywać synchronizację

Prawidłowe wartości to "true" i "false". Domyślnie należy ustawić "false" (lub pominąć) na kontrolkach edytowalnych; przełączyć na "true", gdy pole staje się tylko do odczytu.

Gdy aria-readonly="true":

Kontrolka musi pozostać fokusowalną. Nie należy jednocześnie ustawiać tabindex="-1".
Procedury obsługi kliknięć i klawiatury nie powinny zmieniać wartości. Zaznaczanie i kopiowanie tekstu musi nadal działać.
Pole należy ostylować tak, by wygląd tylko do odczytu był wizualnie odróżnialny od edytowalnego — zwykle inne tło, brak kursora tekstowego, brak wskazania hover.

Typowe błędy

Ustawienie aria-readonly na natywnym elemencie <input> przy jednoczesnym użyciu atrybutu HTML readonly. Natywny atrybut jest wystarczający; duplikat może się rozejść.
Używanie aria-readonly na elemencie niebędącym formularzem, np. <p> lub <div> — stan nie ma tam żadnego znaczenia.
Jednoczesne ustawienie aria-readonly="true" i aria-disabled="true". Należy wybrać jedno na podstawie tego, czy pole jest „poprawne, ale zablokowane”, czy „ignoruj je teraz”.
Uczynienie pola tylko do odczytu niefokusowalnym (za pomocą tabindex="-1") — użytkownicy czytników ekranu nie mogą go już dosięgnąć, by odczytać wartość.
Ukrywanie pola tylko do odczytu wizualnie przy jednoczesnym pozostawieniu go w kolejności tabulacji.

Przykład

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

<!-- Niestandardowy widżet, w którym natywny atrybut nie jest dostępny -->
<div
  role="textbox"
  tabindex="0"
  aria-readonly="true"
  aria-label="Generated reference"
>
  ORD-83472
</div>