ARIA это аббревиатура от Accessible Rich Internet Applications (доступные насыщенные интернет-приложения), использование этого стандарта позволяет сделать сайт более доступным для людей с ограниченными способностями, например, с нарушениями слуха или зрения. Посмотрим, что могут сделать разработчики, чтобы облегчить им жизнь.

Один из способов использования этого стандарта — добавление ARIA в разметку HTML. Вы наверняка знакомы с семантическими элементами HTML такими как nav, button или header. Легко понять, для чего можно использовать эти элементы. Они дают больше смысла содержимому страницы и мы можем использовать комбинацию этих элементов и ARIA в разметке. Однако для совместного их использования стоит учитывать несколько вещей.

Роли ARIA

Роли ARIA добавляются в разметку HTML как атрибуты. Они определяют тип элемента и указывают цель, которой он служит. В следующем примере элемент идентифицируется как баннер:

<header role="banner">

Еще один пример: здесь роль сообщает сведения о том, что элемент содержит информацию о содержимом страницы.

<div role="contentinfo">
    This website was built by Georgie.
</div>

Оповещение будет выглядеть так:

<div role="alert">
    Please upgrade to the latest version of your browser for the best experience.
</div>

role=”alert” полноценно работает с элементами, динамически добавляемыми в DOM или при смене отображения, например, с display:none to display:block

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

<span class="frame-corner" role="presentation"></span>

Элементы span (как и div) в большинстве случаев не нуждаются в указании role=”presentation”, так как не являются объектами в дереве доступности браузера (accessibility tree). Но для семантических элементов типа h1-h6 это имеет смысл.

Атрибуты ARIA

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

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

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

<input type="radio" aria-checked="true">

На самом деле использование атрибута ARIA в нативной радио-кнопке излишне, связывание input type="radio" и aria-checked производится автоматически.

Образец атрибута-свойства это aria-label. Этот атрибут используется, когда метка элемента формы не видима на страница (это может быть продиктовано дизайном или просто не иметь смысла). Для случаев, когда текст метки видим, подходит атрибут aria-labelledby. Он используется также как и предыдущий, значение этого атрибута совпадает со значение id метки.

<label id="address">Address</label>
<input type="text" aria-labelledby="address">

Это также можно сделать в элементе figure.

<figure aria-labelledby="operahouse_1">
    <img src="operahousesteps.jpg" alt="The Sydney Opera House">
    <figcaption id="operahouse_1">We saw the opera <cite>Barber of Seville</cite> here!</figcaption>
</figure>

Больше о поддерживаемых атрибутах-состояниях и атрибутах-свойствах можно узнать на сайте консорциума.

Правила ARIA

Прежде чем бросаться в атаку, запомните, что по нескольким причинам не стоит добавлять ARIA к каждому элементу.

Старайтесь максимально использовать семантические элементы HTML

Семантика ARIA по умолчанию ссылается на семантику, применяемую к элементам в браузере. Такие элементы как nav, article и button обладают уже заложенными ролями role="navigation", role="article" и role="button" соответственно. До появления семантических элементов HTML было распространена разметка по типу <div class="main-navigation" role="navigation">. Теперь мы можем использовать nav вместо div и нам не нужно добавлять к семантическому элементу role="navigation", потому как эта роль в нем уже подразумевается по умолчанию. Вы можете проверить по таблице W3C наличие и отсутствие атрибутов ARIA у искомого элемента.

У элемента может быть только одна роль

У элемента не может быть множественных ролей. Согласно определению, роль это:

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

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

Не изменяйте нативную семантику

Вы не должны применять роль, не соответствующую семантике элемента, так как добавленная роль переписывает нативную семантику элемента. Например:

<footer role="button">

Однако второе правило ARIA позволяет в случае необходимости использовать вложение элементов.

<footer><button>Purchase this e-book</button></footer>

Как еще можно сделать разметку более доступной?

Максимально используйте семантические элементы

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

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

  • q — используется для указания строчных цитат, таких как цитаты внутри текста параграфов.
  • cite — используется для цитирования творческой работы с текстом, например, стихов.

Вот пример с использованием обоих упомянутых элементов:

<p>In <cite>The Love Song of J. Alfred Prufock</cite> by T.S. Eliot, the clinical imagery of the line <q>Like a patient etherized upon a table</q> suggests themes of loneliness.</p>

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

Атрибут alt

Это часто забываемая часть разметки, которая может серьезно сказаться на доступности, особенно в случае скринридеров. Этот атрибут появился в спецификации со времен HTML2 и описывается следующим образом:

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

По причине ограничений или предпочтений пользователя. Независимо от причин, по которым не загружается изображение, у пользователей с ослабленным зрением на самом деле нет предпочтений. Они просто испытывают проблемы при просмотре изображения. Хотя спецификация ничего не говорит о термине “доступность”, она предполагает, что изображение не может быть загружено как следует, а у пользователя есть возможность отключить загрузку изображения. Хотя мы живем в мире, в котором второй вариант кажется менее вероятным, мы не можем предугадать, что делает пользователь на другом крае. Поэтому мы должны предлагать пользователям альтернативу.

Люди часто заполняют атрибут alt не информативно, например, пишут текст типа “собака” для фотографии своей собаки, играющей в парке. К сожалению, этот текст не нарисует никакой картины для слабовидящих. Следующий подход более приемлем:

<img src="bobby.jpg" alt="My dog Bobby playing fetch in the park">

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

<figcaption>Isn’t Bobby cute?</figcaption>

Пример разметки с использованием семантического HTML и ARIA, ориентированный на доступность

Если вы смотрели на примеры в этой статье, то вы ожидаете увидеть в качестве образца следующее:

  • использование семантического HTML для изображения и заголовка
  • целевое использование элемента cite
  • добавление атрибута alt
  • использование одного из атрибутов ARIA
<figure aria-labelledby="operahouse_1">
    <img src="operahousesteps.jpg" alt="The Sydney Opera House"/>
    <figcaption id="operahouse_1">We saw the opera <cite>Barber of Seville</cite> here!</figcaption>
</figure>

Заключение

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

Дополнительные материалы