Нужно ли использовать aria-label для элементов с видимыми метками, которые читаются программой чтения с экрана?

Моя компания пытается стать совместимой с WCAG. Одна из вещей, которые нам нужно сделать, - это добавить aria-label к интерактивным элементам. У меня вопрос: нужно ли добавлять метку aria к элементу, у которого уже есть метка, которая читается программой чтения с экрана.

Так что в основном мне определенно нужен "закрытый" лейбл арии:

<button>x</button>

Но в некоторых случаях у меня, например, есть заполнитель, который читается программой чтения с экрана. Мне все равно нужно на всякий случай добавлять aria-label? Метка арии будет такой же, как заполнитель.


wai-aria wcag
person Tony    schedule 19.05.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Короткий ответ, нет. Длинный ответ, это зависит от ситуации. Но важно - первое правило арии: если вы можете использовать собственный HTML-элемент или атрибут с семантикой и поведением, которые вам уже встроены, вместо того, чтобы изменять назначение элемента и добавлять роль, состояние или свойство ARIA, чтобы сделать его доступным, тогда сделай так. Если сомневаетесь, выбирайте нативный HTML. https://www.w3.org/TR/using-aria/#rule1 < / а>

Если у вас есть видимая метка, вы должны соединить текст метки и поле ввода через элемент метки. Если поле ввода не имеет видимой метки, aria-label - это один из методов, который может добавлять метку семантически. В вашем примере с кнопкой вы должны использовать aria-label, поскольку X не дает пользователю никакой информации. Конечно, большинство пользователей могут догадываться, что нужно делать, но пользователю не нужно угадывать. И здесь я говорю о пользователях, которые используют вспомогательные технологии.

Я хотел бы отметить, что вы пригласили профессионала для тестирования вашего сайта по юридическим причинам, но в основном для ваших пользователей.

Я веб-разработчик, но последние 10 лет использую веб-доступность. Пока что это самая сложная область веб-разработки, которую мне приходилось изучать, и я все еще учусь. ????

person Mikkel A. Jensen-Maar    schedule 28.08.2020

arrow_upward
0
arrow_downward

@mikkel дает хороший совет относительно первого правила использования ARIA.

Что касается вашего конкретного вопроса об атрибуте заполнителя, полагаясь на заполнитель, поскольку ваша метка не пройдёт несколько контрольных точек WCAG.

  • Текст-заполнитель обычно светло-серого цвета и при отображении на белом фоне часто не работает. 1.4.3 Минимальная контрастность
  • Текст-заполнитель исчезает, когда вы начинаете вводить текст, так что теперь метка исчезла и не удастся. 3.3.2 Ярлыки или инструкции
  • Атрибут placeholder специально не упоминается при вычислении доступного имени (https://www.w3.org/TR/accname-1.1/#step2), хотя он может рассматриваться на шаге 2D как атрибут, определяющий текстовую альтернативу. Неясно, является ли заполнитель текстовой альтернативой. Лично я так не думаю. В противном случае вы потерпите неудачу. 4.1.2 Имя, роль, значение

Если вы посмотрите спецификацию для placeholder , он содержит большой отказ от ответственности за не использования его в качестве ярлыка.

Предупреждение: использование атрибута заполнителя в качестве замены метки может снизить доступность и удобство использования элемента управления для ряда пользователей, включая пожилых пользователей и пользователей с нарушениями когнитивных функций, подвижности, мелкой моторики или зрения. Хотя подсказка, данная меткой элемента управления, отображается постоянно, короткая подсказка, указанная в атрибуте placeholder, отображается только перед тем, как пользователь вводит значение. Кроме того, текст заполнителя может быть ошибочно принят за предварительно заполненное значение, и, как обычно реализуется, цвет текста заполнителя по умолчанию обеспечивает недостаточный контраст, а отсутствие отдельной видимой метки уменьшает размер области попадания, доступной для установки фокуса на элементе управления. .

Итак, все, что было сказано, да, у вас должна быть какая-то видимая метка, связанная с вашим полем ввода, даже если вы используете атрибут placeholder.

person slugolicious    schedule 16.09.2020