前回デザインしたフォームをグループでマークアップ！またより実践的なあるあるなフォームもイジワル問題として出題され、ドドーンと延長（汗。
@SawadaStdDesignさんの第6回 D2D アクセシビリティ勉強会資料
「アクセシブルな入力フォームを作ろう」
@milk54さんの第6回 D2D アクセシビリティ勉強会振り返り
第6回 D2D アクセシビリティ勉強会でアクセシブルなフォームを作成！
今回は勉強会の振り返りというより勉強会で学んで、日々できるフォームの書き方をズラリまとめてみました。
label要素でテキストラベルとテキストフィールドを関連付ける。
例）
<label for="name">名前</label> <input type="text" id="name" />
例）必須項目の場合
<label for="name">名前<span>[必須]</span></label> <input type="text" id="name" aria-required="true" />
※html5で用意されている”required”は、現状 音声ブラウザのNVDAで「無効なエントリー」と読み上げられてしまう。。。のでWAI-ARIAのaria-required=”true”を入れましょう。
上記問題は解決しております。required=”required”を使用しても問題ありませーん。
<label for="name">名前<span>[必須]</span></label> <input type="text" id="name" required="required" />
例）ラジオボタンの場合
<p id="inquiry">お問い合わせの種類</p> <div role="radiogroup"> <input id="kubun01" type="radio" name="kubun" value="A" aria-labelledby="inquiry"/><label for="kubun01">Aについて</label> <input id="kubun02" type="radio" name="kubun" value="B" aria-labelledby="inquiry"/><label for="kubun01">Bについて</label> <input id="kubun03" type="radio" name="kubun" value="C" aria-labelledby="inquiry"/><label for="kubun01">Cについて</label> </div>
※ラジオボタンはhtmlのfieldsetでグループ化、legendを使ってタイトルを明示したいところですが、読み上げソフトで現状対応していないので、WAI-ARIAを使ってグループ化と紐付けします。
チェック項目をrole=”radiogroup”でくくりグループ化します。
タイトル部分にid=”inquiry”、チェック項目[input]には、それぞれaria-labelledby=”inquiry”でタイトルとチェック項目を紐付けします。
また、チェック項目のクリッカブル範囲を大きくとりたいので、labelでinputタグをくくります。
label要素を使えないなら、title属性で代用する。
例）入力する項目が二つに分かれてる場合。郵便番号ナド
<label for="postnum">郵便番号</label> <input type="text" id="postnum" title="郵便番号前の3桁">-<input type="text" title="郵便番号後ろの4桁">
※本来ならラベルとテキストフィールドが一対がベスト。でもラベル一つに対してテキストフィールドが二つの場合は、title=””を使います。
入力項目に説明文や例を表示
例）
<label for="kana">ふりがな</label> <p id="kanaNotice">ひらがなで入力してください。</p> <input type="text" id="kana" aria-describedby="kanaNotice"/>
※入力する時に気をつけてほしい説明文などはテキストフィールドにフォーカスがあたった時点で読み上げてほしいので、ここもWAI-ARIAを使って紐付けします。
説明文にid=”kanaNotice”をあて、テキストフィールド[input]にaria-describedby=”kanaNotice”で紐づけます。
html5のplaceholderを使ってテキストフィールド内に入力例など表示できますが、イザ入力しようとしてカーソルを入れると消えちゃう。。
私も結構便利でよくやるのですが、消えるというのはあまりよろしくないんですね。
出来ればテキストフィールドより前にちゃんと記載するのがベターです。
検索ボタン
例）
<!-- <label for="searchbox">キーワード検索</label> --!> <input type="search" id="searchbox" placeholder="検索キーワードを入力してください"> <button type="submit"><img src="img/btn_search.png" alt="検索する"></button>
※ページ上部によくある検索フォームなどはlabelがなくてもまぁよしとされているようです。
周知の事実というかボタンとテキストフィールドが隣どうしで設置され、目的を理解しやすい間違えないだろうという解釈のようです。
参考：G167: 隣接するボタンを用いて、テキスト・フィールドの目的をラベル付けする
といってもlabelをつけて、CSSで画面上見えなくする（display=”none;”を使うと読み上げないスクリーンリーダーがあるのでダメ）手法をとっているCSSフレームワークもあります。
DOMの順序と表示順序を一致させる
フォームが２カラムとかになり、htmlの順序と質問の順序が違ってくる場合は、tabindex=”数字”を使ってキーボードで移動する順番を指定できます。
通常、上から順番になっているフォームは特に指定はいりません。
メールの入力
例）
<input type="email" value="" />
※type=”email”を指定するとエラーチェックをしてくれる便利なやつですが、このチェックが厳しすぎる～半角が入ってもエラーになってしまうので、使うときはちょっと考えよう。
電話番号の入力
例）
<input type="tel" value="" />
※エラーチェックはしないけど、スマホで入力モードが数字になるので便利♪
勉強会を終えて。。。
私のチームでは、ラジオボタンだとスマホではチェックしにくいので、セレクトボックスのほうが使いやすいのでは？という話がでました。
これは、時々の判断だと思うのですが、ラジオボックスの最大の利点は画面に項目がズラリ表示されているので親切だということです。
また、スマホのドラムロール（慣れると便利なんだけど）に戸惑う人も多いようです。
選択項目の数やターゲット層を考えて、ちょっと確認すべきところかも。
今回は結構テンパってました（汗 けれど、とてもスッキリした会になりました。ちょっとは苦手意識がうすれたかもw