JavaScript и доступность

Мы все знаем, что базовая структура любого веб-сайта создается с использованием HTML, а дизайн и макет управляются с помощью CSS. А как насчет того, чтобы сделать сайт интерактивным и интересным для пользователей?

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

Для других взаимодействий может потребоваться помощь JavaScript. Вы можете добавить прослушиватели событий к элементам на странице, которые вы хотите «прослушивать» для действий пользователя.

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

javascriptCopy code
myElement.addEventListener('click', myFunction);
function myFunction() {
    // Perform awesome tasks here;
}

Полный список событий можно найти в Справочнике событий MDN.

Теперь, когда мы можем создавать взаимодействия, важно подумать, как и когда их реализовывать. Одна вещь, которую часто упускают из виду, — это пользовательский опыт и доступность. Должны ли мы действительно прикрепить событие клика к div или span? Несмотря на то, что это может достичь поставленной цели, пользователи клавиатуры могут не иметь возможности переходить к этим элементам.

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

Еще одно часто упускаемое из виду событие, которое способствует улучшению пользовательского опыта и доступности, — это событие «фокуса». Хотя использование правильного HTML позволяет пользователям легко перемещаться по содержимому, также важно указать активный элемент с помощью контура, предусмотренного стилями фокуса по умолчанию. Однако что, если мы нажмем кнопку, которая откроет модальное окно? Модальное окно может не существовать в DOM до момента щелчка, поэтому активный элемент может не быть сразу виден, когда пользователи увидят модальное содержимое.

Это дает возможность использовать JavaScript для улучшения пользовательского опыта. Как только модальное окно откроется, мы можем выбрать первый фокусируемый элемент (например, кнопку закрытия) и передать ему фокус, используя myBtn.focus().

Но есть еще кое-что, что следует учитывать! После перехода по всем модальным элементам фокус может покинуть модальное окно и переместиться на невидимый элемент. В зависимости от желаемого пользовательского опыта вы можете захотеть «заманить» пользователя в ловушку внутри модального окна, пока он намеренно не закроет его. Для пользователей мыши вы можете добавить прослушиватель событий вне модального окна:

javascriptCopy code
myElement.addEventListener('click', handleCloseModal);
function handleCloseModal() {
    // Hide or close the modal (e.g., set to display: none)
}

Пользователи клавиатуры могут оставаться внутри модального окна до тех пор, пока они не нажмут Enter или Return на кнопке закрытия. В этом случае вы можете создать массив всех кликабельных элементов в модальном окне и прослушивать, когда последний элемент в этом массиве получит фокус. Затем вы можете вернуть фокус первому элементу массива, чтобы предотвратить его выход из модального окна.

Последнее соображение по поводу доступности — возвращение фокуса на элемент, который вызвал открытие модального окна. Вы можете добиться этого, объявив переменную для хранения активного элемента:

javascriptCopy code
let activeElement;
// When the triggering element is clicked, set the activeElement value:
activeElement = document.activeElement;
// After closing the modal, use activeElement to return focus to the trigger:
activeElement.focus();

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