Автоматическое тестирование веб-страницы на наличие проблем со специальными возможностями

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

Существует несколько способов открыть средство "Проблемы ", например:

• Щелкните счетчик Проблемы () в правом верхнем углу devTools.

• В инструменте Элементы в дереве DOM нажмите клавишу SHIFT , щелкнув волнистый подчеркивание элемента.

• В меню Команд введите проблемы, выберите Показать проблемы и нажмите клавишу ВВОД.

Просмотр раздела "Специальные возможности" в средстве "Проблемы"

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

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

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

   

3. Обновите страницу, так как некоторые проблемы сообщаются на основе сетевых запросов. Обратите внимание на обновленное число в счетчике Проблем.

4. Щелкните счетчик Проблемы. Средство "Проблемы " откроется на панели Быстрого просмотра в нижней части devTools:

   

5. На вкладке Проблемы разверните раздел Специальные возможности .

Убедитесь, что входные поля имеют метки

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

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

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

3. В правом верхнем углу щелкните счетчик Проблемы (). Средство "Проблемы " откроется на панели Быстрого просмотра в нижней части devTools.

4. На вкладке Проблемы разверните раздел Специальные возможности .

5. Разверните предупреждениеForm elements must have labels: Element has no title attribute Element has no placeholder attribute.

6. Щелкните ссылку Открыть в элементах .

   

   Откроется инструмент Элементы с элементом, выделенным в дереве DOM. В области Стили отображаются примененные правила CSS для элемента.

   Теперь отображается следующий код:

   <label>Search</label>
   <input type="search">
   <input type="submit" value="go">
   

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

   • Вложение input элемента в label элемент .

   • В элементе label добавьте for атрибут, соответствующий id атрибуту input элемента .

Существует также другой способ проверить отсутствие связей между элементами:

1. В средстве Элементы выберите <label>Search</label> элемент в дереве DOM.

   На веб-странице обратите внимание, что фокус отображается только на метку Поиск , а не на текстовом поле ввода. Правильная реализация будет помещать фокус на текстовое search поле ввода и метку поиска .

2. В качестве примера правильного подключения выберите метку Другие в форме пожертвования.

   Поле индикатора фокуса правильно отображается во входном текстовом поле рядом с меткой Other , так как имеются совпадающие for значения и id атрибуты.

3. В средстве Проблемы щелкните Дополнительное чтение , чтобы узнать больше о проблеме. Чтобы открыть ссылку на новой вкладке, нажмите клавиши CTRL (Windows, Linux) или Command (macOS), щелкнув ссылку:

   

Убедитесь, что на изображениях есть замещающий текст

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

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

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

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

3. В правом верхнем углу devTools щелкните счетчик Проблемы . Откроется средство "Проблемы ".

4. На вкладке Проблемы разверните предупреждение Images must have alternate text: Element has no title attribute. Существует четыре экземпляра изображений, в которых отсутствует замещающий текст:

   

См. раздел Изображения должны иметь альтернативный текст.

Убедитесь, что цвета текста имеют достаточную контрастность

Чтобы автоматически проверка, имеют ли цвета текста достаточную контрастность, используйте средство "Проблемы", в котором есть раздел Специальные возможности. По умолчанию средство "Проблемы " открыто на панели быстрого просмотра в нижней части средства разработки.

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

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

3. В правом верхнем углу devTools щелкните счетчик Проблемы . Откроется средство "Проблемы ".

   Могут возникать предупреждения о том, что два элемента на демонстрационной веб-странице не имеют достаточной контрастности.

   

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

5. li.high Щелкните элемент . На отображаемой веб-странице выделена ссылка "Собаки" в разделе "Пожертвовать ", где отображается небольшое наложение информации. Это то же наложение, которое появляется при наведении указателя мыши на элемент в дереве DOM в инструменте Элементы .

   

Волнистые подчеркивания в дереве DOM указывают на автоматически обнаруженные проблемы

Дерево DOM в средстве "Элементы" помечает проблемы непосредственно в HTML с волнистыми подчеркиваниями. Об этих проблемах сообщает средство "Проблемы ". При нажатии клавиши SHIFT при щелчке любого элемента с волнистым подчеркиванием откроется средство "Проблемы ".

1. В средстве Элементы в дереве DOM нажмите клавишу SHIFT , щелкнув элемент <input type="search">, который имеет волнистую линию под input. Отобразится средство "Проблемы ", в котором отображается проблема для этого элемента.

   

См. также

• Поиск и устранение проблем с помощью средства "Проблемы"