Почему Lighthouse рассматривает clip: rect (0 0 0 0) как недопустимое решение для доступности - PullRequest
Новая
       36

Почему Lighthouse рассматривает clip: rect (0 0 0 0) как недопустимое решение для доступности

2 голосов
/ 02 мая 2019

На моей странице есть форма с входными данными и метками с использованием правильно заполненных атрибутов for и id. После применения передового опыта для обеспечения доступности Chrome Lighthouse не проходит тесты по использованию

clip: rect(0 0 0 0)

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

Кто-нибудь знает, почему это происходит или как это решить? 

<label for="name" class="visually-hidden">Name</label>
<input type="text" id="name">

А что касается CSS 

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    outline: 0;
    appearance: none;
}

1 Ответ

0 голосов
/ 02 мая 2019

Ваш код удовлетворяет критерию успеха 4.1.2 Имя, Роль, Значение , потому что имя может быть определено программно, но не соответствует критерию успеха для 3.3.2 Метки или инструкции: Метки или инструкции предоставляется, когда контент требует пользовательского ввода , где метка должна быть видимой

Обратите внимание, что метод H44: использование элементов меток для связи текстовых меток с элементами управления формы , четко гласит:

Убедитесь, что элемент метки виден.

«визуально скрытые» хаки не являются «лучшей практикой». Это должно быть однозначно запрещено.

Людям с программами для чтения с экрана не нужно больше информации, чем людям без программы для чтения с экрана: им нужна лучше информация.

Скрывая текст с экрана, вы наносите два ущерба:

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

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

...