Стандарти · ARIA

Състояние Състояние на контрола

aria-invalid

Указва, че контрол на формуляр е неуспешен при валидация. Свържете с aria-describedby, сочещ към четимото от човека съобщение за грешка, така че екранният четец да обяви едновременно невалидното състояние и причината.

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

Върху input, textarea, combobox, listbox или друг уиджет на формуляр, чиято текуща стойност е неуспешна при валидация. Задайте aria-invalid="true" след като потребителят е имал възможност да въведе стойност — обикновено при blur или при изпращане. Задаването му при първоначалното изобразяване, преди потребителят да е въвел нещо, е дразнещо и обявява празните задължителни полета като невалидни преди потребителят да е предприел каквото и да е действие.

Свържете го с действителното съобщение за грешка. Моделът е:

  1. Изобразете видимо съобщение за грешка със собствен id.
  2. Задайте aria-invalid="true" върху input-а.
  3. Насочете aria-describedby към id-то на съобщението за грешка.

Екранните четци тогава обявяват едновременно невалидното състояние и обяснението: „Имейл, edit, невалиден запис, моля въведете валиден имейл адрес”.

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

Валидните стойности са "true", "false", "grammar" и "spelling". На практика най-честите са "true" и "false". "grammar" и "spelling" се използват от редактори на богат текст за маркиране на конкретен участък; повечето работни потоци за формуляри не се нуждаят от тях.

По подразбиране задайте "false" (или пропуснете). При неуспешна валидация задайте "true" и разкрийте съобщението за грешка. Когато потребителят коригира полето, изчистете и двете едновременно — върнете aria-invalid обратно на "false" и премахнете или скрийте съобщението за грешка.

HTML атрибутът required и CSS псевдокласът :invalid работят независимо. aria-invalid е битът, който екранните четци консумират; останалите са за браузъри и стилизация. Поддържайте ги синхронизирани.

Чести грешки

  • Задаване на aria-invalid="true" преди потребителят да е имал възможност да взаимодейства с полето.
  • Маркиране на поле като невалидно без aria-describedby и без видимо съобщение за грешка — екранният четец обявява „невалидно” без обяснение.
  • Оставяне на aria-invalid="true" след като потребителят е коригирал стойността.
  • Насочване на aria-describedby към празен контейнер, при което обявяването на грешката е мълчаливо.
  • Използване на aria-invalid върху <fieldset> или други контейнери, различни от input — той няма смисъл там.
  • Разчитане само на цвят за указване на невалидно състояние — aria-invalid помага на екранните четци; все още е необходим видим етикет или икона за зрящите потребители (WCAG 1.4.1).

Пример

<label for="email">Email address</label>
<input
  id="email"
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
  required
>
<p id="email-error">Please enter a valid email address.</p>