Функции тестирования специальных возможностей
В этой статье перечислены типичные аспекты специальных возможностей для тестирования веб-страниц и соответствующие функции в Microsoft DevTools.
Замещающий текст для изображений
| Аспект специальных возможностей для проверка | Функция средств разработки | Статья |
|---|---|---|
| Убедитесь, что на изображениях есть замещающий текст | Раздел "Специальные возможности средства > проблем" в отчете | Убедитесь, что изображения имеют замещающий текст в автоматическом тестировании веб-страницы на наличие проблем со специальными возможностями |
| Убедитесь, что на изображениях есть замещающий текст | Инструмент >Lighthouse Проблемы с замещающий текст | Проверка специальных возможностей с помощью Lighthouse |
Поддержка клавиатуры
| Аспект специальных возможностей для проверка | Функция средств разработки | Статья |
|---|---|---|
| Проверка поддержки клавиатуры | Просмотр раздела "Специальные возможности средства>" наложения | Использование средства "Проверка" для обнаружения проблем со специальными возможностями путем наведении указателя мыши на веб-страницу и анализа HTML-страниц с помощью средства "Проверка" |
| Проверка поддержки клавиатуры | Клавиши TAB, SHIFT+TAB и ВВОД | Проверка поддержки клавиатуры с помощью клавиш TAB и ВВОД |
| Проверка поддержки клавиатуры: убедитесь, что указан фокус | Средство "Проверка ", вкладка "Стили " и средство "Источники " | Анализ отсутствия индикации фокуса клавиатуры |
| Проверка поддержки клавиатуры: убедитесь, что кнопки формы можно использовать с клавиатурой | Средство "Проверка", дерево DOM в инструменте "Элементы" и вкладка "Прослушиватели событий" | Анализ отсутствия поддержки клавиатуры в форме |
| Проверка поддержки клавиатуры: проверка порядка клавиш tab | Средство "Элементы">, вкладка "Специальные возможности", "> Средство просмотра исходного порядка" | Тестирование поддержки клавиатуры с помощью средства просмотра исходного заказа |
| Проверка поддержки клавиатуры | Средство >Lighthouse Проблемы с поддержкой клавиатуры | Проверка специальных возможностей с помощью Lighthouse |
Контрастность текста
| Аспект специальных возможностей для проверка | Функция средств разработки | Статья |
|---|---|---|
| Убедитесь, что текст имеет достаточную контрастность (автоматически для всей страницы) | Раздел "Специальные возможности средства > проблем" в отчете | Убедитесь, что цвета текста имеют достаточную контрастность при автоматической проверке веб-страницы на наличие проблем со специальными возможностями |
| Убедитесь, что текст имеет достаточную контрастность | Инструмент "> Элементы" Вкладка"Выбор цвета" "Стили"> | Проверка контрастности текста и цвета с помощью средства выбора цвета |
| Убедитесь, что текст имеет достаточную контрастность | Проверкаспециальных возможностей средства > в строке контрастности наложения > | Использование средства "Проверка" для обнаружения проблем со специальными возможностями путем наведении указателя мыши на веб-страницу и анализа HTML-страниц с помощью средства "Проверка" |
| Убедитесь, что текст имеет достаточную контрастность: в состоянии наведении указателя мыши | Вкладка"Стили">, вкладка> "Элементы" (отображает флажки "Принудительное состояние элемента") | Проверка доступности всех состояний элементов |
| Убедитесь, что текст имеет достаточную контрастность: с темной темой (темный режим) и светлой темой | Средство >отрисовкиЭмулировать функцию мультимедиа CSS предпочитает цветовую схему | Проверьте наличие проблем с контрастностью с темной темой и светлой темой |
| Убедитесь, что текст имеет достаточную контрастность (автоматически для всей страницы) | Средство >Lighthouse Проблемы с контрастностью текста | Проверка специальных возможностей с помощью Lighthouse |
Поддержка средства чтения с экрана
| Аспект специальных возможностей для проверка | Функция средств разработки | Статья |
|---|---|---|
| Проверка поддержки средства чтения с экрана: убедитесь, что в полях ввода есть метки. | Раздел "Специальные возможности средства > проблем" в отчете | Убедитесь, что поля ввода имеют метки в автоматическом тестировании веб-страницы на наличие проблем со специальными возможностями |
| Проверка поддержки средства чтения с экрана | Просмотр раздела "Специальные возможности средства>" в разделе "Имя и роль" наложения > | Использование средства "Проверка" для обнаружения проблем со специальными возможностями путем наведении указателя мыши на веб-страницу и анализа HTML-страниц с помощью средства "Проверка" |
| Проверка поддержки средства чтения с экрана | Вкладка"Специальные возможности" средства > "Элементы" > "Дерево специальных возможностей" | Проверьте дерево специальных возможностей для поддержки клавиатуры и средства чтения с экрана, а также проверьте специальные возможности с помощью вкладки Специальные возможности. |
| Проверка поддержки средства чтения с экрана | Средство >Lighthouse Проблемы с поддержкой средства чтения с экрана | Проверка специальных возможностей с помощью Lighthouse |
Недостатки зрения
| Аспект специальных возможностей для проверка | Функция средств разработки | Статья |
|---|---|---|
| Убедитесь, что веб-страница доступна для пользователей с цветовой слепотой | Средство >отрисовкиЭмулировать недостатки зрения раскрывающийся список | Убедитесь, что страница доступна для пользователей с цветовой слепотой |
| Убедитесь, что веб-страница доступна для использования с размытым зрением | Средство >отрисовкиЭмулировать недостатки зрения раскрывающийся список | Убедитесь, что страница доступна для использования с размытым зрением |
| Убедитесь, что веб-страница доступна для использования с отключенной анимацией пользовательского интерфейса (уменьшенное движение) | Средство >отрисовкиЭмуляция мультимедиа CSS предпочитает уменьшенное движение | Убедитесь, что страница доступна для использования с отключенной анимацией пользовательского интерфейса |
| Убедитесь, что веб-страница доступна для пользователей с нарушениями зрения | Инструмент >Lighthouse Проблемы с недостатками зрения | Проверка специальных возможностей с помощью Lighthouse |
Пригодно для использования при узких
| Аспект специальных возможностей для проверка | Функция средств разработки | Статья |
|---|---|---|
| Убедитесь, что макет веб-страницы доступен для использования при узком | Средство эмуляции устройства | Убедитесь, что макет веб-страницы доступен для использования в узких случаях, и эмулировать мобильные устройства (эмуляция устройства) |