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

Роб Додсон

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

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

Обзор

Прежде чем начать, полезно иметь мысленную модель структуры пользовательского интерфейса DevTools. DevTools разделен на ряд панелей , которые организованы в tablist ARIA . Например:

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

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

Горячие клавиши

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

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

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

Навигация между панелями

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

  • Открыв DevTools, нажмите 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 представляет собой tree ARIA . Пример см. в разделе «Навигация по дереву DOM с помощью клавиатуры» .

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

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

Известные вопросы

  • Копировать externalHTML часто не выбирает текущий узел, а вместо этого выбирает его родительский узел. Однако содержимое элемента все равно должно находиться в скопированном внешнем HTML.

Измените атрибуты элемента в дереве 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 Breakpoints и Properties недоступны с клавиатуры.

Панель «Стили»

На панели «Стили» вы найдете элементы управления для фильтрации стилей, переключения состояний элементов (например :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, пока не дойдете до коллекции вычисленных стилей. Они представлены в виде tree ARIA. Развертывание списка показывает, какие селекторы CSS применяют вычисленный стиль. Эти селекторы организованы по специфике. Средство чтения с экрана объявляет вычисленное значение, которому в данный момент соответствует селектор CSS, имя файла таблицы стилей, содержащей селектор, и номер строки для селектора.

Известные вопросы

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

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

На панели «Элементы» вы можете проверить прослушиватели событий, примененные к элементу, с помощью вкладки «Прослушиватели событий» . Перейдя на панель «Стили» , нажмите стрелку вправо, чтобы перейти на вкладку «Прослушиватели событий» .

Изучите прослушиватели событий

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

Панель специальных возможностей

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

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

Дерево доступности представлено в виде tree ARIA, где каждый 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 , чтобы выйти из отчета, и найдите кнопку «Выполнить аудит» .