aria-readonly

Кога се използва

Върху контрол за формуляр, чиято стойност потребителят може да вижда и копира, но не може да променя — например ред от обобщение на поръчка, който не трябва да се редактира, коментар на рецензент в многостъпков процес на одобрение, или генериран идентификатор. Потребителят все още може да премества фокуса върху него, да избира текста и да го чете; формулярът ще изпрати стойността му.

При използване на <input>, <textarea> или <select> HTML атрибутът readonly обработва всичко това нативно и е предпочитан. Към aria-readonly се прибягва при потребителски уиджети: role="combobox", role="grid", role="listbox", role="slider", role="spinbutton" и role="textbox" (потребителски).

Сравнение с близки състояния:

• aria-readonly — с фокус, стойността е видима и може да се копира, изпраща се, не може да се променя.
• aria-disabled — с фокус (остава в реда на tab навигация), но не реагира на въвеждане и по конвенция не се изпраща.
• HTML disabled — изваден изцяло от реда на tab навигация, игнориран, не се изпраща.
• aria-hidden — изваден от дървото за достъпност; това е различна цел.

Изборът между само за четене и деактивирано е семантичен: само за четене означава „валидна стойност, която може да се види”, деактивирано означава „не се занимавай с това за момента”.

Как да се поддържа синхронизацията

Валидните стойности са "true" и "false". По подразбиране се задава "false" (или атрибутът се пропуска) за редактируеми контроли; превключва се на "true", когато полето стане само за четене.

Когато aria-readonly="true":

• Контролът трябва да остане с фокус. Не трябва да се задава и tabindex="-1".
• Обработчиците на щракване/клавиатура не трябва да мутират стойността. Избирането и копирането на текст трябва да продължи да работи.
• Полето трябва да се стилизира така, че визуалният му вид за само четене да се различава от редактируемото поле — обикновено различен фон, без курсор за въвеждане, без ефект при навеждане.

Чести грешки

• Задаване на aria-readonly на нативен <input>, докато се използва и HTML атрибутът readonly. Нативният атрибут е достатъчен; дублирането може да доведе до разминаване.
• Използване на aria-readonly върху ненативен елемент за формуляр като <p> или <div> — състоянието няма смисъл там.
• Едновременно задаване на aria-readonly="true" и aria-disabled="true". Избира се едното в зависимост от това дали полето е „валидно, но заключено” или „игнорирай засега”.
• Правене на поле само за четене недостъпно за фокус (чрез tabindex="-1") — потребителите на екранни четци вече не могат да го достигнат, за да прочетат стойността.
• Визуално скриване на полето само за четене при запазване на реда на tab навигация.

Пример

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

<!-- Потребителски уиджет, при който нативният атрибут не е наличен -->
<div
  role="textbox"
  tabindex="0"
  aria-readonly="true"
  aria-label="Generated reference"
>
  ORD-83472
</div>