Как я могу решить эту проблему с ярлыком с помощью отчета о доступности WAVE?

Question

Я хочу устранить ошибку при прохождении проверочного теста WAVE. Ошибка в CF7 WordPress CMS. Инструмент WAVE Check экспортирует этот "Missing form label A form control does not have a corresponding label.".

Код моей контактной формы:

<div class="form-send-cell">
<label for="your-name">Name</label>
[text* class:input-send your-name id:your-name]
</div>
<div class="form-send-cell">
<label for="your-email">E-mail</label>
[email* class:input-send your-email id:your-email]
</div>
<div class="form-send-cell">
<label for="your-subject">Subject</label>
[text* class:input-send your-subject id:your-subject]
</div>
<div class="form-send-cell">
<label for="your-message">Your Message</label>
[textarea* class:input-send your-message id:your-message]
[select* menu-890 use_label_element "General Inquiry" "Commerce" "Accounting"]
</div>

<div class="submit-button">
[submit "send"]<i class="send" aria-hidden="true"></i>
</div>

Answer 1

Контактная форма 7 не работает так, как вы могли бы ожидать с помощью короткого кода use_label_element.

Это было сломано в течение длительного времени.

Вместо этого сделайте, как вы сделали с остальнымиформы и добавьте связанную метку и используйте метод id:enquiry-type со связанной for="enquiry-type", который вы использовали со всеми другими полями.

Если вы пытаетесь создать невидимую метку для select Вы можете использовать визуально скрытый класс (CSS внизу), но, пожалуйста, пересмотрите это, если это было намерение.

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

визуально скрытый класс (класс только для чтения с экрана) - используйте с осторожностью в формах и т. д.

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}