2015-06-21（日）に大阪JUSO Coworkingにて行われた「第6回 D2D アクセシビリティ勉強会」でのスライドです。

1. アクセシブルな入力フォームを作ろう
2015年6月21日
第6回 D2Dアクセシビリティ勉強会

2. 2
自己紹介

3. 3
SAWADA STANDARD DESIGN
澤田 望
@SawadaStdDesign
WAIC WG2委員（2011年〜）
キヤノンサイトのデザイン監修／運用（〜2013年）
2014年、岡山で独立

4. 4
今回の目標

5. 5
↑
ここの克服。
D2Dサイト用の単純な入力フォームは作れた。
でも、現実世界はそんなに甘くない！もっと面倒
なフォームばかりで、対応できない気がする。

6. 6
ま、できる範囲のことをしてみよう。（なげやり）

7. 7
プログラムは変更せず、マークアップの工夫だけでも
アクセシブルにするためのポイントは大部分がカバーできる
. . . はず。

8. 8
入力フォームを
JIS対応させる際のポイント

9. 9
•知覚可能 フォームのコントロールであることが分かり、
•操作可能 ちゃんと操作できて、
•理解可能 何を入力すべきかが理解できる。
•堅牢性
ウェブアクセシビリティの4つの原則

10. 10
JIS X 8341-3:2010 達成等級Aの
達成基準を満たすために必要なこと
参考：実装チェックリストの例例 2012年年11⽉月版

11. 11
フォームコントロールも非テキストコンテンツなので、
ラベルや代替テキストで「何の」コントロールなのか
を伝える。
⚫達成方法の例
H36：コントロールに画像を使うなら代替テキストを設定する。
H44：label要素でテキストラベルとコントロールを関連付ける。
H65：label要素を使えないなら、title属性で代用する。
7.1.1.1 非テキストコンテンツ

12. 12
「ラベルとコントロール」「コントロールのグループ」等
の関係性をちゃんと伝える。
⚫達成方法の例
H44：label要素で、テキストラベルとコントロールを関連付ける。
H65：label要素を使えないなら、title属性で代用する。
H71：fieldset要素とlegend要素で、グループの説明をする。
H85：optgroup要素で、select要素内のoption要素をグループ化する。
7.1.3.1 情報及び関係性

13. 13
入力完了までに制限時間を設ける場合は、入力に時間がか
かる利用者が困らないよう、延長や解除ができる手段を提
供する。
⚫達成方法の例
G133：複数画面あるフォームの最初のページに、
利用者が制限時間を延長／解除できるチェックボックスを提供する。
G198：利用者が制限時間を解除できる手段を提供する。
7.2.2.1 タイミング調整可能

14. 14
入力すべき順序とフォーカスの順序を一致させる。
まずはマークアップ順。ダメならtabindex属性。
⚫達成方法の例
G59：コンテンツ内の順番と関係に従ってコントロールを並べる。
H4：コントロールには論理的なタブ移動順序を作成する。
C27：DOMの順序を表示順序と一致させる。
7.2.4.3 フォーカス順序

15. 15
利用者が気づかないと混乱する恐れのある大きな変化を、
フォームコントロールの設定変更中（操作している最中）
に起こさない。
⚫達成方法の例
G80／H32：実行ボタンを提供する。
H84：select要素とボタンを併用してアクションを実行する。
G13：変化を引き起こす前に、何が起こるのかを説明する。
7.3.2.2 コンテキスト変化の防止（入力時）

16. 16
入力エラー検出時には、エラー箇所を特定し、
エラー内容を利用者にテキストで説明する。
⚫達成方法の例
G83：必須なのに未入力な項目をテキストで指摘する。
G84：認められない値が入力されたらテキストで指摘する。
G85：要求と違うフォーマットや値ならテキストで指摘する。
7.3.3.1 エラーの特定

17. 17
入力用の各コントロールには、ラベル又は説明文を提供する。
⚫達成方法の例
G89：データ形式および入力例を提供する。
G184：フォームの先頭でフォーマットの説明文を提供する。
G162：入力項目とラベルの関係がよく分かるように配置する。
G83：必須なのに未入力な項目をテキストで指摘する。
H44：label要素でテキストラベルとコントロールを関連付ける。
H65：label要素を使えないなら、title属性で代用する。
H71：fieldset要素とlegend要素で、グループの説明をする。
G167：テキストフィールドを隣のボタンでラベル付けする。（最終手段）
7.3.3.2 ラベル又は説明

18. 18
やっぱり大変. . .

19. 19
いやいや、多く見えるけど、基本的には
ラベル／説明文／エラーメッセージ
の３つで多くのケースはカバーできるはず。

20. 20
D2Dサイトの入力フォームを
アクセシブルにするポイント

21. 21
1.迷いようのないラベル
2.必須項目が3箇所
3.メールアドレス
4.電話番号
5.ラジオボタン
6.白抜き文字のデザイン

22. 22
<label for="hoge">お名前<span>必須</span></label>
<input type="text" id="hoge">
1. 迷いようのないラベル
※for属性とid属性によって対応関係を定義する。

23. 23
<label for="hoge">お名前<span>必須</span></label>
<input type="text" id="hoge" aria-‐‑‒required="true">
2. 必須項目が3箇所
※required属性はNVDAが「無効なエントリー」と読み上げてしまう。
required属性 + aria-required="true"でも同じ。

24. 24
<label for="hoge">メールアドレス<span>必須</span></label>
<input type="text" id="hoge" aria-‐‑‒required="true">
3. メールアドレス
※type=“email”はエラーチェックが厳く、半角スペースが入っていても
「メールアドレスが正しくありません」でエラーになるため今回は見送り。

25. 25
<label for="hoge">電話番号</label>
<input type="tel" id="hoge">
4. 電話番号
※type=“tel”は特にエラーチェックしてくれるわけではないが、
スマホでキーボードを電話番号用に切り替えてくれる。

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;
}
※文字サイズ拡大時に背景からはみ出して読めなくならないように注意。

28. 28
D2Dサイト用の入力フォームは単純だったけど、
もう少し複雑なパターンを作れないと、実際の業
務に活かせない. . .

29. 29
もう少し現実世界と向き合うために

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の使用について（基本的な考え方）

31. 31
じゃ、よくあるパターンをいくつか

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属性で説明文と関係付ける。
リングネーム 全角カナ

34. 34
<label for="hoge">リングネーム</label>
<input type="text" id="hoge" placeholder="ミル・マスカラス">
フィールド内に入力例を表示したい
※ placeholder属性を使うと割とお気軽に実現できる。 ように見えるが. . .
ミル・マスカラス リングネーム

35. 35
プレースホルダーの問題点
1.入力時にplaceholder属性の内容が消えてしまうため、
途中で「何だったっけ？」と振り返れない。
→必要な情報は常時表示させる。
2.入力漏れを探しにくい。
3.入力前に自分で消そうとする利用者がいる。
4.input要素がlabel要素と関係付けられている場合、placeholder
属性は、PC-Talker7とNVDAで読み上げられない。
→title属性をjQuery使って重ねる。
<label for="hoge">リングネーム</label>
<input type="text" id="hoge" title="例：ミル・マスカラス">

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が優先読み上げしない。
上田馬之助リングネーム 全角カナ
リングネームは全力で入力してください。

37. 37
次は、みるくさんから意地悪問題の出題です。

38. 38
では、制作開始！

39. 39
お疲れ様でした！では解答例を。

40. 40
最後に補足を一つ

41. 41
【補足】外部サービスのフォームをアクセシブルにする
WAIC宛にいただいた質問の中に「外部サービスを利用した検索窓を設置しており、提供さ
れたコードを編集できないため、label要素を追加できない」というものがありました。
しかし外部サービスでもHTML編集できるものや、編集は出来なくてもid属性が付けられて
いれば、対応するlabel要素を追加することができます。
例）Googleの場合
提供されるコード 埋め込み後、実行時のコード
<script>
(function() {
var cx = '016706344149176820118:zkxgdo_̲a-‐‑‒oe';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' :
'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
<input id="gsc-‐‑‒i-‐‑‒id1" class="gsc-‐‑‒input"
type="text" lang="ja" autocomplete="off"
size="10" name="search" title=“検索"〜〜〜>
<label for=“gsc-‐‑‒i-‐‑‒id1">検索したい情
報を入力してください。</label>
下記を追加すればアクセシブルに！

42. 42
諦めなければ、たどり着けるぜ！

43. 43
ありがとうございました。