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

Glafira Zhur
Nov 5, 2019 · 3 min read

Перевод «Beyond automatic accessibility testing» Мануэля Матузовича

Image for post
Image for post

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

Прежде всего я запускаю тест доступности в Lighthouse, чтобы выяснить, есть ли какие-то очевидные проблемы. Автоматизированные тесты хороши, но они проверяют только часть того, что должны. Можно получить 100 баллов или 0 ошибок, но это не означает, что уже всё хорошо. Вы лишь заложили основу для ручного тестирования.

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

Раздел настроек изображений в панели интсруметов расширения Web Developer.
Раздел настроек изображений в панели интсруметов расширения Web Developer.
Раздел настроек изображений в панели инструментов расширения Web Developer

Ещё одной полезной функцией расширения Web Developer является его способность отключения стилей на странице. Отключение CSS поможет проверить различные вещи:

  • Работает ли сайт без стилей? (например, когда они не загрузились)
  • Правильный ли порядок элементов на странице?
  • Корректный ли размер у картинок и иконок?
  • Хорошо ли структурирован ваш документ?
Страница расписания на сайте webclerks.at с отключённым CSS
Страница расписания на сайте webclerks.at с отключённым CSS
Страница расписания на сайте webclerks.at с отключённым CSS

Вы можете использовать W3C Markup Validation Service для проверки разметки. Валидатор не отлавливает все ошибки, но это в любом случае хороший способ обнаружения очевидных багов в вашем HTML, например, дублирующихся id или сломанных ARIA-атрибутов.

Случайные ошибки на странице результатов W3C-валидатора
Случайные ошибки на странице результатов W3C-валидатора
Ошибки на странице результатов W3C-валидатора

Большое значение имеет хорошо продуманная структура документа. Она должна начинаться с <h1>, за которым в иерархическом порядке следуют <h2>, <h3>, и т.д. Это отлично подходит для поисковых систем и пользователей скринридеров, ведь так они могут перемещаться по вашему сайту, прыгая по заголовкам.

Список заголовоков на сайте webclerks.at. Скриншот из инструмента tota11y
Список заголовоков на сайте webclerks.at. Скриншот из инструмента tota11y
Список заголовоков на сайте webclerks.at (сриншот из tota11y)

Для проверки структуры документа можно использовать W3C Markup Validation Service или инструмент tota11y (см. скриншот выше).

Для отображения сайтов в монохромном режиме я использую браузерное расширение High Contrast. Это важный тест: он покажет те элементы дизайна, которые работают только с цветом. Следует убедиться, что вы не используете исключительно цвет для передачи информации. Идеальный пример — ссылки: они должны быть подчёркнуты, чтобы можно было легко отличить их от обычного текста. Подчёркивания — это прекрасно!

Подчёркивайте ваши чёртовы ссылки, социопаты! — Хейдон Пикеринг

Сайт The Smashing Magazine в режиме оттенков серого
Сайт The Smashing Magazine в режиме оттенков серого
Сайт The Smashing Magazine в монохромном режиме.

Не обязательно устанавливать расширение, можно использовать CSS для получения такого же эффекта:

body { 
filter: grayscale(100%);
}

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

  • Хорошо ли видны стили состояния фокуса?
  • Всё ли, что должно иметь фокус, может его получить?
  • Действительно ли ваши кнопки <button>?
  • Удобно ли вообще использовать клавиатуру на вашем сайте?
  • Правильно ли вы управляете фокусом?
  • Правильно ли прячутся и отображаются элементы?
  • Соответствует ли визуальный порядок элементов реальному порядку в DOM-дереве?
  • Можете ли вы использовать кастомные JS-компоненты без мыши?

Есть даже npm-пакет для отключения курсора мыши, созданный чудесной Марси Саттон.

Это не конец истории. Существует ещё немало вещей, которые стоит тестировать, но сейчас хватит и этих. Я расскажу больше в другом посте :)

Web Standards

Сообщество разработчиков

Glafira Zhur

Written by

Web Standards

Сообщество разработчиков

Glafira Zhur

Written by

Web Standards

Сообщество разработчиков

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store