Краткий ответ
Да, стандартная проверка HTML5 доступна и пройдет WCAG2.1 AA, , но вы можете сделать намного лучше с некоторыми JavaScript.
Длинный ответ
Если вам нужна поддержка Inte rnet Explorer 9 или ниже, вам нужно будет использовать JavaScript (что согласно опросу WebAim - раздел «Браузеры») по-прежнему охватывает около 3,6% пользователей программ чтения с экрана).
Native HTML5 Проверка является очень хорошей отправной точкой, но есть ограничения (вы дали один в комментарии, некоторые программы чтения с экрана (NVDA) не объявляют снова метка, что означает, что пользователь должен физически запросить метку для чтения через элементы управления).
Другое дело, что, как только вы покидаете поле, оно обычно не сообщает, что допустило ошибку, пока Вы отправили форму (она предназначена для, но это не всегда так, в зависимости от скорости объявления, настроек и браузера).
Например, обновление aria-invalid полезно для немедленной обратной связи (и предоставляет поддержка старых браузеров, хотя и более надежная с «необычными» программами чтения с экрана).
Использование области aria-live для немедленной обратной связи onblur (или ограничено / отклонено) также является полезным и лучшим решением.
Еще одна вещь заключается в том, что собственная проверка на самом деле не очень эффективна. Например, fff@fff отображается как действительный адрес электронной почты и позволяет отправлять форму в поле type="email", также как и type="url", что позволяет отправлять https://fff (по крайней мере Chrome).
Я мог бы go продолжить с другими вещами, такими как предоставление более подробных инструкций о том, как исправить ошибки (особенно для таких вещей, как телефонные номера), но вы поняли.
В принципе, используйте столько * * * * * * * * * Родные HTML5 функции как можно более обеспечивают solid заземление и хороший запасной вариант для JavaScript ошибок / людей, не использующих JavaScript. Затем используйте CSS и JS, чтобы улучшить опыт для всех.
Кроме того, вы можете объединить HTML5 проверки и пользовательские JS?
You может, и вы должны знать, что в итоге вы удваиваете валидацию (что не так уж и плохо, как я говорил в качестве запасного варианта).
Прелесть в том, что вы можете использовать псевдоселекторы в ваших JavaScript для нацеливания полей по типу, избавляя от необходимости добавлять ненужные классы и т. Д. c.
Например, можно использовать document.querySelectorAll('input[type=email]') выбрать любой адрес электронной почты для проверки или document.querySelectorAll('input[required]'), чтобы найти все обязательные поля.
Вы также можете использовать такие вещи, как max="100" на ползунках / цифрах c, чтобы установить диапазоны проверки «на лету» и при этом иметь запасной вариант без JavaScript.
Как вы можете себе представить, давайте напишем библиотеку, если вы не можете найти готовую библиотеку, пригодную для повторного использования практически в любой форме.