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

Кейси Баски
Кейси Баски
София Емельянова
София Емельянова

Эта страница представляет собой подробный справочник по специальным возможностям в Chrome DevTools. Он предназначен для веб-разработчиков, которые:

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

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

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

Обзор специальных возможностей в Chrome DevTools

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

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

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

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

Аудит доступности страницы

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

Чтобы проверить страницу:

  1. Перейдите по URL-адресу, который вы хотите проверить.
  2. В DevTools перейдите на вкладку «Маяк» . DevTools показывает различные варианты конфигурации.

    Настройка сканирования доступности на панели Lighthouse.

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

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

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

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

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

    Отчет.

  8. Нажмите на аудит, чтобы узнать о нем больше.

    Дополнительная информация об аудите.

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

    Просмотр документации аудита.

Смотрите также: расширение топора

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

Расширение топора.

Одним из преимуществ расширения Axe перед панелью «Аудит» является то, что оно позволяет проверять и выделять неисправные узлы.

Панель «Доступность»

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

Чтобы открыть панель «Доступность»:

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

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

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

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

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

Раздел «Дерево доступности»

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

(Предварительная версия) Изучите полностраничное дерево специальных возможностей

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

Чтобы изучить дерево доступности:

  1. Проверять Наука Включить полностраничное дерево доступности .
  2. На панели действий вверху нажмите «Обновить DevTools» .

    Включить полностраничное дерево доступности

  3. В правом верхнем углу панели «Элементы» переключите Доступность Переключитесь на кнопку просмотра дерева доступности .

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

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

  5. Выберите узел и нажмите кнопку Доступность Переключитесь на кнопку просмотра дерева DOM , чтобы вернуться к дереву DOM.

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

Просмотр атрибутов ARIA элемента

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

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

Раздел «Атрибуты ARIA»

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

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

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

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

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

Опция исходного порядка проверена.

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

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

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

Раздел «Вычисляемые свойства (доступность)».

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

DevTools может автоматически обнаруживать проблемы с низкой контрастностью и предлагать лучшие цвета, чтобы помочь вам их исправить. Дополнительную информацию см. в разделе Сделайте свой веб-сайт более читабельным .