От автора: Web Accessibility Initiative Accessible Rich Internet Applications Suite или WAI-ARIA, или просто ARIA – набор инструментов и руководящих принципов по повышению доступности контента и приложений. В частности технология включает набор атрибутов для HTML элементов, которые вставляют в них семантическую информацию, считываемую вспомогательными технологиями.
ARIA может быть очень полезным инструментом, однако нужно знать, как и когда использовать ее. Поэтому я составил 5 правил, которые стоит учесть при использовании ARIA в HTML.
1. Используйте семантический HTML5 вместо ARIA
«Если есть возможность использовать встроенный HTML элемент или атрибут с семантикой и нужным вам поведением, используйте его. Не меняйте назначение элементов и не добавляйте ARIA роли, состояния или свойства для достижения доступности.»
Первое правило использования ARIA в HTML – постарайтесь не использовать ARIA в HTML (если в нем нет крайней необходимости). Есть широкий ряд семантических HTML5 элементов с неявным значением, схожих с явно прописанными значениями через ARIA.
По возможности необходимо использовать семантические HTML элементы вместо ARIA атрибутов.
Не создавайте кнопку с помощью div и ARIA роли:
|
1 |
<div role="button">Click Me</div> |
Это неправильно. Нужно использовать тег button:
|
1 |
<button>Click Me</button> |
2. Не меняйте значение семантических элементов с помощью ARIA ролей
«Не меняйте нативную семантику, если в этом нет крайней необходимости.»
Как я уже говорил, множество семантических HTML элементов имеют неявно заданные значения. Если мы используем button, например, то юзер агент понимает, что это интерактивный элемент (взаимодействие происходит через клик, клавишу enter или пробел), запускающий некое взаимодействие на странице. С другой стороны, если мы используем тег <a>, юзер агент поймет, что взаимодействие с этим элементом (клик или клавиша enter) приведет на другую страницу или в другую часть страницы.
Множество элементов имеют неявную семантику, которую не рекомендуется менять с помощью ARIA ролей.
|
1 |
<h1 role="button">Heading Button</h1> |
Неправильный метод. Вместо изменения семантики элемента нужно использовать подходящий тег:
|
1 |
<h1><button>Heading Button</button></h1> |
Предпочтительный способ. В крайнем случае, можно применить ARIA роль к элементу без значения.
|
1 |
<h1><span role="button">Heading Button</span></h1> |
3. Интерактивные ARIA элементы должны быть доступными во всех смыслах
«Все интерактивные ARIA элементы должны иметь управление с клавиатуры.»
ARIA роль на элементе не меняет его смысла. Если нам нужно превратить div в button, необходимо вручную добавить возможности взаимодействия, присущие button.
В руководстве к ARIA есть список возможностей для каждого элемента. Например, правильная кнопка должна удовлетворять следующим требованиям:
должна нажиматься курсором;
должна нажиматься с помощью клавиши enter;
должна нажиматься с помощью пробела.
При работе с ARIA необходимо знать эти требования. Если элемент выглядит, как кнопка, он ей не становится. Нужно принять во внимание все аспекты взаимодействия пользователя с элементом.
4. Используйте подходящие роли для видимых элементов с фокусом
«Не используйте role=»presentation» или aria-hidden=»true» на видимых элементах с фокусом.»
ARIA атрибут role=»presentation» указывает, что элемент можно использовать только в визуальных целях, с ним нельзя взаимодействовать. Атрибут aria-hidden=»true» говорит, что элемент должен быть невидимым.
Нужно знать, к каким элементам применяются данные атрибуты, а также состояния видимости и интерактивности данных элементов. Например, пользователь попробует нажать на обе кнопки в коде ниже, хотя они не могут получить фокус.
|
1 2 |
<button role="presentation">Click Me</button> <button aria-hidden="true">Click Me</button> |
Неправильный метод. Эти атрибуты необходимо применять к невидимым элементам, а также к элементам без взаимодействия.
|
1 2 |
<button role="presentation" tabindex="-1">Don't Click Me</button> <button aria-hidden="true" style="display: none;">Don't Click Me</button> |
5. Интерактивные элементы должны иметь доступные имена
«Все интерактивные элементы должны иметь доступные имена.»
Элементы, с которыми можно взаимодействовать, например, кнопки и ссылки должны иметь «доступные имена». Доступные имена определяются свойством accessible name в Accessibility API. Если значение валидное, значит, имя доступно.
Доступное имя элемента можно задать, исходя из его типа. Например, инпуты формы обычно получают доступное имя из связанного с ними лейбла label (см. добавление лейблов к элементам форм).
|
1 2 3 4 5 6 7 |
<label> Username <input type="text"> </label> <label for="password">Password</label> <input type="password" id="password"> |
Другие элементы, например, кнопки и ссылки могут получить доступные имена из своего текстового контента или атрибута label (см. HTML для скринридеров).
Источник: //bitsofco.de/
Редакция: Команда webformyself.
