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 .

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

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

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

Если вы используете фреймворк 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;");

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

Возможное неправильное использование Правильное использование
Рендеринг больших фрагментов несемантического HTML Рендеринг небольших фрагментов семантического HTML
Недостаток времени на распознавание динамического контента с помощью вспомогательных технологий. Использование задержки времени setTimeout() , чтобы пользователи могли услышать полное сообщение.
Динамическое применение атрибутов стиля для onFocus() Используйте :focus для связанных элементов в таблице стилей CSS.
Применение встроенных стилей может привести к неправильному чтению пользовательских таблиц стилей. Сохраняйте стили в файлах CSS, чтобы сохранить единообразие темы.
Создание очень больших файлов JavaScript, которые замедляют общую производительность сайта. Используйте меньше JavaScript. Вы можете выполнять аналогичные функции в CSS (например, анимацию или липкую навигацию), которые анализируют быстрее и более производительны.

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

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

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

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

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

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

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

Не
Делать

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

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

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

Для этого существует несколько методов:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проверьте свое понимание

Проверьте свои знания Javascript

Какой способ лучше всего изменить стиль элемента с помощью JavaScript?

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

Могут ли все действия JavaScript поддерживать пользователей клавиатуры?

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