Стандарти · ARIA

Състояние Глобално състояние

aria-disabled

Указва, че даден контрол е видим и може да получи фокус, но не реагира на потребителски вход. Предпочитайте нативния HTML атрибут disabled, когато е наличен; прибягвайте до aria-disabled, когато елементът трябва да остане фокусируем или да може да показва подсказка.

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

Когато бутон, връзка, поле за въвеждане или съставен уиджет е временно неактивен, но трябва да остане в реда на обхождане с Tab, за да може потребителят да го открие и да разбере защо е деактивиран. Задайте aria-disabled="true" и стилизирайте елемента визуално така, че деактивираното му състояние да е недвусмислено.

Сравнение с подобни атрибути:

  • HTML disabled (за <button>, <input>, <select>, <textarea>, <fieldset>) — премахва контрола от реда на обхождане с Tab, игнорира кликове и не включва стойността при изпращане на формуляра. Използвайте го, когато потребителят няма какво да прави с контрола.
  • aria-disabled="true" — екранният четец обявява „приглушен” / „недостъпен”, но елементът остава фокусируем. Трябва също да предотвратите изпълнението на обработчика при клик. Използвайте го за потребителски уиджети, за тагове <a> (които не приемат disabled) или когато деактивираното състояние трябва да показва подсказка с обяснение.
  • aria-readonly — стойността не може да се променя, но контролът е оперативен и фокусируем. Потребителят може да я копира и формулярът ще я изпрати.
  • aria-hidden — премахва елемента изцяло от дървото на достъпността. Различна цел: скрит, а не деактивиран.

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

Валидните стойности са "true" и "false". Задайте "false" или пропуснете атрибута за активни елементи — не е необходимо да се рендира aria-disabled="false" на всеки активен контрол.

При aria-disabled="true":

  • Спрете изпълнението на обработчика при клик. Атрибутът сам по себе си не блокира събития.
  • Предотвратете активирането с клавиатура по подразбиране (Enter, Space).
  • Уверете се, че визуалният стил прави деактивираното състояние очевидно; проверете дали все още отговаря на изискването за нетекстов контраст по WCAG 1.4.11 (деактивираният вид е изрично освободен, но ясна визуална индикация е по-добра практика).

Чести грешки

  • Използване на aria-disabled="true" без блокиране на обработчика при клик — елементът изглежда приглушен, но все още задейства действието си.
  • Едновременно използване на disabled и aria-disabled върху един и същ елемент. Нативният атрибут вече представя състоянието; дублирането е излишно.
  • Използване на aria-disabled върху <a> без да се премахне href или да се предотврати действието по подразбиране — връзката продължава да навигира.
  • Деактивиране на контроли без обяснение защо. WCAG 3.3.1 изисква съобщение за грешка или инструкция.
  • Объркване на aria-disabled с aria-hidden. Деактивираните елементи остават в дървото на достъпността; скритите изчезват от него.

Пример

<button type="submit" aria-disabled="true" aria-describedby="submit-help">
  Submit order
</button>
<p id="submit-help">Add at least one item to your cart to enable submit.</p>