Справочник по специальным возможностям

Kayce Basques

Sofia Emelianova

Эта страница представляет собой исчерпывающий справочник по функциям доступности в инструментах разработчика Chrome. Она предназначена для веб-разработчиков, которые:

• Необходимо иметь базовое представление о DevTools, например, как его открыть.
• Знакомы с принципами и передовыми методами обеспечения доступности .

Цель этого справочника — помочь вам ознакомиться со всеми инструментами, доступными в DevTools, которые могут помочь вам проверить доступность страницы.

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

Если вы хотите узнать, как создавать доступные веб-сайты, посетите раздел «Изучение доступности» .

Обзор функций доступности в инструментах разработчика Chrome.

В этом разделе объясняется, как DevTools вписывается в ваш общий набор инструментов для обеспечения доступности.

При определении доступности страницы необходимо учитывать два основных вопроса:

1. Можно ли перемещаться по странице с помощью клавиатуры или программы чтения с экрана ?
2. Правильно ли размечены элементы страницы для программ чтения с экрана?

В целом, DevTools может помочь вам исправить ошибки, связанные с вопросом №2, поскольку эти ошибки легко обнаружить автоматически. Вопрос №1 не менее важен, но, к сожалению, DevTools здесь не поможет. Единственный способ найти ошибки, связанные с вопросом №1, — это попробовать использовать страницу с клавиатурой или программой чтения с экрана самостоятельно. Подробнее см. в разделе «Как провести проверку доступности» .

Проверьте доступность страницы.

В целом, используйте проверки доступности на панели Lighthouse , чтобы определить, соответствуют ли следующие условия:

• Страница корректно размечена для программ чтения с экрана.
• Текстовые элементы на странице имеют достаточный коэффициент контрастности. См. также: Как сделать ваш сайт более читабельным .

Для проверки страницы:

1. Перейдите по URL-адресу, который вы хотите проверить.

2. В инструментах разработчика щелкните панель Lighthouse . Инструменты разработчика отобразят различные параметры конфигурации.

   

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

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

5. В разделе «Регулирование» можно ограничить скорость сети и процессора, что полезно при анализе производительности под нагрузкой. Этот параметр не должен влиять на ваш показатель доступности, поэтому вы можете использовать любой удобный для вас вариант.

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

7. Нажмите «Создать отчет» . Через 10–30 секунд DevTools предоставит отчет. В отчете вы найдете различные рекомендации по улучшению доступности страницы.

   

8. Нажмите на запрос аудита, чтобы узнать о нем подробнее.

   

9. Нажмите «Узнать больше» , чтобы просмотреть документацию по данному аудиту.

   

См. также: расширение aXe

Возможно, вам будет удобнее использовать расширение aXe или Lighthouse вместо стандартной панели Lighthouse в Chrome. Как правило, они предоставляют одинаковую информацию, поскольку aXe — это базовый движок, на котором работает панель Lighthouse . Расширение aXe имеет другой пользовательский интерфейс и описывает проверки несколько иначе.

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

Проверьте переформатирование контента с помощью панели инструментов устройства.

Критерий переформатирования веб-контента согласно рекомендациям WCAG (Web Content Accessibility Guidelines) предполагает, что веб-контент должен оставаться видимым без потери информации даже при изменении размера области просмотра или ориентации экрана. Выравнивание контента по одной колонке обеспечивает поддержку пользователей, работающих с увеличенным текстом. Чтобы проверить, как переформатируется ваш контент, динамически измените размер области просмотра с помощью панели инструментов «Устройство» на панели Lighthouse .

Чтобы изменить размер области просмотра, перетащите маркеры до необходимых размеров. Конкретные размеры для проверки см. в критериях успешности переформатирования WCAG .

Вкладка «Доступность»

На вкладке «Доступность» можно просмотреть дерево доступности, атрибуты ARIA и вычисляемые свойства доступности узлов DOM.

Чтобы открыть вкладку «Специальные возможности» :

1. Нажмите на панель «Элементы» .
2. В дереве DOM выберите элемент, который хотите проверить.
3. Нажмите вкладку «Специальные возможности» . Эта вкладка может быть скрыта за кнопкой « Дополнительные вкладки» (keyboard_double_arrow_right) .

Вы можете перетащить вкладку «Специальные возможности» на передний план для более быстрого доступа в будущем.

Просмотреть положение элемента в дереве доступности

Дерево доступности является подмножеством дерева DOM. Оно содержит только те элементы дерева DOM, которые актуальны и полезны для отображения содержимого страницы в программе чтения с экрана.

Чтобы проверить положение элемента в дереве доступности на вкладке «Доступность» , включите параметр «Показать дерево доступности» .

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

Для просмотра дерева доступности вы можете развернуть и выбрать узлы, чтобы увидеть их подробные сведения в разделе «Вычисляемые свойства» .

В любой момент вы можете вернуться к дереву DOM. Соответствующий узел DOM останется выделенным. Это отличный способ понять соответствие между узлом DOM и узлом дерева доступности.

Просмотреть ARIA-атрибуты элемента

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

Просмотреть атрибуты ARIA элемента можно на вкладке «Доступность» .

Просмотрите исходный порядок элементов на экране.

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

Чтобы просмотреть и отладить порядок отображения исходного кода на вашем веб-сайте:

1. Проверьте элемент на странице.
2. В разделе «Элементы» > «Доступность» > «Просмотр порядка исходного кода» установите флажок « Показать порядок исходного кода» .

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

Просмотреть вычисленные свойства доступности элемента

Некоторые параметры доступности вычисляются браузером динамически. Эти параметры можно просмотреть в разделе «Вычисляемые параметры» на вкладке «Доступность» .

Просмотреть вычисленные свойства доступности элемента можно на вкладке «Доступность» .

Вкладка «Рендеринг»

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

• Имитируйте нарушения зрения , чтобы просматривать страницу в различных условиях, имитирующих разные типы зрительных нарушений.
• Используйте функцию CSS media prefers-color-scheme , чтобы увидеть, как выглядит ваша страница с включенным темным или светлым режимом. Многие считают темный режим просто эстетическим решением, но темный режим как инструмент обеспечения доступности доказывает свою полезность и в других отношениях.
• Используйте эмуляцию типов данных CSS , чтобы отобразить страницу в стиле для печати или просмотра на экране.
• Используйте функцию forced-colors в CSS-медиафайлах , чтобы увидеть, как будет выглядеть ваша страница, если в пользовательском агенте будет включен режим принудительного выбора цветов.
• Используйте функцию CSS media prefers-contrast , чтобы отображать веб-контент с более высоким, более низким или заданным значением контраста.
• Функция emulate CSS media prefers-reduced-motion позволяет отображать веб-контент с уменьшенным движением. Некоторые пользователи испытывают отвлечение внимания или тошноту от анимированного контента. Используйте эту опцию, чтобы увидеть, как выглядит ваша страница без анимации или таких функций, как плавная прокрутка.
• Используйте функцию CSS media prefers-reduced-transparency , чтобы увидеть, как будет выглядеть ваш веб-контент, если пользователь запросит уменьшение прозрачности или полупрозрачности используемых эффектов слоя на устройстве.

Обнаружение и исправление текста с низким контрастом

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