Решения: Доступность: alt, label, aria и клавиатура

Кратко

Сравните своё решение с эталоном: каждое поле имеет связанный label, подсказка связана через aria-describedby, кнопка — нативный button.

Эталонный фрагмент формы

Ниже — живой результат справа от кода. Кликните по подписи «Ссылка на портфолио» — курсор встанет в поле.

Можно указать GitHub, Behance или личный сайт.

<label for="portfolio">Ссылка на портфолио</label>
<input id="portfolio" name="portfolio" type="url" aria-describedby="portfolio-help">
<p id="portfolio-help">Можно указать GitHub, Behance или личный сайт.</p>

<button type="submit">Сохранить профиль</button>

Разбор логики

  • for="portfolio" совпадает с id="portfolio" — подпись связана с полем.
  • aria-describedby указывает на id подсказки — скринридер прочитает её после имени поля.
  • <button type="submit"> — нативная кнопка, доступная с клавиатуры без доработок.

Главная проверка: код понятен без CSS и не зависит от случайных визуальных эффектов.