Использование средства "Проверка" для обнаружения проблем со специальными возможностями путем наведении указателя мыши на веб-страницу

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

Кнопка "Проверить " () находится в левом верхнем углу средства разработки. При нажатии кнопки Проверить инструмент кнопка становится синей, указывая, что средство проверки активно.

Когда средство "Проверка " активно, при наведении указателя мыши на любой элемент на отрисованной веб-странице отображается наложение Проверка . Это наложение отображает общие сведения и сведения о специальных возможностях об этом элементе. В разделе Специальные возможностипроверки наложения отображаются сведения о контрастности цветов текста, тексте средства чтения с экрана и поддержке клавиатуры:

Основная статья о средстве проверки — анализ HTML-страниц с помощью средства проверки. В этой статье рассматриваются специальные возможности средства проверки .

Проверка контрастности текста в отдельных элементах, поддержке текста средства чтения с экрана и клавиатуры

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

2. Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите пункт Проверить. Или нажмите клавишу F12. DevTools откроется рядом с веб-страницей.

3. Нажмите кнопку Проверить () в левом верхнем углу devTools, чтобы выделить значок (синий):

   

4. Наведите указатель мыши на любой элемент на отображаемой демонстрационной веб-странице. Средство "Проверка " отображает наложение информации рядом с элементом на отображаемой веб-странице. Наложение информации содержит раздел Специальные возможности :

   

Раздел Специальные возможности содержит следующие сведения:

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

  • Зеленый значок проверка метки указывает на достаточную контрастность.
  • Оранжевый значок восклицательного знака указывает, что контрастность недостаточна.

• Имя и роль — это то, что вспомогательные технологии, такие как средства чтения с экрана, будут сообщать об элементе.

  • Имя — это текстовое содержимое элемента с наведенным указателем мыши. Для элемента <a href="/">About Us</a>имя, которое отображается в средстве "Проверка", имеет значение About Us.
  • Роль элемента. Обычно это имя элемента, например article, img , linkили heading. Элементы div и span называются generic.

• Фокус с клавиатуры указывает, могут ли пользователи обращаться к элементу независимо от устройства ввода.

  • Зеленый значок проверка метки указывает, что элемент с фокусом клавиатуры.
  • Серый круг с диагональной линией указывает, что элемент не является фокусируемым на клавиатуре.

Дополнительные сведения в наложении проверки

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

• Тип макета. Если элемент расположен с помощью flexbox или сетки, отображается значок ().
• Имя элемента, например h1, h2или div.
• Размеры элемента в пикселях.
• Цвет в виде цветового образца (или небольшого цветного квадрата) и в виде строки (например #336699, ).
• Сведения о шрифтах, такие как размер и семейства шрифтов.
• Поля и заполнение в пикселях.

См. также

• Анализ HTML-страниц с помощью средства проверки
• Проверка узла
• Проверка контрастности текста и цвета в состоянии по умолчанию с помощью средства "Проверка"