Как использовать WAI-ARIA

Назначение

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

Что такое веб-доступность и WAI-ARIA?

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

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

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

Ниже приведен один из самых простых примеров веб-доступности.

<div onclick="action()">action<div>

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

В этом случае вы можете улучшить свой код следующим образом

<button type="button" onclick="actions()">action<button>

Браузер прекрасно понимает, что этот код является кнопкой.

Основой веб-доступности является следование семантике HTML без использования всегдашнего тега div.

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

Что такое WAI-ARIA?

В основном WAI-ARIA помогает реализовать доступные веб-сайты, поскольку WAI-ARIA означает "Web Accessibility Initiative - Accessible Rich Internet Applications".

Почему необходимо использовать WAI-ARIA? Потому что современные приложения становятся все сложнее, и особенно javascript чаще используется для динамических действий веб-приложений.

Хорошим примером является компонент выбора даты. Несмотря на то, что HTML готовит простой выбор даты по input type="date", это очень трудно изменить в дизайне. Поэтому многие разработчики реализуют собственный компонент выбора даты с помощью библиотеки javascript или самостоятельно. На мой взгляд, это нормальное действие, но это не очень хорошо для веб-доступности.

В этом случае удобно использовать WAI-ARIA, потому что WAI-ARIA может присоединять "ролевые" HTML-элементы, как показано ниже.

<div role="button" onclick="action()">action<div>

Это свойство "role" говорит браузеру: "Это не элемент кнопки, но этот элемент используется как кнопка".

На самом деле приведенный выше код все еще имеет некоторые проблемы с точки зрения веб-доступности, потому что этот код не имеет фокуса, действия при нажатии клавиши Enter или пробела.

Поэтому я изменил этот код следующим образом.

Вам нужно добавить tabindex для фокуса и onKeyDown для действия нажатия клавиши Enter или пробела.

// HTML


<div role="button" tabindex="0" onclick="action(event)" onKeyDown="action(event)">action</div>

// JS


function action(event) {
  if (
    event instanceof KeyboardEvent &&
    event.key !== "Enter" &&
    event.key !== " "
  ) {return;}

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

<div role="button" tabindex="0" onclick="action(event)" onKeyDown="action(event)" aria-pressed="false">action</div>

Это свойство "aria-***" означает состояние элементов. Поэтому "aria-pressed=false" означает, что данный элемент сейчас не нажат.

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

Обратите внимание, если вы хотите использовать "aria-pressed", вам нужно переключить этот реквизит вручную, потому что он не изменяется автоматически, и этот факт будет сбивать пользователя с толку.