В веб-разработке написание семантического HTML важно для доступности, а также дает некоторые приятные побочные эффекты, такие как поддержка режима «чтения» в браузере, SEO, graceful degradation и возможность экспорта.

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

Местами, использование ARIA, определённо необходимо. Но в целом, сокращение использования ARIA, по иронии судьбы, значительно повышает доступность. Это связано с несколькими причинами, в том числе:

1. ARIA очень часто реализована неправильно. Это хорошо известно в области, но для получения данных обратитесь к отчету WebAIM Million, в котором говорится, что “На главных страницах с присутствием ARIA было обнаружено в среднем на 70% больше ошибок, чем на страницах без ARIA”.

2. ARIA может не очень хорошо поддерживаться (даже если правильно реализовано) браузером и/или screen reader'ом, что, к сожалению, случается очень часто.

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

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

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

Примеры использования

Приведенные ниже примеры представляют собой лишь выборку проблем и включают подписи элементов форм, кнопки, ссылки и изображения. Я считаю их распространенными проблемами, и на самом деле я столкнулся со всеми из них “в дикой природе” (на живых веб-сайтах) за последние пару недель. За плохой версией следует хорошая, а затем примечание. В демонстрационных целях фрагменты кода значительно упрощены по сравнению с веб-страницами, на которых они были найдены.

Помните, что исправление избыточности ARIA может показаться тривиальным на первый взгляд, но может иметь большое значение в:

1. снижение сложности кода — меньше кода!

2. уменьшение проблем с поддержкой — например, использование одного текстового контента вместо дублирования (кроме того, меньше кода!)

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

Теперь давайте перейдем к примерам!

Подписи в формах

Пример 1

Плохо: не нужный атрибут aria-label

<label class="...">
    <input aria-label="Pickup" name="Pickup" type="checkbox" class="..." checked="">
    <svg ...>...</svg> 
    Pickup
</label>

Хорошо: используйте текст внутри метки (неявная ассоциация)

<label class="...">
    <input name="Pickup" type="checkbox" class="..." checked="">
    <svg ...>...</svg> 
    Pickup
</label>

Примечание: Удалите aria-label , чтобы выиграть! label, обернутый вокруг input, в достаточной степени обеспечивает доступное имя для поля ввода.

Предупреждение: этот пример реализует неявную маркировку поля ввода, которая может иметь проблемы с некоторыми вспомогательными технологиями, такими как Dragon NaturallySpeaking. Рекомендуется использовать явную ассоциацию, как в примере 2.

Пример 2

Плохо: необоснованное использование aria-labelledby

<label class="..." id="sortBy">Sort By:</label>
<select aria-labelledby="sortBy" class="...">
	<option>Relevance</option>
	<option>Most Recent</option>
	<option>Value</option>
</select>

Хорошо: используйте атрибуты for и id для явной связи

<label class="..." for="sortBy">Sort By:</label>
<select id="sortBy" class="...">
	<option>Relevance</option>
	<option>Most Recent</option>
	<option>Value</option>
</select>

Примечание: Используйте базовый HTML (а не ARIA), чтобы выиграть! Атрибуты for и id предоставляют доступное имя для полей ввода.

Изображения в кнопках

Плохо: ненужный aria-label и ненужная роль

<button aria-label="Save $1 on Halloween candy and decor" class="...">
	<img role="presentation" src="1507288.jpg" alt="Save $1 on Halloween candy and decor">
</button>

Хорошо

<button class="...">
	<img src="1507288.jpg" alt="Save $1 on Halloween candy and decor">
</button>

Примечание: Удалите два атрибута ARIA (и дублирующийся текст), чтобы выиграть! Атрибут alt предоставляет доступное имя для кнопки.

Текст в ссылках

Плохо: перезапись существующего контента

<a aria-label="view location" href="/foobar..." class="...">
	<span data-qa="order-address-one" class="...">100 W Main St</span>
	<span data-qa="order-address-city" class="...">Strangeville, OH 48000</span>
</a>

Хорошо: используйте существующий встроенный текст

<a href="/foobar..." class="...">
	<span data-qa="order-address-one" class="...">100 W Main St</span>
	<span data-qa="order-address-city" class="...">Strangeville, OH 48000</span>
</a>

Примечание: Здесь не нужно переусердствовать, aria-label перезаписывает текст адреса в качестве имени ссылки, поэтому текст адреса недоступен пользователям screen reader'ов. Достаточно обернуть в ссылку текст адреса.

Изображения в ссылках

Плохо: ненужный атрибут aria-label

<a class="..." aria-label="Earn Cash Back" href="/foo">
    <img class="..." alt="Earn Cash Back" src="foo.png" width="100" height="100">
</a>

Хорошо: используйте только альтернативный текст изображения

<a class="..." href="/foo">
    <img class="..." alt="Earn Cash Back" src="foo.png" width="100" height="100">
</a>

Примечание: Удалите атрибут aria-label и используйте базовый HTML, чтобы выиграть! Атрибут alt используется в качестве контента ссылки.

Декоративные изображения

Плохо: атрибут role используется для обозначение декоративного изображения

<img role="presentation" src="foo.jpg" alt="a star, a twirl shape, a balloon">

Хорошо: используйте пустое значение для атрибута alt

<img src="foo.jpg" alt="">

Примечание: Удалите атрибут role (и удалите содержимое alt), чтобы выиграть! Пустой атрибут alt означает, что это декоративное изображение.

Скрипты

Плохо: aria-hidden на тэге скрипта

<script aria-hidden="true">

Хорошо: ничего дополнительно не требуется для обеспечения доступности

<script>

Примечание: Удалите атрибут aria-hidden , чтобы выиграть! Содержимое скрипта (встроенного JavaScript) не озвучивается вспомогательными технологиями.

Заключение

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

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