はじめに
aria-invalidとかaria-liveとか・・面倒・・・
要は...フォームをアクセシビリティに配慮したものにするって・・・話
探してみたら・・下記を発見・・・・
https://github.com/DavideTriso/form-controls
https://github.com/DavideTriso/form-controls/blob/master/documentation/ARIA-VALIDATE.md
上記を落としてdistにある下記を持ってきます。。
aria-validate.js
form-controls.css
デモ画面
https://davidetriso.github.io/form-controls/validation.html
呼び出し・・
日本語化とか・・・・
使い方
英語版なので郵便番号、電話番号などは、customRegexモードで自作します。
HTMLで使用するクラス名、ID名のcontrolで始まるものは、aria-validate.jsで使用する要素です。
HTML
JS
HTML
郵便番号customRegex使用例 ...
JS
HTML
メールアドレスの確認付き...
JS
各種の自作...
各CSS
エラー表示はform-controlsのCSSが使われているので下記を参考に
control__feedback_bottomとか。。control__feedback_startbottomとか・・
https://davidetriso.github.io/form-controls/control-types.html
日本語デモ
デモさいごに
あとは、。。本家見ると....いけるかも・・
jquery.validationEngine.jsとか比べると設置は面倒ですね・・・
まぁ。このあたりは1度。メールフォーム作ってしまえば・・・使いまわし?!
カスタムするときは・・下記を把握してから・・・・・
https://waic.jp/translations/WCAG-TECHS/ARIA21