Accessible Rich Internet Application, или же сокращённо ARIA — это расширение HTML, предоставляющее набор атрибутов для расширения семантики HTML и разработки доступных сайтов и приложений.
Существует документ под названием Using ARIA, в котором даны рекомендации и описаны 5 правил использования ARIA.
Первое правило
Используйте встроенные в HTML элементы и атрибуты для передачи нужной семантики вместо использования ARIA. Иными словами: первое правило ARIA — не используйте ARIA.
Второе правило
Не меняйте семантику встроенных элементов без острой необходимости.
Вместо этого:
<h2 role="tab">heading tab</h2>
Лучше сделать так:
<div role="tab">
<h2>heading tab</h2>
</div>
Третье правило
Все интерактивные элементы должны управляться с клавиатуры. Если вы создаёте интерактивный компонент, который нажимается, перетаскивается, пролистывается или прокручивается, то должна быть возможность делать это при помощи клавиатуры.
Скрипт должен реагировать на нажатие отдельных клавиш или их сочетаний при взаимодействии с компонентом.
Четвёртое правило
Не используйте
role="presentation" (синоним role="none") и aria-hidden="true" на интерактивных элементах.Не делайте так:
<button role="presentation">
press me
</button>
Или так:
<button aria-hidden="true">
press me
</button>
Или так:
<div aria-hidden="true">
<button>press me</button>
</div>
Пятое правило
У всех интерактивных элементов должно быть имя. Это имя должно быть указано одним из доступных способов (
<label>, aria-label, aria-labelledby и т.д.)