Подписи
- Сопровождайте поле видимым
Label. - Кнопке-переключателю нужно постоянное доступное имя, например «Show password»; её состояние озвучивается через
aria-pressed.
Поведение клавиатуры
ОбъявлениеПереведите фокус на демо и нажмите клавишу из таблицы.
| Клавиша | Действие |
|---|---|
| EnterSpace | На кнопке-переключателе показывает или скрывает пароль и меняет aria-pressed. Фокус остаётся на кнопке. |
| Shift + Tab | С кнопки-переключателя возвращает фокус в поле. Переключатель — отдельная остановка табуляции после поля. |
- Ввод с клавиатуры остаётся нативным для поля ввода.
Поведение фокуса
- При переключении фокус остаётся на кнопке-переключателе, поэтому пользователи клавиатуры и скринридеров слышат новое состояние, а мобильная клавиатура не открывается.
Семантика для скринридеров
- Сам контрол по-прежнему — нативный input.
- Переключатель озвучивается как кнопка-переключатель, нажатая, пока пароль показан.
Семантика форм
- Отправка,
name,requiredи автозаполнение относятся кPasswordFieldInput. - Задавайте
autoComplete='current-password'илиautoComplete='new-password'осознанно.
Риски доступности
- кнопка-переключатель без подписи
- текст подсказки или подсказки о надёжности без настоящей семантики валидации
- собственные элементы только с иконкой, непонятные вспомогательным технологиям