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

  • Статья

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

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

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

Средство

Main статье о средстве "Проверка" — анализ 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, ).
  • Сведения о шрифтах, такие как размер и семейства шрифтов.
  • Поля и заполнение в пикселях.

См. также