Проверка доступности всех состояний элементов

Проверьте доступность всех состояний элементов, таких как контраст цвета текста во время состояния hover . Средство проверки сообщает о проблемах со специальными возможностями для одного состояния за раз. Чтобы проверка доступность различных состояний элементов, на вкладке Стили используйте раздел :hov (Состояние элемента переключения) области Стили, как описано в этой статье.

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

Проверка контрастности цветов текста в состоянии по умолчанию

Чтобы проверка контрастность цветов текста для отдельных элементов веб-страницы, используйте наложение страницы средства Проверки:

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

2. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.

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

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

   Если сведения о контрастности доступны, наложение Проверка отображает коэффициент контрастности и флажок. Зеленый значок проверка метки указывает, что контрастность достаточна, а желтый значок оповещения указывает на недостаточное количество контрастности.

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

   

   Зеленый элемент списка Собаки в разделе Состояние пожертвования не имеет достаточной контрастности, поэтому помечается предупреждением в наложении Проверки :

   

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

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

Во-первых, убедитесь, что анимации выполняются, если не используется средство проверки:

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

2. Наведите указатель мыши на синие элементы меню в меню навигации на боковой панели. Цвет элемента меню анимируется при наведении указателя мыши:

   

Затем убедитесь, что анимации не выполняются при использовании средства проверки:

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

2. Нажмите кнопку Проверить инструмент () в левом верхнем углу средства разработки.

3. На отображаемой веб-странице наведите указатель мыши на синие ссылки в меню навигации на боковой панели. Анимации для пунктов меню не выполняются. Вместо этого элементы меню отображаются с помощью выделения цвета для наложения flexbox.

   При использовании средства "Проверка " невозможно достичь hover состояния элементов для проверки коэффициента контрастности текста, так как hover состояние в стилях не активируется.

Проверка достаточной контрастности текста таким образом недостаточно, так как элементы на странице могут иметь разные состояния.

Имитация состояния для имитации состояния элемента анимированного меню

Если средство "Проверка " активно, вместо наведении указателя мыши на анимированный элемент необходимо имитировать состояние элемента меню. Чтобы имитировать состояние элемента меню, используйте имитацию состояния в области Стили . На панели Стили есть кнопка :hov (Toggle Element State), которая отображает группу флажков с меткой Force element state ( Принудительное состояние элемента).

Чтобы включить состояние наведении указателя при использовании средства "Проверка", выполните следующие действия:

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

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

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

4. На отображаемой веб-странице щелкните синюю ссылку Кошки в меню навигации на боковой панели. Откроется инструмент Элементы с выбранным элементом <a href="#cats">Cats</a> :

   

5. На панели Стили нажмите кнопку Переключить состояние элемента (:hov). Появится раздел Принудительное состояние элемента :

   

6. Установите флажок :hover . В DOM слева от элемента <a href="#cats">Cats</a>отображается желтая точка, указывающая, что элемент имеет имитированное состояние. Элемент меню "Кошки" теперь отображается на веб-странице, как если бы указатель на него навел указатель, и любая анимация, которая находится в элементе меню, может выполняться:

   

Проверка контрастности элемента при наведении указателя мыши на него

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

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

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

   

Моделирование состояния также является хорошим способом проверка, учитываются ли различные потребности пользователей, например потребности пользователей клавиатуры. С помощью флажков Принудить состояние элемента можно имитировать :focus состояние и проверка, если фокусируемые элементы изменяются, чтобы указать, что они имеют фокус. Отсутствие индикатора, когда элемент имеет фокус, является проблемой специальных возможностей. Дополнительные сведения см. в статье Анализ отсутствия индикации фокуса клавиатуры.