Почему важна доступность и как вы можете проверить и в конечном итоге исправить это на своем веб-сайте.

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

«Подождите ... Этот веб-сайт доступен?»

Веб-тренды

Мир веб-разработки постоянно меняется. Новые тенденции появляются каждый месяц, а тенденции, которые кажутся многообещающими, в мгновение ока устаревают. Мы все согласны с тем, что веб-доступность - это не тенденция, а, скорее, всеобъемлющая практика. Несмотря на это, это рассматривается как тренд, и в то же время он, как ни странно, стал чем-то менее актуальным и интересным, чем другие тенденции, такие как Web AR или Service Workers.

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

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

Спойлер: Интернет не так доступен.

Возвращаясь к исходной истории этой статьи, если она еще не ясна, ответ часто: нет.

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

  • структура страницы (HTML, XML и т. д.) и атрибуты элементов
  • рекомендации по стилю (например, цветовые контрасты)
  • навигация с помощью клавиатуры.
  • другие второстепенные аспекты.

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

Мы хотели бы немного помочь экосистеме веб-доступности. Мы представим набор инструментов, которые упростят проверку и устранение проблем со структурой страницы и рекомендациями по стилю (мы уже рассмотрели навигацию с помощью клавиатуры в другой статье). Этого недостаточно, чтобы сделать сайт действительно доступным, но, по крайней мере, мы можем сделать его совместимым с несколькими Руководящими принципами веб-доступности W3C (WCAG).

Давайте начнем!

Проект Pa11y

Pa11y - это проект, включающий в себя набор инструментов для проверки доступности сайта. Среди W3C Accessibility Tools List он является моим фаворитом за его гибкость, которая позволяет использовать его API-интерфейсы Javascript, а также инструменты CI.

Основным интерфейсом Pa11y является Инструмент командной строки. Чтобы впервые увидеть его потенциал, вы можете набрать на терминале:

npm install -g pa11y

чтобы установить Pa11y, а затем:

pa11y --standard WCAG2AAA --reporter json http://google.com > report.json

Pa11y протестирует веб-сайт Google, используя стандарт W3C «тройной А», и выведет отчет в файл JSON.

Вы можете проверить все остальные возможности команды на странице Github или набрав

pa11y --help

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

Можем ли мы сделать еще больше?

Как видите, существует множество возможностей, но мы также видели недостаток простоты для проверки веб-сайтов, а также отсутствие продвинутого инструмента для веб-разработчиков.

Это привело нас как команду к разработке двух дополнительных инструментов для Pa11y CLI: расширения браузера и веб-приложения. Мы также дали название нашей новой экосистеме проверки доступности: она называется A11ygator.

Встречайте A11ygator

Прежде всего, давайте посмотрим на наше расширение для браузера A11ygator.

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

Благодаря интеграции с DevTools, легко проверять элементы и быстро обновлять правила CSS или атрибуты HTML, чтобы они соответствовали требуемому стандарту WCAG. Чтобы получить полный отчет о странице, используйте раздел Chrome DevTools (Elements > A11ygator). Вы можете проверять и решать проблемы доступности отладки.

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

На данный момент это расширение свободно доступно для Chrome и Firefox.

Другой инструмент, который мы рады представить, - это веб-приложение A11ygator, которое можно найти по адресу https://a11ygator.chialab.io.

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

Он использует Pa11y под капотом и предоставляет простой интерфейс с формой, которая позволяет вам выбрать стандарт WCAG и время ожидания - время ожидания, прежде чем A11ygator фактически начнет тестирование, полезно для веб-сайтов, которым может потребоваться несколько секунд для отображения содержимого. .

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

A11ygator говорит, что на моем сайте нет проблем… так что он доступен!

Ну нет. Мы действительно хотим, чтобы вы поняли этот фундаментальный аспект доступности Интернета.

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

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

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

A11ygator - проект с открытым исходным кодом от Chialab. Если вы разработчик, желающий помочь нам улучшить эту экосистему, вы можете проверить репозитории здесь:

Chialab - дизайнерская компания. Разрабатывая стратегию, дизайн, программное обеспечение и контент, мы создаем захватывающие отношения между брендами и людьми. Https://www.chialab.it.