Навигация по Chrome DevTools с помощью вспомогательных технологий

Роб Додсон

Это руководство призвано помочь пользователям, которые в основном полагаются на вспомогательные технологии (АТ), такие как программы чтения с экрана, получить доступ к инструментам разработчика Chrome и использовать их. Инструменты разработчика Chrome — это набор инструментов для веб-разработчиков, встроенных в браузер Google Chrome. Если вы ищете информацию о функциях инструментов разработчика, связанных с повышением доступности веб-страницы, обратитесь к Справочнику по доступности .

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

Обзор

DevTools разделен на ряд панелей , которые организованы в виде tablist ARIA . Например:

  • Панель «Элементы» позволяет просматривать и изменять узлы DOM или CSS .
  • Панель «Консоль» позволяет читать журналы JavaScript и редактировать объекты в режиме реального времени.

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

Клавиатурные сочетания

Справочник по сочетаниям клавиш в DevTools — это полезная шпаргалка. Обязательно добавьте его в закладки и обращайтесь к нему по мере изучения различных панелей.

Открыть инструменты разработчика

Для начала ознакомьтесь с инструкцией «Открыть инструменты разработчика Chrome» . Существует несколько способов открыть инструменты разработчика: с помощью сочетаний клавиш или пунктов меню.

Перемещайтесь между панелями

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

Навигация с помощью клавиатуры

  • При открытом окне «Инструменты разработчика» нажмите Control + ] или Command + ] (Mac), чтобы перейти к следующей панели.
  • Нажмите Control + [ или Command + [ (Mac), чтобы сфокусироваться на предыдущей панели.
  • Также можно использовать сочетание клавиш Shift + Tab для перемещения фокуса на tablist панели и клавиши со стрелками для переключения между панелями, хотя использование упомянутых выше сочетаний клавиш может быть быстрее.

Известные проблемы

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

Навигация через меню команд.

Для выделения определенной панели используйте меню «Команды» :

  1. Откройте DevTools и нажмите Control + Shift + P или Command + Shift + P (Mac), чтобы открыть меню команд . Меню команд представляет собой выпадающий список с автозаполнением и нечетким поиском.
  2. Введите название панели, которую хотите открыть, затем используйте сочетание клавиш «Стрелка вниз» для перехода к нужному пункту.
  3. Нажмите Enter , чтобы выполнить команду.

Например, чтобы открыть панель «Элементы» :

  1. Откройте меню команд .
  2. Введите E , затем L. Выбран параметр « Панель > Показать элементы» .
  3. Нажмите Enter , чтобы выполнить команду, которая откроет панель.

Открытие панели таким способом направляет фокус на содержимое самой панели. В случае панели «Элементы» фокус перемещается в дерево DOM .

Панель элементов

Проверить элемент на странице

  1. С помощью курсора программы чтения с экрана перейдите к элементу, который хотите проверить.
  2. Имитируйте щелчок правой кнопкой мыши по элементу, чтобы открыть контекстное меню.
  3. Выберите пункт « Просмотреть код элемента» . Это откроет панель «Элементы» и выведет элемент в DOM-дерево в фокус.

Дерево DOM представлено в виде ARIA- tree . Пример можно посмотреть в разделе «Навигация по дереву DOM с помощью клавиатуры» .

Скопируйте код элемента в DOM-дереве.

  1. Установив фокус на узел в DOM-дереве , вызовите контекстное меню, вызываемое щелчком правой кнопки мыши.
  2. Разверните параметр «Копировать» .
  3. Выберите «Копировать outerHTML» .

Известные проблемы

  • Функция copy outerHTML часто выбирает родительский узел, а не нужный. Однако содержимое элемента должно оставаться в скопированном внутри outerHTML .

Изменение атрибутов элемента в DOM-дереве

  • Установив фокус на узел в DOM-дереве , нажмите Enter , чтобы сделать его редактируемым.
  • Нажмите клавишу Tab для перемещения между значениями атрибутов. Когда вы услышите звук «пробел», вы окажетесь внутри пустого текстового поля и сможете ввести новое значение атрибута.
  • Нажмите Control + Enter или Command + Enter (Mac), чтобы подтвердить изменение и прослушать все содержимое элемента.

Известные проблемы

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

Редактирование HTML-кода элемента в DOM-дереве

  • Установив фокус на узел в DOM-дереве , нажмите Enter , чтобы сделать его редактируемым.
  • Нажмите клавишу Tab для перемещения между значениями атрибутов. Когда вы услышите имя элемента, например, h2 , вы находитесь внутри текстового поля ввода и можете изменить тип элемента.
  • Нажмите Control + Enter или Command + Enter (Mac), чтобы подтвердить изменение.

Например, если ввести h3 и нажать Control + Enter или Command + Enter (Mac), то начальный и конечный теги элемента изменятся на h3 .

Вкладки панели «Элементы»

Панель «Элементы» содержит дополнительные вкладки для просмотра таких параметров, как примененные к элементу CSS-стили или его место в дереве доступности.

  • Установив фокус на узел в DOM-дереве , нажимайте клавишу Tab до тех пор, пока не услышите звук выбора панели «Стили» .
  • Используйте стрелку вправо, чтобы просмотреть другие доступные вкладки.

Дерево DOM преобразует элементы с атрибутом href в фокусируемые ссылки, поэтому для доступа к панели стилей может потребоваться несколько нажатий клавиши Tab .

Известные проблемы

Вкладки «Точки останова DOM» и «Свойства» недоступны для нажатия с клавиатуры.

Панель стилей

В панели «Стили» вы найдете элементы управления для фильтрации стилей, переключения состояний элементов (например :active и :focus ), переключения классов и добавления новых классов. Также имеется мощный инструмент проверки стилей для изучения и изменения стилей, применяемых к элементу, находящемуся в фокусе в DOM-дереве .

Ключевое понятие, которое необходимо понимать о панели «Стили», заключается в том, что она отображает стили только для текущего выбранного узла в дереве DOM . Например, предположим, вы закончили просмотр стилей узла <header> и теперь хотите посмотреть стили для узла <footer> . Для этого необходимо выбрать узел <footer> в дереве DOM .

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

Перейдите в панель «Стили».

Поскольку все инструменты стилизации так или иначе связаны с панелью «Стили» , имеет смысл сначала освоить именно этот инструмент.

  • Наведя фокус на панель «Стили» , нажмите клавишу Tab , чтобы переместить фокус внутрь и изучить ее содержимое.
  • Нажимайте клавишу Tab , пока не активируется первый стиль. Если вы используете программу чтения с экрана, этот первый стиль будет озвучен как " element.style {} ".
  • Нажмите стрелку вниз, чтобы перемещаться по списку стилей в порядке их детализации. Программа чтения с экрана озвучивает каждый стиль, начиная с имени файла CSS, номера строки, на которой находится стиль, и самого имени стиля. Например: " main.css:233 .card__img {} "
  • Нажмите Enter , чтобы более подробно изучить стиль. Фокус внимания остановится на редактируемой версии названия стиля.
  • Нажмите клавишу Tab , чтобы переключаться между редактируемыми версиями каждого свойства CSS и соответствующими им значениями. В конце каждого блока стилей находится пустое редактируемое текстовое поле, которое можно использовать для добавления дополнительных свойств CSS.
  • Вы можете продолжать нажимать клавишу Tab для перемещения по списку стилей или нажать клавишу Escape , чтобы выйти из этого режима и вернуться к навигации с помощью клавиш со стрелками.

Для получения информации о дополнительных сочетаниях клавиш ознакомьтесь со справочником по сочетаниям клавиш в панели «Стили» .

Известные проблемы
  • Если вы используете редактируемое текстовое поле «Фильтр» , вы не сможете перемещаться по списку стилей.

Переключить состояние элемента

Для переключения состояния элемента, например, с помощью :active или :focus :

  1. Перейдите в панель «Стили» и нажимайте клавишу Tab, пока кнопка «Переключить состояние элемента» не получит фокус.
  2. Нажмите Enter , чтобы развернуть список состояний элементов. Состояния элементов отображаются в виде группы флажков.
  3. Нажимайте клавишу Tab, пока первое состояние, :active , не получит фокус.
  4. Нажмите пробел , чтобы включить его. Если у выбранного в данный момент элемента в DOM-дереве есть стиль :active , он будет применен.
  5. Продолжайте нажимать клавишу Tab , чтобы просмотреть все доступные состояния.

Добавить существующий класс

Рядом с кнопкой «Переключить состояние элемента» находится кнопка « Классы элементов ». Переместите на неё фокус, нажав клавишу Tab , а затем Enter . Фокус переместится в текстовое поле с надписью «Добавить новый класс» .

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

Добавить новое правило стиля

Рядом с кнопкой «Классы элементов» находится кнопка «Новое правило стиля» . Переместите на неё фокус, нажав клавишу Tab , а затем Enter . Фокус переместится в редактируемое текстовое поле в инспекторе стилей. Начальное содержимое поля — это имя тега элемента, выбранного в дереве DOM . Вы можете ввести в это поле любое имя класса, а затем нажать Tab , чтобы назначить ему свойства CSS.

Вкладка "Вычисления"

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

Изучите все вычисленные стили.

Нажимайте клавишу Tab, пока не дойдете до списка вычисляемых стилей. Они представлены в виде ARIA- tree . Развернув список, вы увидите, какие CSS-селекторы применяют вычисляемый стиль. Эти селекторы организованы по специфичности.

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

Известные проблемы

  • Если вы используете текстовое поле «Фильтр» , вы больше не сможете просматривать стили.

вкладка «Слушатели событий»

В панели «Элементы» вы можете просмотреть обработчики событий, примененные к элементу, используя вкладку « Обработчики событий» . Установив фокус на панель «Стили» , нажмите стрелку вправо, чтобы перейти на вкладку «Обработчики событий» .

Изучите слушателей мероприятий

Обработчики событий представлены в виде ARIA- tree . Для навигации по ним можно использовать клавиши со стрелками. Программа чтения с экрана озвучивает имя DOM-объекта, к которому привязан обработчик событий, а также имя файла, в котором определен обработчик событий, и номер строки.

Панель доступности

Наведя фокус на панель «Доступность» , нажмите клавишу Tab , чтобы переместить фокус внутрь и изучить ее содержимое. В панели «Доступность» находятся элементы управления для просмотра дерева доступности, атрибутов ARIA, применяемых к элементу, и его вычисляемых свойств доступности.

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

Дерево доступности представлено в виде ARIA- tree , где каждый treeitem соответствует элементу в DOM. Дерево объявляет вычисленную роль для выбранного узла. Обобщенные элементы, такие как div и span , объявляются в дереве как "GenericContainer". Используйте клавиши со стрелками для обхода дерева и изучения взаимосвязей "родитель-потомок".

Известные проблемы

  • Тип дерева ARIA, используемый панелью специальных возможностей , может быть недоступен в Chrome для программ чтения с экрана macOS, таких как VoiceOver. Подпишитесь на обсуждение проблемы Chromium #868480, чтобы быть в курсе прогресса в её решении.
  • Разделы «Атрибуты ARIA» и «Вычисляемые свойства» оформлены как ARIA-деревья, но не включают управление фокусом. Это означает, что управление этими разделами с помощью клавиатуры невозможно.

Аудиторская комиссия

Панель «Аудит» позволяет запускать серию тестов сайта для выявления распространенных проблем, связанных с производительностью, доступностью, SEO и рядом других категорий.

Настройте и запустите аудит.

  1. При первом открытии панели «Аудит» фокус устанавливается на кнопку «Запустить аудит» в конце формы. По умолчанию форма настроена на запуск аудита для каждой категории с использованием эмуляции мобильной связи на имитированном 3G-соединении.
  2. Для изменения настроек аудита используйте сочетание клавиш Shift + Tab или вернитесь назад в режиме просмотра.
  3. Когда будете готовы запустить аудит, вернитесь к кнопке «Запустить аудит» и нажмите Enter .
  4. Внимание перемещается в модальное окно с кнопкой «Отмена» , которая позволяет выйти из аудита. Во время проведения аудита и многократного обновления страницы может раздаться ряд звуковых сигналов.

Известные проблемы

  • Различные разделы формы конфигурации не помечены элементом fieldset . Возможно, будет проще перемещаться по ним в режиме просмотра, чтобы понять, какие элементы управления связаны с каждым разделом.
  • После завершения аудита не появляется никаких звуковых сигналов или объявлений о текущем регионе. Обычно это занимает около 30 секунд, после чего вы сможете перейти к результатам. Используйте режим просмотра, чтобы быстро получить доступ к результатам.

Просмотрите аудиторский отчет.

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

Чтобы запустить новый аудит, используйте сочетание клавиш Shift + Tab для выхода из отчета и найдите кнопку «Выполнить аудит» .