Как НЕ использовать aria-label

В свете Всемирного дня распространения информации о доступности я начал писать о доступных веб-компонентах, но это займет у меня гораздо больше времени, чем предполагалось 🙃 Поэтому пока вот краткая информация о том, как использовать (или, скорее, не использовать) aria-label!


Атрибут aria-label дает текстовое имя элементу HTML. Классическим примером является кнопка закрытия:

<button aria-label="Close">×</button>
Вход в полноэкранный режим Выход из полноэкранного режима

Визуально вы увидите символ «×», который указывает на то, что окно будет закрыто. В то же время человек, пользующийся устройством чтения с экрана, услышит «Закрыть, кнопка», что передает то же самое. Без aria-label они услышат «Times, кнопка», что довольно запутанно.

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

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

Итак, давайте рассмотрим, когда не следует использовать aria-label!

Элементы, которые не могут использовать aria-label

Не используйте aria-label для ролей, где это запрещено!

Вы не можете поместить aria-label на span:

<!-- Don't do this! -->
<span aria-label="Apple">Orange</span>
Вход в полноэкранный режим Выход из полноэкранного режима

Может показаться, что визуальные читатели получают апельсин, а читатели с экрана — яблоко, но на самом деле это не так. На самом деле, происходящее не является четко определенным или последовательным для всех браузеров и вспомогательных средств.

span — это только один пример. В определении aria-label перечислены многие роли, для которых он запрещен.

Общее правило заключается в том, что aria-label можно использовать только в ролях с присвоением имени, что включает интерактивные элементы, но не статические.

Вместо этого у вас есть несколько вариантов:

  • Явно назначить интерактивную роль
  • Сделать текст для чтения с экрана визуально скрытым с помощью CSS
<!-- Assign a role, but also just use a normal button...? -->
<span role="button" aria-label="close">×</span>

<!-- Make the text visually hidden -->
<span class="visually-hidden">Apples</span>
<span aria-hidden="true">Oranges</span>
Войти в полноэкранный режим Выйти из полноэкранного режима

Использовать собственный HTML

Избегайте aria-label там, где вместо него можно использовать обычный HTML!

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

  • Текстовое содержимое кнопки — это ее текстовое представление (<button>Submit</button>).
  • Изображения снабжаются атрибутом alt, который является его текстовой меткой.
  • Элементы управления формы имеют соответствующий элемент label для их описания.
  • Рисунки и таблицы имеют figcaption и caption соответственно.
  • Даже разделы страницы обычно описываются заголовками страниц (<h2>, <h3> и т.д.).

Примечательно, что большинство этих механизмов (по умолчанию) предоставляют одинаковый текст как зрячим, так и незрячим людям. Поэтому aria-label лучше использовать в тех случаях, когда они не должны быть одинаковыми, или когда зрительное представление передает смысл без текста (например, использование символа «×» для обозначения «закрыть»).

<!-- Avoid this... -->
<table aria-label="Quarterly Earnings">

<!-- ...when you can use native HTML -->
<table><caption>Quarterly Earnings</caption></table>
Вход в полноэкранный режим Выход из полноэкранного режима

Некоторые тексты предназначены для всех

Избегайте aria-label для текста, который ценен для всех!

Большинство текстовых представлений, предоставляемых HTML, являются одновременно и видимыми, и доступными для устройств чтения с экрана. И на это есть веские причины:

  • Если контекст/инструкции важны для экранных чтецов, то, скорее всего, они важны для всех.
  • Люди, использующие программы для чтения с экрана, не обязательно слепые, и может возникнуть путаница, если то, что озвучивается инструментом, отличается от того, что читается на странице.
  • Содержимое в aria-label не поддается поиску.

Например, возможно, существуют сочетания клавиш, о которых вы хотите, чтобы знали люди, пользующиеся программами чтения с экрана (например, «Нажмите кнопку Esc для выхода из модального окна»). Однако этот текст будет полезен и зрячим людям, пользующимся мышью, поскольку они могут предпочесть быстроту нажатия клавиши Esc чем перемещение мыши на кнопку.

Чтобы скрыть подобную информацию по умолчанию, используйте всплывающие подсказки или элемент HTML «Подробности».

Когда же использовать aria-label?

Я написал об этом, потому что у меня появилась тенденция чрезмерно использовать aria-label всякий раз, когда мне требовалось что-то «для считывателей экрана», и это приводило к тому, что веб-страницы либо не соответствовали требованиям (не проходили тестирование на доступность), либо были менее доступными, чем я думал.

Как обычно, первое правило использования ARIA — не использовать ARIA:

  • Не используйте aria-label для ролей, где это запрещено!
  • Избегайте aria-label там, где вместо него можно использовать обычный HTML!
  • Избегайте aria-label для текста, который ценен для всех!

Оцените статью
Procodings.ru
Добавить комментарий