Доступность в приложениях JavaScript

Недавно я смотрел прекрасную лекцию Марси Саттон о специальных возможностях в приложениях JavaScript на Frontend Masters.

Марси Саттон в настоящее время является ведущим разработчиком программного обеспечения в Gatsby (один из моих любимых инструментов для создания быстрых современных веб-приложений), и она уже довольно давно является профессионалом в области специальных возможностей. Она была защитником разработчиков в команде axe-core и инженером по специальным возможностям в Adobe.

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

На самом деле лекция Марси охватывает так много тем, что для меня было бы плохой услугой, если бы я попытался рассмотреть их все в этой статье. Вместо этого я расскажу о пяти основных выводах, которые я получил из этой лекции, и о том, как каждый из них может помочь дизайнерам и разработчикам создавать более доступные продукты.

Отладка специальных возможностей

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

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

То же самое касается ваших слепых и слабовидящих пользователей. Пользователи с плохим зрением сталкиваются с рядом проблем с доступностью в Интернете. Чтобы убедиться, что ваш сайт доступен для этих пользователей, попробуйте увеличить окно браузера не менее чем на 200 % и посмотрите, можно ли по-прежнему пользоваться вашим сайтом. Вам нужно прокручивать по горизонтали, чтобы просмотреть всю страницу? Это может быть далеко не идеальным для многих пользователей с плохим зрением, что значительно усложняет то, что может быть простой задачей. Для слепых пользователей важно протестировать свой сайт с помощью программы чтения с экрана и убедиться, что все содержимое вашего сайта воспринимается через нее.

У программ чтения с экрана может быть определенная кривая обучения, поэтому полезно иметь под рукой некоторые шпаргалки по командам чтения с экрана, которые Марси также предоставляет в своем курсе вместе с большим количеством других ресурсов доступности: https://dequeuniversity.com/screenreaders/

Использование правильных семантических элементов

Марси постоянно подчеркивает правильное использование семантических элементов HTML на протяжении всего курса, и на то есть веские причины. В своем курсе Марси демонстрирует, что требуется несколько строк кода, чтобы добиться того, что можно сделать с помощью простого тега ‹button /›. Становится намного проще забыть включить базовые функции специальных возможностей, которые обеспечивают эти HTML-теги, когда вы пытаетесь создать их собственные пользовательские версии. Вы же не хотите, чтобы ваши приложения были «супом из div», как выразилась Марси.

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

Чтобы получить подробное описание того, какие элементы имеют ориентиры в ARIA, а какие — на этой странице веб-сайта W3C: https://www.w3.org/TR/wai-aria-practices/examples/landmarks/ HTML5.html

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

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

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

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

Это обе вещи, которые Марси подробно показывает вам, как построить с помощью React, поэтому обязательно ознакомьтесь с этим, если у вас есть возможность. Если мы все разрабатываем с учетом доступности и управления фокусом, мы все можем создавать гораздо более доступные и полезные компоненты.

Автоматизированное тестирование

Одним из самых важных выводов, которые я вынес из этого курса, была важность автоматизированного тестирования. Тестирование может повысить уровень уверенности в вашем коде и предотвратить нарушение тех аспектов вашего приложения, которые в противном случае вы бы пропустили. Существуют различные виды автоматизированного тестирования:

Модульное тестирование

Модульное тестирование позволяет вам тестировать функциональность ваших компонентов самостоятельно. Это для тех случаев, когда вы хотите проверить, как компонент работает изолированно, без каких-либо вызовов API или рендеринга всего приложения. Jest — это фантастический инструмент для написания тестов на JavaScript, и вместе со всеми полезными утилитами, предоставляемыми библиотеками тестирования, они позволяют легко запрашивать DOM и делать утверждения для тестов ваших компонентов.

Интеграция и сквозное тестирование

Существует много споров о том, в чем на самом деле разница между ними, но Кент С. Додд описывает комплексные тесты как робот-помощник, который ведет себя как пользователь, нажимая на приложение и проверяя, правильно ли оно работает, в то время как интеграционные тесты проверяют. что несколько единиц работают вместе в гармонии». Прочтите его статью Статическое, модульное, интеграционное и E2E-тестирование для внешних приложений, если хотите узнать больше. Эти тесты могут быть написаны на Cypress, который быстро стал любимым инструментом тестировщиков интеграции с момента его появления на сцене тестирования JavaScript.

Вынос

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

Ручное тестирование

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

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

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

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

Fable — отличный пример компании, которая предоставляет такое доступное пользовательское тестирование как услугу, обязательно ознакомьтесь с ними, если вы заинтересованы в проведении пользовательского тестирования.

Вывод

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

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

Ссылки по теме