aria-required

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

Само когато HTML атрибутът required не е наличен. Нативните полета за формуляри — <input>, <select>, <textarea> — трябва да използват required. HTML атрибутът се обявява от всеки екранен четец, участва в браузърната валидация на формуляри и задейства CSS псевдокласа :required. aria-required не прави нито едно от тези неща самостоятелно; той е само съобщение.

Законосъобразните случаи за aria-required:

• Персонализиран role="combobox", изграден върху <div> или стилизиран <input>, при който валидацията е поета от разработчика.
• role="radiogroup", при който цялата група е задължителна (не е възможно да се постави required върху <div>).
• Персонализиран избор на дата, файл или уиджет за оценка, които не са нативни полета за въвеждане.

Ако е възможно да се използва HTML required, следва да се предпочете той.

Поведение

Булев атрибут. aria-required="true" кара помощната технология да обявява „задължително” (или „трябва да се попълни”, в зависимост от екранния четец) заедно с наименованието и ролята на полето. aria-required="false" е еквивалентно на пропускане на атрибута и рядко е необходимо.

aria-required не предотвратява изпращането на формуляра. Не добавя червена звездичка. Не превключва CSS псевдокласове. Той е единствено сигнал към помощната технология. Логиката за валидация, съобщенията за грешки и видимият маркер за задължително поле остават отговорност на разработчика.

Видимият маркер за задължително поле (звездичка *, думата „задължително” и т.н.) трябва да бъде предаден и в достъпното наименование — в текста на видимия етикет или чрез описание — така че зрящите потребители и потребителите на помощни технологии да получават една и съща информация.

Чести грешки

• Използване на aria-required="true" върху нативен <input> вместо HTML атрибута required. Работи, но без основателна причина се изхвърля браузърната валидация и стилизирането с :required.
• Задаване на aria-required="true" върху нефункционален контрол на формуляр — бутон, заглавие, div без роля. Атрибутът се игнорира.
• Пропускане на видимия индикатор за задължително поле. Зрящите потребители виждат немаркирано поле; потребителите на помощни технологии чуват „задължително”. Проблем с критерий за успех WCAG 1.3.3.
• Маркиране на поле като задължително в ARIA, без да се включи в логиката за валидация при изпращане на формуляра. Обявяването казва „задължително”; сървърът приема празни стойности без проблем.
• Свързване на aria-required с aria-invalid="true" прекалено рано. Полето е невалидно само след като потребителят е опитал да изпрати и е оставил полето празно, а не при зареждане на страницата.
• Локализиране на видимия маркер "*", без да се синхронизира текстът за екранния четец в етикета, в резултат на което двете не съвпадат.

Пример

<!-- Native input: prefer the HTML attribute -->
<label for="email">
  Email <span aria-hidden="true">*</span>
</label>
<input id="email" type="email" required aria-describedby="email-hint">
<p id="email-hint">Required. We will only use this to send your receipt.</p>

<!-- Custom combobox where HTML required isn't available -->
<div
  role="combobox"
  aria-required="true"
  aria-labelledby="country-label"
  aria-controls="country-listbox"
  aria-expanded="false"
>
  <input type="text" id="country-input">
</div>
<span id="country-label">Country (required)</span>