Атрибут alt тега <input>
Описание
Атрибут alt для элемента <input> используется только с input type="image" и предоставляет альтернативный текст для изображения-кнопки. Это критически важно для доступности.
<input
type="image"
src="submit-button.png"
alt="Отправить форму"
width="120">
Когда и как использовать:
| Тип input | Нужен alt? | Пример |
|---|---|---|
type="image" |
Обязателен | alt="Поиск" |
| Другие типы | Не применяется | - |
Рекомендации по содержимому alt:
<!-- Хорошо: описывает действие -->
<input type="image" src="search.png" alt="Начать поиск">
<!-- Плохо: описывает изображение -->
<input type="image" src="search.png" alt="Лупа с надписью Search">
<!-- Плохо: пустой alt -->
<input type="image" src="search.png" alt="">
Доступность и семантика:
- Эквивалент текстовой кнопки
<button> - Должен описывать действие, а не внешний вид
- Обязателен для соответствия WCAG
- Используется скринридерами вместо изображения
Пример с CSS-заменой:
<style>
.button-submit {
background: url('submit.png') no-repeat;
width: 120px;
height: 40px;
border: none;
cursor: pointer;
}
</style>
<!-- Лучшая альтернатива -->
<button type="submit" class="button-submit">
<span class="sr-only">Отправить форму</span>
</button>
Ограничения и совместимость:
- Работает только с
type="image" - Поддерживается всеми браузерами и скринридерами
- Для других типов input используйте
aria-label - Не заменяет подпись (
<label>) для других элементов форм
Примечание: Для современных веб-приложений рекомендуется использовать <button> с CSS-стилизацией вместо input type="image". Это обеспечивает лучшую доступность и гибкость дизайна.