Что такое атрибуты Aria в HTML и почему они важны?

Веб-дизайнеры, плохо знакомые с HTML, могут столкнуться с набором незнакомых атрибутов. Эти атрибуты с префиксом ARIA появляются во всем Интернете, но их назначение может быть загадкой для новых пользователей.

Атрибуты ARIA служат важной цели обеспечения доступности ваших веб-сайтов. Они описывают как содержимое данного элемента, так и то, как элемент относится к странице или другим элементам вокруг него.

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

Что такое атрибуты ARIA?

ARIA — это аббревиатура от Accessible Rich Internet Applications. В современном HTML, особенно в приложениях с большим количеством JavaScript, не всегда сразу очевидно, исходя из синтаксиса, какую роль играют отдельные элементы.

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

Хотя для вас предпочтительным способом решения этой проблемы является используйте правильные семантические элементы в HTML5, это не всегда практично или возможно. Именно здесь вступают в действие атрибуты ARIA в элементах HTML. Эти атрибуты помогают определить роль и атрибуты вашего элемента таким образом, чтобы инструменты специальных возможностей могли их обрабатывать.

Почему важны атрибуты ARIA?

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

Существует множество атрибутов ARIA, которые вы можете назначить. Вы должны использовать их везде, где требуется дополнительный контекст, чтобы документ имел смысл не визуально.

Например, рассмотрим сайт, основная навигация которого состоит из элемент, завернутый в элемент, а не элемент:

<дивсорт="нав">
<ул>
<ли>Домли>
<ли>Магазинли>
<ли>Оли>
ул>
див>

Вы можете использовать атрибуты ARIA, чтобы облегчить пользователям навигацию. Добавление атрибутов role и aria-label в Элемент позволяет программам чтения с экрана и вспомогательным технологиям узнать, где находится ваше меню.

<дивсорт="нав">
<улроль="навигация"ария-лейбл="Основной">
<ли>Домли>
<ли>Магазинли>
<ли>Оли>
ул>
див>

Хотя в большинстве случаев вы должны использовать правильные элементы, это не всегда возможно в рамках ограничений того, что вы делаете. Если, например, ваш сайт требует использования индикатора выполнения, но вы хотите дизайн, который не позволяет стандартная панель.

В этом сценарии вы можете создать собственный набор элементов для отображения индикатора выполнения. Однако для программы чтения с экрана эти элементы будут выглядеть беспорядочно; он не сможет предоставить полезную информацию посетителям вашего сайта.

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

В современную эпоху создание доступных веб-сайтов важнее, чем когда-либо. Есть несколько библиотек компонентов React, созданных с учетом доступности.

Наличие доступного веб-сайта не только может помочь с вашим поисковым рейтингом в нескольких основных поисковых системах, но и гарантирует, что вы не отсекаете потенциальную группу пользователей от своей пользовательской базы.

Добавление соответствующих атрибутов ARIA на ваш сайт поможет обеспечить представление информации всем пользователям. Конечным результатом будет сайт, который приветствует любую аудиторию и представляет максимально приближенный к одному и тому же опыту для всех.

Какие атрибуты ARIA следует использовать?

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

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

Когда дело доходит до рассмотрения того, какие атрибуты ARIA вы должны включить, простой ответ — как можно больше. Везде, где используемый вами элемент не описывает роль, которую выполняет элемент, вы должны использовать атрибут роли.

Если у вас есть поле с меткой, это поле должно иметь ария-меченыйby атрибут. Пока атрибуты, которые вы используете, имеют смысл, вы только делаете свой сайт более доступным, добавляя их.

Атрибуты виджета — гораздо более обширная категория. Он содержит большинство атрибутов ARIA, которые вам нужно будет добавить к стандартному сайту. В предыдущем примере настраиваемого индикатора выполнения aria-valuenow, aria-valuemin и aria-valuemax являются атрибутами виджета. Они описывают состояние или возможные состояния элемента, на котором они находятся.

Существует множество различных атрибутов, которые можно использовать для описания состояния элемента. Одним из наиболее распространенных является ария-лейбл. Этот атрибут применяет к элементу, на который вы его помещаете, метку, видимую только вспомогательным технологиям.

Еще одна распространенная пара атрибутов ARIA, попадающая в эту категорию: скрытая ария и ария-инвалид. Они могут сообщать о текущем состоянии элемента и о том, должна ли программа чтения с экрана читать его пользователю. Это полезно для различных устройств с их собственными программами чтения с экрана.

Атрибуты отношений

В отличие от атрибутов виджета, атрибуты отношений дают вспомогательным технологиям указания на связь и использование элемента с другими элементами вокруг него. Наиболее распространенным из них является атрибут роли. Роль указывает, для какой цели служит элемент на сайте.

Если вы установите роль приписывать навигация, он будет немедленно идентифицирован как обертка навигации.

Некоторые атрибуты отношений определяют, как элемент относится к другим элементам вокруг него. ария-меченыйby атрибут, например, показывает, какой элемент действует как метка для этого элемента. Это может быть полезно при использовании макетов, которые имеют визуальный смысл, но имеют метки для определенных элементов управления формы после них в потоке документов.

Хотя атрибутов отношений меньше, чем атрибутов виджета, эти атрибуты часто имеют большее значение. Они часто могут описывать поток и управление документом, а также предоставлять дополнительные сведения о том, как пользователь может перемещаться по вашему сайту.

Эти атрибуты имеют особое значение при разработке форм и элементов навигации на вашем сайте.

Почему так важно включать атрибуты ARIA в ваш HTML

Атрибуты ARIA служат простой и необходимой цели на вашем веб-сайте. Они служат для обеспечения доступности сайта для всех пользователей, независимо от использования специального программного обеспечения. Для пользователей с ограниченными возможностями наличие этих атрибутов на вашем сайте может сделать сайт удобным для использования.

Предпочтительным методом работы со вспомогательными технологиями является использование правильных семантических элементов. Однако, когда это невозможно, атрибуты ARIA позволяют работать свободно, не теряя контент для ваших пользователей.