Вопрос или проблема
Существует ли способ исправить проблему “Элементы формы не имеют соответствующих меток” в форме поиска WordPress без отображения кнопки поиска?
Аудит Google Light House:
Элементы формы не имеют соответствующих меток. Метки обеспечивают правильное объявление элементов управления формами вспомогательными технологиями, такими как экранные читалки. Неправильные элементы ввода
<input type="text" value="Поиск" name="s" id="psf" onblur="if (this.value == '') {this.value='Поиск';}" onfocus="if (this.value == 'Поиск') {this.value='';}">
Я хочу добавить метку в форму без отображения кнопки поиска?
Я использую этот код на своем сайте WordPress для отображения формы поиска:
<div id="psform">
<?php $search_text = "Поиск"; ?>
<form method="get" id="searchform"
action="<?php bloginfo('home'); ?>/">
<input type="text" value="<?php echo $search_text; ?>"
name="s" id="psf"
onblur="if (this.value == '')
{this.value='<?php echo $search_text; ?>';}"
onfocus="if (this.value == '<?php echo $search_text; ?>')
{this.value='';}" />
<input type="hidden" id="searchsubmit" />
</form> </div>
Код можно найти по адресу https://tumrai.com/WordPress_Search_Form_without_Search_Button
Используйте тег <label> перед <input> следующим образом.
<label>Адрес электронной почты:
<input type="text">
</label>
Это простой способ сделать это. Вы можете просто не использовать кнопку отправки, если она вам не нужна.
Вот ваш измененный код.
<div id="psform">
<?php $search_text = "Поиск"; ?>
<form method="get" id="searchform" action="<?php echo home_url(); ?>">
<label>Адрес электронной почты:
<input type="text" value="<?php echo $search_text; ?>" name="s" />
</label>
</form>
</div>
Редактировать:
Если вы хотите добавить заголовок к форме поиска, вы можете использовать любой заголовочный тег. Если вам нужна какая-либо другая помощь, пожалуйста, не стесняйтесь спрашивать.
Ответ или решение
Чтобы исправить проблему "Элементы формы не имеют связанных меток" в поисковой форме WordPress без кнопки поиска, необходимо добавить метку (<label>) к элементу ввода (<input>). Это поможет обеспечить доступность для людей, использующих вспомогательные технологии, такие как скрин-ридеры.
Шаги для решения проблемы:
-
Добавьте элемент
<label>перед вашим полем ввода. Это обеспечит соответствие между полем формы и его меткой, что поможет улучшить доступность. -
Пример кода. Вот как можно изменить вашу существующую форму:
<div id="psform">
<?php $search_text = "Search"; ?>
<form method="get" id="searchform" action="<?php echo home_url(); ?>">
<label for="psf">Поиск:
<input type="text" value="<?php echo $search_text; ?>" name="s" id="psf" onblur="if (this.value == '') {this.value='<?php echo $search_text; ?>';}" onfocus="if (this.value == '<?php echo $search_text; ?>') {this.value='';}" />
</label>
</form>
</div>Объяснение:
-
Элемент
<label>: В приведенном выше коде мы добавили элемент<label>с текстом "Поиск:" перед элементом<input>. Также важно добавить атрибутfor, который ссылается на идентификатор (id) элемента ввода, что делает связь между ними явной. -
Удаление кнопки поиска: В данном решении кнопка поиска (
<input type="submit">) не требуется, если вы хотите только текстовое поле для ввода. Однако помните, что, чтобы форма работала, пользователям по-прежнему нужно будет подтверждать ввод (например, нажатием клавиши "Enter").
Дополнительные рекомендации:
-
Заголовок формы: Если вы хотите добавить заголовок для формы, вы можете использовать любой заголовок (
<h1>, <h2>, ...) перед формой. -
Проверка доступности: После внесения изменений рекомендуется повторно выполнить аудит с использованием Google Lighthouse или другого инструмента для проверки доступности, чтобы убедиться, что все новые изменения работают правильно.
Если у вас возникли дополнительные вопросы или вам нужна помощь с другими аспектами вашего сайта на WordPress, пожалуйста, дайте знать!