Как задать название кнопок для доступности Google PageSpeed?
Подскажите как сделать так, что-бы кнопки имели название и гугл на них не ругался что не все кнопки имеют названия для доступности в Google PageSpeed? Задаю имя как написано в интернете или по документации, все равно выдает ошибку
<button type="submit" name="btn" class="special-offer__button _icon-send"> |
<button type="submit" name="btn" class="special-offer__button _icon-send">
Дополнительно:
Перевожу на русский: в кнопке должен быть текст. Доступный для всех технологий, в том числе для скринридеров.
Если визуально в кнопке его нет, то используется доступно скрытый текст. Гуглите паттерн visually-hidden.
Ну или хотя бы атрибут aria-label.
- Спасибо, помогло. Уже всю голову сломал что это такое!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для задания названия кнопок для улучшения доступности с помощью Google PageSpeed, вам следует использовать атрибуты aria-label или aria-labelledby. Эти атрибуты позволяют добавить текстовое описание к элементам на веб-странице, которые не имеют текстового содержания, таких как кнопки с изображениями.
Пример использования атрибута aria-label для задания названия кнопки:
<button aria-label="Отправить форму">Отправить</button>
В данном примере мы добавили атрибут aria-label с текстовым описанием "Отправить форму" к кнопке "Отправить". Теперь, когда пользователь с ограниченными возможностями использует программы чтения экрана, он будет услышать описание кнопки.
Если у вас уже есть элемент на странице, который можно использовать в качестве названия для кнопки, вы можете использовать атрибут aria-labelledby:
<h2 id="title">Отправить форму</h2> <button aria-labelledby="title">Отправить</button>
В данном примере мы добавили атрибут aria-labelledby с ссылкой на элемент с id "title", который содержит текст "Отправить форму". Теперь кнопка будет доступна для пользователей, использующих программы чтения экрана, и они услышат название кнопки.
Не забывайте также о других методах улучшения доступности, таких как правильное использование alt-текста для изображений и использование семантических элементов HTML для правильной структуры контента. Все это поможет сделать ваш сайт более доступным для всех пользователей.