More Related Content
More from Nozomi Sawada (15)
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
- 17. 17
入力用の各コントロールには、ラベル又は説明文を提供する。
⚫達成方法の例
G89:データ形式および入力例を提供する。
G184:フォームの先頭でフォーマットの説明文を提供する。
G162:入力項目とラベルの関係がよく分かるように配置する。
G83:必須なのに未入力な項目をテキストで指摘する。
H44:label要素でテキストラベルとコントロールを関連付ける。
H65:label要素を使えないなら、title属性で代用する。
H71:fieldset要素とlegend要素で、グループの説明をする。
G167:テキストフィールドを隣のボタンでラベル付けする。(最終手段)
7.3.3.2 ラベル又は説明
- 26. 26
<p id="hoge">お問合せの種類</p>
<div role="radiogroup">
<label for="hogeA">
<input type="radio" id="hogeA" aria-‐‑‒describedby="hoge">Aについて
</label>
:
</div>
5. ラジオボタン
※本来ならfieldset要素を使うべき箇所。
しかしPC-Talker7とVoiceOverで読み上げられないので、現時点では見送り。
確実に読み上げられないと意味が通じなくなる箇所にはfieldset要素を使わない。
- 27. 27
6. 白抜き文字のデザイン
input[type="submit"] {
background: #000000 url(“〜~/img/arrow.gif") no-‐‑‒repeat scroll 94% 50%;
border-‐‑‒bottom-‐‑‒left-‐‑‒radius: 10px;
border-‐‑‒top-‐‑‒right-‐‑‒radius: 10px;
color: #ffffff;
display: block;
}
※文字サイズ拡大時に背景からはみ出して読めなくならないように注意。
- 30. 30
1.要素のセマンティクスを最優先
それで通じるなら、それだけでいい。
(Notes on Using ARIA in HTML [日本語訳]参照)
•label要素など
2.WAI-ARIAの必要性検討
妥当な要素が使えない場合。
•aria-label/aria-labelledbyでラベル
•aria-describedbyで説明
•roleでグループ化(radiogroupなど)
3.スクリーンリーダーの対応状況は、まだマチマチ
html5で追加された要素や属性は要注意。
無視されるよりも間違った読み方をされることが危険。
WAICのアクセシビリティサポーテッド情報も未整備。
WAI-ARIAの使用について(基本的な考え方)
- 32. 32
<label for="hoge">電話番号</label>
<div>
<input type="tel" id="hoge" title="市外局番">-‐‑‒<input type="tel" title="市内局番">-‐‑‒
<input type="tel" title="加入者番号">
</div>
一つの項目が複数のフィールドに分かれている
※各フィールドに対するラベルは必要。しかしデザイン上表記されているのは「電
話番号」のみで、「市外局番」などを個別に表示することは難しい状況。
→仕方ない状況なので、今回はtitle属性を使う。
ただし、title属性はビジュアルブラウザーでは表示されない点に注意。
電話番号 - -
- 33. 33
<label for="hoge">リングネーム</label>
<input type="text" id="hoge" aria-‐‑‒describedby="hogeDesc">
<p id="hogeDesc">全角カナ</p>
説明文がフィールドの右にレイアウトされている
※そのまま並べただけでは、スクリーンリーダー利用者や画面拡大利用者が入力前に気がつ
かない可能性が高い。
→aria-describedby属性で説明文と関係付ける。
リングネーム 全角カナ
- 36. 36
<body onload=“document.getElementById('error_̲message').focus()">
:
<label for="hoge">リングネーム</label>
<input type="text" id="hoge" aria-‐‑‒describedby="hogeDesc">
<p id=“hogeDesc">全角カナ</p>
<p role="alert" aria-‐‑‒live="assertive" id="error_̲message" tabindex="-‐‑‒1">リングネームは全力で入力してください。
</p>
エラーメッセージを読み上げさせたい
※HTML5で追加された属性(required属性やpattern属性など)による入力チェック結果
表示は、スクリーンリーダーの読み上げ対応が遅れているため、現状ではJavaScriptな
どで動的に追加する方法を推奨します。
※role=“alert”だけだとNVDAが優先読み上げしない。
上田馬之助リングネーム 全角カナ
リングネームは全力で入力してください。