JavaScript

JavaScript играет важную роль практически во всем, что мы создаем — от небольших динамических компонентов до полноценных продуктов, работающих на основе JavaScript-фреймворков, таких как React или Angular.

Чрезмерное использование JavaScript привело к появлению множества тревожных тенденций, таких как длительное время загрузки из-за большого количества кода, использование несемантических HTML-элементов и внедрение HTML и CSS через JavaScript. И вы, возможно, не уверены в том, как доступность вписывается в каждый из этих аспектов.

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

События-триггеры

События JavaScript позволяют пользователям взаимодействовать с веб-контентом и выполнять определенные действия. Многие люди, например, пользователи программ чтения с экрана, люди с нарушениями мелкой моторики, люди без мыши или трекпада и другие, полагаются на поддержку клавиатуры для взаимодействия с веб-сайтами. Крайне важно добавить поддержку клавиатуры в ваши действия JavaScript, поскольку это влияет на всех этих пользователей.

Рассмотрим событие клика . Если событие onClick() используется для семантического HTML-элемента, такого как <button> или <a> , оно, естественно, включает в себя как функциональность мыши, так и функциональность клавиатуры. Однако функциональность клавиатуры не применяется автоматически, когда событие onClick() добавляется к несемантическому элементу, например, к обычному <div> .

<div role="button" tabindex="0" onclick="doAction()">Click me!</div>

<button onclick="doAction()">Click me!</button>

Предварительный просмотр этого сравнения доступен на CodePen .

Если для запуска события используется несемантический элемент, необходимо добавить событие keydown/keyup для обнаружения нажатия клавиши Enter или Space. Добавление событий запуска к несемантическим элементам часто забывают. К сожалению, если об этом забыть, в результате получается компонент, доступный только с помощью мыши. Пользователи, использующие только клавиатуру, остаются без доступа к соответствующим действиям.

Заголовки страниц

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

Если вы используете JavaScript-фреймворк, вам необходимо продумать обработку заголовков страниц. Это особенно важно для одностраничных приложений (SPA), которые загружаются из одного файла index.html , поскольку переходы или маршруты (смена страниц) не требуют перезагрузки страницы. Каждый раз, когда пользователь загружает новую страницу в SPA, заголовок по умолчанию не меняется.

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

Динамический контент

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

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

Для задания содержимого можно использовать элемент innerHTML :

document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';

Аналогичным образом можно применять CSS-стили с помощью setAttribute :

document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");

Большая власть влечет за собой большую ответственность. К сожалению, внедрение HTML и CSS с помощью JavaScript исторически использовалось не по назначению для создания недоступного контента. Ниже перечислены некоторые распространенные случаи неправильного использования:

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

Управление фокусом

В модуле «Фокусировка клавиатуры» мы рассмотрели порядок фокусировки и стили индикаторов. Управление фокусировкой — это знание того, когда и где следует удерживать фокус, а когда этого делать не следует.

Управление фокусом имеет решающее значение для пользователей, работающих только с клавиатурой.

Уровень компонентов

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

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

Уровень страницы

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

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

Для достижения этой цели существует несколько методов:

• С помощью объявления с атрибутом aria-live выделите основной контейнер.
• Верните фокус на ссылку, чтобы перейти к основному содержимому.
• Переместите фокус на заголовок верхнего уровня новой страницы.

Выбор направления для фокусировки будет зависеть от используемой платформы и контента, который вы хотите предоставить пользователям. Это может зависеть от контекста или от конкретных действий.

Государственное управление

Еще одна область, где JavaScript имеет решающее значение для обеспечения доступности, — это управление состоянием, или передача текущего визуального состояния компонента или страницы пользователю вспомогательных технологий с ослабленным зрением, слепотой или слепоглухотой.

Часто состояние компонента или страницы управляется с помощью атрибутов ARIA, как это было представлено в модуле ARIA и HTML . Давайте рассмотрим несколько наиболее распространенных типов атрибутов ARIA, используемых для управления состоянием элемента.

Уровень компонентов

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

Например, вы можете использовать атрибут aria-expanded , чтобы сообщить пользователю, развернуто или свернуто выпадающее меню или список.

Или же вы можете использовать aria-pressed , чтобы указать, что кнопка была нажата.

Важно избирательно подходить к применению атрибутов ARIA. Продумайте пользовательский сценарий, чтобы понять, какая важная информация должна быть передана пользователю.

Уровень страницы

Разработчики часто используют визуально скрытую область, называемую областью ARIA Live, для объявления изменений на экране и оповещения пользователей вспомогательных технологий (АТ). Эта область может быть дополнена JavaScript для уведомления пользователей о динамических изменениях на странице без необходимости полной перезагрузки страницы.

Исторически сложилось так, что JavaScript испытывал трудности с озвучиванием контента в областях с aria-live и alert из-за их динамической природы. Асинхронное добавление контента в DOM затрудняет для AT-технологий распознавание области и её озвучивание. Для корректного чтения контента область с атрибутами live или alert должна присутствовать в DOM при загрузке, после чего текст может динамически заменяться.

Если вы используете JavaScript-фреймворк, хорошая новость в том, что почти во всех из них есть пакет "live announcer", который делает всю работу за вас и полностью доступен. Вам не нужно беспокоиться о создании региона для прямой трансляции и решении проблем, описанных в предыдущем разделе.

Вот несколько работающих пакетов для распространенных JavaScript-фреймворков:

• React: react-aria-live и react-a11y-announcer
• Angular: LiveAnnouncer
• Vue: vue-a11y-utils

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