7 способов проверить доступность вашего сайта с помощью инструментов разработчика в браузере

No items found.
Аудио перевод статьи
0:00
0:00
·

Существует много способов проверить, есть ли на вашем веб-сайте проблемы с доступностью.

Сервисы, пакеты программного обеспечения и даже компании, проводящие испытания на людях. Они все занимают собственные ниши, и зачастую лучшее, что они могут сделать — провести тестирование с участием реальных людей. Однако, если ваша цель — быстрое, предварительное тестирование, нет необходимости устанавливать специальные программы или платить за услуги. Браузеры включают встроенные инструменты разработчика, которые обладают прекрасным функционалом для тестирования доступности. Далее приведен список соответствующих функций в инструментах разработчика таких браузеров, как Microsoft Edge и Google Chrome.

Панель “Проблемы”

Панель “Проблемы” отображает все виды проблем, которые возникают на просматриваемой веб-странице. Вы можете открыть ее напрямую, нажав на вкладку “Issues”, или кликнуть на соответствующую иконку в правом верхнем углу (она выглядит как синее облачко с текстом, такое используют обычно в комиксах). Сообщения о проблемах также можно увидеть в консоли.

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

Панель “Проблемы” работает на основе Webhint, сервиса, который проверяет наличие всех возможных видов проблем (и пакета NPM — на случай, если вы хотите использовать его в CI/CD процессе разработки).

В разделе “Доступность” отображается список проблем, для каждой указаны ссылки на соответствующие разделы инструментов разработчика, где можно подробнее изучить проблему и исправить ее, а также ссылки на дополнительные ресурсы по теме.

Инструмент выбора элементов с модальным окном, содержащим информацию о доступности

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

  • тип HTML-элемента и информация о его классе/идентификаторе
  • размеры элемента
  • цвет текста
  • использованный шрифт
  • информация о внешних отступах

В дополнение к этому вы также получаете информацию о доступности:

  • коэффициент контрастности содержимого переднего плана и фона — если контраст достаточно высокий, вы увидите зеленую галочку, если нет — красный восклицательный знак
  • название элемента, которое будет озвучено вспомогательными технологиями, например, программами чтения с экрана
  • ARIA-атрибут “role”
  • значок, показывающий попадет ли элемент в фокус при взаимодействии со страницей с помощью клавиатуры (если да, вы увидите зеленую галочку, если нет — серый перечеркнутый кружок)

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

Инструмент выбора цвета с проверкой контрастности

Как только вы обнаружили, что некоторые цвета на вашей странице недостаточно контрастны, вы можете использовать инструмент выбора цвета во вкладке “Элементы”, чтобы понять, как исправить ситуацию. Открыть инструмент выбора цвета можно, кликнув на любой цвет, показанный в CSS-коде элемента. 

На картинке отмечен цвет, показанный в CSS-коде элемента, кликнув на который можно открыть инструмент выбора цвета.

Внутри инструмента выбора цвета вы увидите раздел, в котором отображается коэффициент контрастности, а также показано, соответствует он уровню AA или AAA, определенному в веб-рекомендациях W3C. Когда какой-то цвет обладает недостаточным контрастом, инструмент выбора цвета предлагает альтернативные варианты, соответствующие требованиям. Чтобы выбрать один из них, просто нажмите на необходимый образец цвета.

Инструмент выбора цвета: сверху — поле выбора цвета с линиями, обозначающими соответствие уровню контрастности AA и AAA, снизу — раздел, в котором показан коэффициент контрастности, а также соответствие его уровню AA или AAA веб-рекомендаций W3C.

Инструмент выбора цвета также показывает две линии в поле выбора цвета, которые обозначают соответствие уровню контрастности AA или AAA (если фон темный, доступными будут цвета выше линии, если светлый — ниже). Так вы можете быстро увидеть, попадает ли цвет, который вы хотите использовать, в какой-то из этих разделов.

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

Как активировать новый алгоритм определения контрастности: выбрать раздел “Настройки” в инструментах разработчика, затем перейти во вкладку “Эксперименты”.

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

Инструмент выбора цвета после того, как был активирован экспериментальный алгоритм определения контрастности цветов.

Эмуляция проблем со зрением

То, как вы воспринимаете свой веб-сайт, отличается от того, как его воспринимают другие люди. Вот почему мы добавили возможность эмулировать различные проблемы со зрением. Эту функцию можно включить в разделе “Рендеринг” инструментов разработчика. Используя ее, вы можете посмотреть, как ваш сайт видят люди с нарушениями зрения:

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

  • Размытое (затуманенное) зрение — пользователю трудно сфокусироваться на мелких деталях.
  • Протанопия — пользователь не воспринимает красный цвет и его оттенки.
  • Дейтеранопия — пользователь не воспринимает зеленый цвет и его оттенки.
  • Тританопия — пользователь не воспринимает синий цвет и его оттенки.
  • Ахроматопсия — пользователь не воспринимает любые цвета и видит все в оттенках серого.

Выберите один из этих вариантов и цвета на сайте автоматически изменятся.

Пример эмуляции нарушений зрения: сайт Flickr выглядит так, как его видят люди с протанопией.

Эмуляция рендеринга (темный / светлый режим, режим высокой контрастности, режим уменьшенного движения)

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

Кроме того, вы можете переключаться из темного режима в светлый, не меняя настройки вашего компьютера.

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

Сайт Reddit с эмуляцией режима высокой контрастности.

Дерево доступности

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

Отображение порядка элементов в исходном коде веб-страницы (экспериментальная функция)

С помощью CSS вы можете изменять порядок отображения элементов на странице. Однако это изменение не является частью исходного кода документа и поэтому не будет восприниматься вспомогательными технологиями, такими как программы чтения с экрана. При включении функции “Source Order Viewer” инструменты разработчика показывают в браузере поверх каждого элемента его порядковый номер, и вы можете проверить, что они не просто отображаются на экране близко друг к другу, но и располагаются в аналогичном порядке для незрячих пользователей или поисковых систем.

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

Продолжение следует

Мы постоянно развиваем возможности проверки доступности в инструментах разработчика и открыты для обратной связи. Смело пишите мне или находите @EdgeDevTools в Twitter.

Источник:
christianheilmann.com
·
comments powered by HyperComments