Это руководство призвано помочь пользователям, которые в основном полагаются на вспомогательные технологии, такие как программы чтения с экрана, получить доступ к Chrome DevTools и использовать их. Chrome DevTools — это набор инструментов для веб-разработчиков, встроенных в браузер Google Chrome. Если вам нужны функции DevTools, связанные с улучшением доступности веб-страниц, см. раздел «Справочник по доступности».
Доступность DevTools находится в стадии разработки. Некоторые панели и вкладки лучше работают с вспомогательными технологиями, чем другие. Это руководство познакомит вас с наиболее доступными панелями и осветит конкретные проблемы, с которыми вы можете столкнуться в процессе.
Обзор
Прежде чем начать, полезно представить себе структуру пользовательского интерфейса DevTools. DevTools разделён на ряд панелей , организованных в виде tablist ARIA . Например:
- Панель «Элементы» позволяет просматривать и изменять узлы DOM или CSS .
- Панель «Консоль» позволяет читать журналы JavaScript и редактировать объекты в режиме реального времени.
В области содержимого каждой панели находится ряд различных инструментов, которые в документации часто называются вкладками или панелями . Например, панель «Элементы» содержит дополнительные вкладки для просмотра прослушивателей событий, дерева доступности и многого другого. Различие между вкладками и панелями несколько условно. Единственная причина, по которой вы встретите тот или иной термин, — это соблюдение соответствия с остальной частью официальной документации DevTools.
Сочетания клавиш
Справочник сочетаний клавиш DevTools — полезная шпаргалка. Добавьте его в закладки и обращайтесь к нему, когда будете изучать различные панели.
Открытые инструменты разработчика
Для начала прочтите статью «Открыть инструменты разработчика Chrome» . Открыть инструменты разработчика можно несколькими способами: с помощью сочетаний клавиш или через пункты меню.
Навигация между панелями
Навигация с помощью клавиатуры
- Открыв DevTools, нажмите Control + ] или Command + ] (Mac), чтобы перейти к следующей панели.
- Нажмите Control + [ или Command + [ (Mac), чтобы перейти на предыдущую панель.
- Также можно использовать сочетание клавиш Shift + Tab для перемещения фокуса на
tablistпанели и использовать клавиши со стрелками для переключения панелей, хотя быстрее может оказаться использование ранее упомянутых сочетаний клавиш.
Известные проблемы
- Некоторые панели, такие как « Консоль» и «Производительность» , могут перемещать фокус в область своего содержимого сразу после активации. Это может затруднить навигацию с помощью клавиш со стрелками.
- Название выбранной панели объявляется, но только после того, как пользователь прочитает содержимое панели, на которой находится фокус. Это может привести к тому, что его легко пропустить.
Навигация по меню команд
Чтобы сфокусироваться на определенной панели, используйте меню команд :
- Открыв DevTools, нажмите Control + Shift + P или Command + Shift + P (Mac), чтобы открыть меню команд . Меню команд представляет собой раскрывающийся список с автозаполнением для нечёткого поиска.
- Введите название панели, которую вы хотите открыть, затем с помощью клавиши со стрелкой вниз перейдите к нужному варианту.
- Нажмите Enter , чтобы выполнить команду.
Например, чтобы открыть панель «Элементы» :
- Откройте меню команд .
- Нажмите E, затем L. Выберите пункт Панель > Показать элементы .
- Нажмите Enter , чтобы запустить команду, открывающую панель.
Открытие панели таким образом переносит фокус на её содержимое. В случае панели «Элементы» фокус перемещается на дерево DOM .
Панель элементов
Осмотреть элемент на странице
- Перейдите к элементу, который вы хотите проверить, используя курсор программы чтения с экрана.
- Имитируйте щелчок правой кнопкой мыши по элементу, чтобы открыть контекстное меню.
- Выберите опцию «Проверить» . Откроется панель «Элементы» и элемент будет выделен в дереве DOM .
Дерево DOM организовано в формате tree . Пример см. в разделе «Навигация по дереву DOM с помощью клавиатуры» .
Скопируйте код элемента в дереве DOM
- Сфокусировавшись на узле в дереве DOM , вызовите контекстное меню, вызываемое правой кнопкой мыши.
- Разверните опцию Копировать .
- Выберите Копировать внешнийHTML .
Известные проблемы
- Копирование 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 (например, ссылки внутри footer), что делает дерево DOM более интересным, а затем с помощью клавиатуры перейти к нужному узлу.
Навигация по панели «Стили»
Поскольку все инструменты стилей так или иначе связаны с панелью «Стили» , имеет смысл сначала стать экспертом по этому инструменту.
- Выбрав панель «Стили» , нажмите клавишу Tab , чтобы переместить фокус внутрь и изучить ее содержимое.
- Нажимайте клавишу Tab, пока первый стиль не станет активным. Если вы используете программу чтения с экрана, этот первый стиль будет объявлен как «element.style {}».
- Нажмите стрелку вниз, чтобы перемещаться по списку стилей в порядке детализации. Программа чтения с экрана озвучивает каждый стиль, начиная с имени CSS-файла, номера строки, в которой он находится, и самого имени стиля. Например: "main.css:233 .card__img {}".
- Нажмите Enter , чтобы более подробно изучить стиль. Фокус будет отображаться на редактируемой версии названия стиля.
- Используйте клавишу Tab для перемещения между редактируемыми версиями каждого CSS-свойства и их соответствующими значениями. В конце каждого блока стилей находится пустое редактируемое текстовое поле, которое можно использовать для добавления дополнительных CSS-свойств.
- Вы можете продолжать нажимать клавишу Tab для перемещения по списку стилей или нажать Escape, чтобы выйти из этого режима и вернуться к навигации с помощью клавиш со стрелками.
Обязательно ознакомьтесь со справкой по сочетаниям клавиш на панели «Стили» для получения информации о дополнительных сочетаниях клавиш.
Известные проблемы
- Если вы используете поле «Фильтр редактируемого текста», вы больше не сможете перемещаться по списку стилей.
Переключить состояние элемента
Чтобы переключить состояние элемента, например :active или :focus :
- Перейдите на панель «Стили» и нажимайте клавишу Tab, пока кнопка «Переключить состояние элемента» не станет фокусом.
- Нажмите Enter, чтобы развернуть коллекцию состояний элементов. Состояния элементов представлены в виде группы флажков.
- Нажимайте клавишу Tab , пока фокус не перейдет к первому состоянию
:active. - Нажмите пробел , чтобы включить его. Если у текущего выбранного элемента в дереве DOM есть стиль
:active, он будет применен. - Продолжайте нажимать клавишу Tab , чтобы просмотреть все доступные состояния.
Добавить существующий класс
Рядом с кнопкой «Переключить состояние элемента» находится кнопка «Классы элементов» . Переместите фокус на неё, нажав Tab , а затем Enter . Фокус переместится в текстовое поле « Добавить новый класс» .
Кнопка «Классы элементов» в основном используется для добавления существующих классов к элементу. Например, если ваша таблица стилей содержит вспомогательный класс с именем .clearfix вы можете нажать . внутри поля редактирования текста, чтобы увидеть список предлагаемых классов, и использовать стрелку вниз , чтобы найти предлагаемый класс .clearfix . Или введите имя класса самостоятельно и нажмите Enter , чтобы применить его.
Добавить новое правило стиля
Рядом с кнопкой «Классы элементов» находится кнопка «Новое правило стиля» . Чтобы переместить фокус на неё, нажмите Tab и Enter . Фокус переместится в редактируемое текстовое поле в инспекторе стилей. Начальным текстовым содержимым поля является имя тега элемента, выбранного в дереве DOM . Вы можете ввести в это поле любое имя класса и нажать Tab , чтобы назначить ему свойства CSS.
Вычислимая вкладка
Выбрав вкладку «Вычисляемые» , нажмите клавишу Tab , чтобы переместить фокус внутрь и просмотреть её содержимое. На вкладке «Вычисляемые» находятся элементы управления, позволяющие узнать, какие свойства CSS фактически применены к элементу в порядке детализации.
Просмотреть все вычисляемые стили
Нажимайте клавишу Tab, пока не доберётесь до коллекции вычисляемых стилей. Они представлены в виде tree ARIA. Развернув список, вы увидите, какие CSS-селекторы применяют вычисляемый стиль. Эти селекторы упорядочены по специфичности. Программа чтения с экрана озвучивает вычисляемое значение, текущий соответствующий CSS-селектор, имя файла таблицы стилей, содержащей селектор, и номер строки селектора.
Известные проблемы
- Если вы используете текстовое поле Фильтр, вы больше не сможете проверять стили.
Вкладка «Прослушиватели событий»
На панели « Элементы» вы можете просмотреть прослушиватели событий, применённые к элементу, на вкладке «Прослушиватели событий» . На панели «Стили» нажмите стрелку вправо , чтобы перейти на вкладку «Прослушиватели событий» .
Изучите прослушиватели событий
Слушатели событий представлены в виде tree ARIA. Для навигации по ним можно использовать клавиши со стрелками. Программа чтения с экрана объявляет имя объекта DOM, к которому прикреплён прослушиватель событий, а также имя файла, в котором определён прослушиватель событий, и номер его строки.
Панель специальных возможностей
Находясь на панели «Специальные возможности» , нажмите клавишу Tab , чтобы переместить фокус внутрь и просмотреть её содержимое. На панели «Специальные возможности» расположены элементы управления для просмотра дерева специальных возможностей, атрибутов ARIA, применённых к элементу, и его вычисляемых свойств специальных возможностей.
Дерево доступности
Дерево доступности представлено в виде tree ARIA, где каждый treeitem соответствует элементу в DOM. Дерево объявляет вычисленную роль для выбранного узла. Универсальные элементы, такие как div и span объявляются в дереве как «GenericContainer». Используйте клавиши со стрелками для перемещения по дереву и изучения отношений родитель-потомок.
Известные проблемы
- Тип дерева ARIA, используемый панелью «Специальные возможности» , может некорректно отображаться в программах экранного доступа Chrome для macOS, таких как VoiceOver. Подпишитесь на обновление Chromium #868480, чтобы быть в курсе прогресса по этой проблеме.
- Разделы «Атрибуты ARIA» и «Вычисляемые свойства» размечены как деревья ARIA, но в настоящее время они не имеют управления фокусом, поэтому ими нельзя управлять с клавиатуры.
Группа аудита
Панель аудита позволяет вам запустить серию тестов сайта для выявления распространенных проблем, связанных с производительностью, доступностью, SEO и рядом других категорий.
Настройте и запустите аудит
- При первом открытии панели «Аудит » фокус перемещается на кнопку «Запустить аудит» в конце формы. По умолчанию форма настроена на запуск аудита для каждой категории с использованием эмуляции мобильной связи в имитируемом 3G-соединении.
- Для изменения настроек аудита используйте сочетание клавиш Shift + Tab или вернитесь в режим обзора.
- Когда вы будете готовы запустить аудит, вернитесь к кнопке «Запустить аудит» и нажмите Enter .
- Фокус переместится в модальное окно с кнопкой «Отмена» , позволяющей выйти из аудита. Во время аудита вы можете услышать серию звуковых сигналов, при этом страница будет обновляться несколько раз.
Известные проблемы
- Разделы формы конфигурации в настоящее время не размечены элементом
fieldset. Возможно, будет проще перемещаться по ним в режиме обзора, чтобы определить, какие элементы управления связаны с каждым разделом. - После завершения аудита звуковые сигналы или объявления региона в режиме реального времени не раздаются. Обычно это занимает около 30 секунд, после чего вы сможете перейти к результатам. Режим просмотра может быть самым простым способом доступа к результатам.
Навигация по аудиторскому отчету
Аудиторский отчёт состоит из разделов, соответствующих каждой категории аудита. Отчёт открывается списком оценок по каждой категории. Эти оценки также являются ссылками, по которым можно перейти к соответствующим разделам. В каждом разделе есть раскрываемые элементы с details информацией о пройденных или непройденных аудитах. По умолчанию отображаются только аудиты с непройденными результатами. Каждый раздел завершается итоговым элементом с details , содержащим все пройденные аудиты.
Чтобы запустить новый аудит, используйте сочетание клавиш Shift + Tab для выхода из отчета и найдите кнопку «Выполнить аудит» .
,
Это руководство призвано помочь пользователям, которые в основном полагаются на вспомогательные технологии, такие как программы чтения с экрана, получить доступ к Chrome DevTools и использовать их. Chrome DevTools — это набор инструментов для веб-разработчиков, встроенных в браузер Google Chrome. Если вам нужны функции DevTools, связанные с улучшением доступности веб-страниц, см. раздел «Справочник по доступности».
Доступность DevTools находится в стадии разработки. Некоторые панели и вкладки лучше работают с вспомогательными технологиями, чем другие. Это руководство познакомит вас с наиболее доступными панелями и осветит конкретные проблемы, с которыми вы можете столкнуться в процессе.
Обзор
Прежде чем начать, полезно представить себе структуру пользовательского интерфейса DevTools. DevTools разделён на ряд панелей , организованных в виде tablist ARIA . Например:
- Панель «Элементы» позволяет просматривать и изменять узлы DOM или CSS .
- Панель «Консоль» позволяет читать журналы JavaScript и редактировать объекты в режиме реального времени.
В области содержимого каждой панели находится ряд различных инструментов, которые в документации часто называются вкладками или панелями . Например, панель «Элементы» содержит дополнительные вкладки для просмотра прослушивателей событий, дерева доступности и многого другого. Различие между вкладками и панелями несколько условно. Единственная причина, по которой вы встретите тот или иной термин, — это соблюдение соответствия с остальной частью официальной документации DevTools.
Сочетания клавиш
Справочник сочетаний клавиш DevTools — полезная шпаргалка. Добавьте его в закладки и обращайтесь к нему, когда будете изучать различные панели.
Открытые инструменты разработчика
Для начала прочтите статью «Открыть инструменты разработчика Chrome» . Открыть инструменты разработчика можно несколькими способами: с помощью сочетаний клавиш или через пункты меню.
Навигация между панелями
Навигация с помощью клавиатуры
- Открыв DevTools, нажмите Control + ] или Command + ] (Mac), чтобы перейти к следующей панели.
- Нажмите Control + [ или Command + [ (Mac), чтобы перейти на предыдущую панель.
- Также можно использовать сочетание клавиш Shift + Tab для перемещения фокуса на
tablistпанели и использовать клавиши со стрелками для переключения панелей, хотя быстрее может оказаться использование ранее упомянутых сочетаний клавиш.
Известные проблемы
- Некоторые панели, такие как « Консоль» и «Производительность» , могут перемещать фокус в область своего содержимого сразу после активации. Это может затруднить навигацию с помощью клавиш со стрелками.
- Название выбранной панели объявляется, но только после того, как пользователь прочитает содержимое панели, на которой находится фокус. Это может привести к тому, что его легко пропустить.
Навигация по меню команд
Чтобы сфокусироваться на определенной панели, используйте меню команд :
- Открыв DevTools, нажмите Control + Shift + P или Command + Shift + P (Mac), чтобы открыть меню команд . Меню команд представляет собой раскрывающийся список с автозаполнением для нечёткого поиска.
- Введите название панели, которую вы хотите открыть, затем с помощью клавиши со стрелкой вниз перейдите к нужному варианту.
- Нажмите Enter , чтобы выполнить команду.
Например, чтобы открыть панель «Элементы» :
- Откройте меню команд .
- Нажмите E, затем L. Выберите пункт Панель > Показать элементы .
- Нажмите Enter , чтобы запустить команду, открывающую панель.
Открытие панели таким образом переносит фокус на её содержимое. В случае панели «Элементы» фокус перемещается на дерево DOM .
Панель элементов
Осмотреть элемент на странице
- Перейдите к элементу, который вы хотите проверить, используя курсор программы чтения с экрана.
- Имитируйте щелчок правой кнопкой мыши по элементу, чтобы открыть контекстное меню.
- Выберите опцию «Проверить» . Откроется панель «Элементы» и элемент будет выделен в дереве DOM .
Дерево DOM организовано в формате tree . Пример см. в разделе «Навигация по дереву DOM с помощью клавиатуры» .
Скопируйте код элемента в дереве DOM
- Сфокусировавшись на узле в дереве DOM , вызовите контекстное меню, вызываемое правой кнопкой мыши.
- Разверните опцию Копировать .
- Выберите Копировать внешнийHTML .
Известные проблемы
- Копирование 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 (например, ссылки внутри footer), что делает дерево DOM более интересным, а затем с помощью клавиатуры перейти к нужному узлу.
Навигация по панели «Стили»
Поскольку все инструменты стилей так или иначе связаны с панелью «Стили» , имеет смысл сначала стать экспертом по этому инструменту.
- Выбрав панель «Стили» , нажмите клавишу Tab , чтобы переместить фокус внутрь и изучить ее содержимое.
- Нажимайте клавишу Tab, пока первый стиль не станет активным. Если вы используете программу чтения с экрана, этот первый стиль будет объявлен как «element.style {}».
- Нажмите стрелку вниз, чтобы перемещаться по списку стилей в порядке детализации. Программа чтения с экрана озвучивает каждый стиль, начиная с имени CSS-файла, номера строки, в которой он находится, и самого имени стиля. Например: "main.css:233 .card__img {}".
- Нажмите Enter , чтобы более подробно изучить стиль. Фокус будет отображаться на редактируемой версии названия стиля.
- Используйте клавишу Tab для перемещения между редактируемыми версиями каждого CSS-свойства и их соответствующими значениями. В конце каждого блока стилей находится пустое редактируемое текстовое поле, которое можно использовать для добавления дополнительных CSS-свойств.
- Вы можете продолжать нажимать клавишу Tab для перемещения по списку стилей или нажать Escape, чтобы выйти из этого режима и вернуться к навигации с помощью клавиш со стрелками.
Обязательно ознакомьтесь со справкой по сочетаниям клавиш на панели «Стили» для получения информации о дополнительных сочетаниях клавиш.
Известные проблемы
- Если вы используете поле «Фильтр редактируемого текста», вы больше не сможете перемещаться по списку стилей.
Переключить состояние элемента
Чтобы переключить состояние элемента, например :active или :focus :
- Перейдите на панель «Стили» и нажимайте клавишу Tab, пока кнопка «Переключить состояние элемента» не станет фокусом.
- Нажмите Enter, чтобы развернуть коллекцию состояний элементов. Состояния элементов представлены в виде группы флажков.
- Нажимайте клавишу Tab , пока фокус не перейдет к первому состоянию
:active. - Нажмите пробел , чтобы включить его. Если у текущего выбранного элемента в дереве DOM есть стиль
:active, он будет применен. - Продолжайте нажимать клавишу Tab , чтобы просмотреть все доступные состояния.
Добавить существующий класс
Рядом с кнопкой «Переключить состояние элемента» находится кнопка «Классы элементов» . Переместите фокус на неё, нажав Tab , а затем Enter . Фокус переместится в текстовое поле « Добавить новый класс» .
Кнопка «Классы элементов» в основном используется для добавления существующих классов к элементу. Например, если ваша таблица стилей содержит вспомогательный класс с именем .clearfix вы можете нажать . внутри поля редактирования текста, чтобы увидеть список предлагаемых классов, и использовать стрелку вниз , чтобы найти предлагаемый класс .clearfix . Или введите имя класса самостоятельно и нажмите Enter , чтобы применить его.
Добавить новое правило стиля
Рядом с кнопкой «Классы элементов» находится кнопка «Новое правило стиля» . Чтобы переместить фокус на неё, нажмите Tab и Enter . Фокус переместится в редактируемое текстовое поле в инспекторе стилей. Начальным текстовым содержимым поля является имя тега элемента, выбранного в дереве DOM . Вы можете ввести в это поле любое имя класса и нажать Tab , чтобы назначить ему свойства CSS.
Вычислимая вкладка
Выбрав вкладку «Вычисляемые» , нажмите клавишу Tab , чтобы переместить фокус внутрь и просмотреть её содержимое. На вкладке «Вычисляемые» находятся элементы управления, позволяющие узнать, какие свойства CSS фактически применены к элементу в порядке детализации.
Просмотреть все вычисляемые стили
Нажимайте клавишу Tab, пока не доберётесь до коллекции вычисляемых стилей. Они представлены в виде tree ARIA. Развернув список, вы увидите, какие CSS-селекторы применяют вычисляемый стиль. Эти селекторы упорядочены по специфичности. Программа чтения с экрана озвучивает вычисляемое значение, текущий соответствующий CSS-селектор, имя файла таблицы стилей, содержащей селектор, и номер строки селектора.
Известные проблемы
- Если вы используете текстовое поле Фильтр, вы больше не сможете проверять стили.
Вкладка «Прослушиватели событий»
На панели « Элементы» вы можете просмотреть прослушиватели событий, применённые к элементу, на вкладке «Прослушиватели событий» . На панели «Стили» нажмите стрелку вправо , чтобы перейти на вкладку «Прослушиватели событий» .
Изучите прослушиватели событий
Слушатели событий представлены в виде tree ARIA. Для навигации по ним можно использовать клавиши со стрелками. Программа чтения с экрана объявляет имя объекта DOM, к которому прикреплён прослушиватель событий, а также имя файла, в котором определён прослушиватель событий, и номер его строки.
Панель специальных возможностей
Находясь на панели «Специальные возможности» , нажмите клавишу Tab , чтобы переместить фокус внутрь и просмотреть её содержимое. На панели «Специальные возможности» расположены элементы управления для просмотра дерева специальных возможностей, атрибутов ARIA, применённых к элементу, и его вычисляемых свойств специальных возможностей.
Дерево доступности
Дерево доступности представлено в виде tree ARIA, где каждый treeitem соответствует элементу в DOM. Дерево объявляет вычисленную роль для выбранного узла. Универсальные элементы, такие как div и span объявляются в дереве как «GenericContainer». Используйте клавиши со стрелками для перемещения по дереву и изучения отношений родитель-потомок.
Известные проблемы
- Тип дерева ARIA, используемый панелью «Специальные возможности» , может некорректно отображаться в программах экранного доступа Chrome для macOS, таких как VoiceOver. Подпишитесь на обновление Chromium #868480, чтобы быть в курсе прогресса по этой проблеме.
- Разделы «Атрибуты ARIA» и «Вычисляемые свойства» размечены как деревья ARIA, но в настоящее время они не имеют управления фокусом, поэтому ими нельзя управлять с клавиатуры.
Группа аудита
Панель аудита позволяет вам запустить серию тестов сайта для выявления распространенных проблем, связанных с производительностью, доступностью, SEO и рядом других категорий.
Настройте и запустите аудит
- При первом открытии панели «Аудит » фокус перемещается на кнопку «Запустить аудит» в конце формы. По умолчанию форма настроена на запуск аудита для каждой категории с использованием эмуляции мобильной связи в имитируемом 3G-соединении.
- Для изменения настроек аудита используйте сочетание клавиш Shift + Tab или вернитесь в режим обзора.
- Когда вы будете готовы запустить аудит, вернитесь к кнопке «Запустить аудит» и нажмите Enter .
- Фокус переместится в модальное окно с кнопкой «Отмена» , позволяющей выйти из аудита. Во время аудита вы можете услышать серию звуковых сигналов, при этом страница будет обновляться несколько раз.
Известные проблемы
- Разделы формы конфигурации в настоящее время не размечены элементом
fieldset. Возможно, будет проще перемещаться по ним в режиме обзора, чтобы определить, какие элементы управления связаны с каждым разделом. - После завершения аудита звуковые сигналы или объявления региона в режиме реального времени не раздаются. Обычно это занимает около 30 секунд, после чего вы сможете перейти к результатам. Режим просмотра может быть самым простым способом доступа к результатам.
Навигация по аудиторскому отчету
Аудиторский отчёт состоит из разделов, соответствующих каждой категории аудита. Отчёт открывается списком оценок по каждой категории. Эти оценки также являются ссылками, по которым можно перейти к соответствующим разделам. В каждом разделе есть раскрываемые элементы с details информацией о пройденных или непройденных аудитах. По умолчанию отображаются только аудиты с непройденными результатами. Каждый раздел завершается итоговым элементом с details , содержащим все пройденные аудиты.
Чтобы запустить новый аудит, используйте сочетание клавиш Shift + Tab для выхода из отчета и найдите кнопку «Выполнить аудит» .