aria-describedby

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

За допълнителна информация, поставена до контрол: подсказка за формат под поле за дата („MM/DD/YYYY”), списък с правила за парола, вградено съобщение за грешка, инструкции над сложен уиджет. Етикетът отговаря на какво е това?; описанието отговаря на какво друго трябва да знам?.

Използва се на полета от формуляр, бутони, диалогови прозорци и всякакви потребителски уиджети, при които допълнителният контекст трябва да следва след наименованието.

Как се държи

Стойността е разделен с интервали списък от идентификатори на елементи — същата форма като aria-labelledby. Екранните четци обявяват описанието след достъпното наименование и ролята, обикновено след кратка пауза — „Имейл, поле за въвеждане, Ще се свържем с вас само за тази поръчка.” Множество идентификатори се обединяват в реда, в който са изброени.

Описанието не е наименование. То не се появява в полето за наименование в дървото за достъпност, поради което axe-core не го брои като означение на контрола. Ако контролът няма наименование, aria-describedby не може да го замести.

Ако описанието се промени (например при поява на грешка), трябва да се актуализира текстовото съдържание на референтния елемент, а не да се сменя стойността на aria-describedby — много помощни технологии не обявяват повторно при промяна на самия атрибут, но обявяват повторно, когато референтният текст е в жив регион или когато фокусът влиза отново в полето.

Чести грешки

• Използване на aria-describedby вместо наименование. Контролът все още няма етикет; потребителят чува описанието, но не и наименованието.
• Препращане към идентификатор, който не съществува или е премахнат от DOM след рендиране.
• Добавяне на aria-describedby към нефокусируем елемент. Повечето браузъри показват описанието само когато елементът получи фокус или бъде запитан директно.
• Дълъг маркетингов текст като описание — подробните обявявания карат потребителите да изключват описанията глобално.
• Пропускане на асоциирането на вградени грешки в формуляри. aria-describedby="email-error" заедно с aria-invalid="true" е каноничният шаблон; без препратката грешката е видима, но не се обявява.
• Повторно използване на един и същ идентификатор на описание за много полета с aria-describedby="hint" — работи, но трябва да се провери дали същият текст действително се отнася за всяко поле.

Пример

<label for="password">Password</label>
<input
  id="password"
  type="password"
  aria-describedby="pw-rules pw-error"
  aria-invalid="true"
>
<p id="pw-rules">At least 12 characters, including a number.</p>
<p id="pw-error">Password is too short.</p>