Как исправить эту ошибку WCAG «Этот элемент управления формы имеет пустую метку или заголовок».

Question

Я запускаю Sortsite для соответствия ADA на веб-сайте, над которым я работаю, и получаю следующее сообщение:

Этот элемент управления формы имеет пустую метку или заголовок. Добавьте описательный текст к метке элемента управления формы.

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

<label style="display: none;" for="slide1">First slide</label>
<input checked type="radio" name="slider" id="slide1" title="First set of slides" />

Answer 1

Если вы не хотите, чтобы метка была видна на экране, поместите ее за пределы экрана, используя CSS-класс .visual-hidden, .sr_only с кодом, подобным следующему. НИКОГДА не используйте дисплей: нет ., Поскольку он скрывает ярлык для всех, включая пользователей программы чтения с экрана .

.visually-hidden {
position: absolute;
left: -2px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

Велика вероятность того, что при использованиитакие фреймворки, как bootstrap, уже предлагают такой класс.

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

Answer 2

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

Если вы не хотите, чтобы ваш ярлык был виден, используйте aria-label :

<div class="_po-r">
  <div class="_bl-zi-0a _w-01 _bl-bg-0l " id="slides">
    <input checked type="radio" name="slider" id="slide1" class="set" title="First set of slides" aria-label="First slide" />