2016年9月22日に開催されたD2Dアクセシビリティ勉強会2016で使用したワークショップ間違いさがしの資料です。

1. D2D
アクセシビリティ勉強会
2016
ワークショップ
間違いさがし
Presented by みるく

2. 作業内容
1 問題ページの中で
"アクセシブルではない箇所"を
探し当ててください。
(JIS X 8341­3:2016
レベルA,レベルAAで不適合になる箇所)
1/15

3. 作業内容
2 その箇所は、
なぜアクセシブルではないのか？
また、
どうすればアクセシブルになるのか
修正方法も提示してください。
2/15

4. 間違っている箇所について
(JIS X 8341­3:2016 不適合箇所)
1) レベルA不適合箇所
3個所
2) レベルAA不適合箇所
2個所
3) よりアクセシブルに出来る箇所
1個所
3/15

5. 【問題の架空サイト トップページ】
Dog Community
http://d2d2016.white­stage.com
※下層ページは作成されている設定です。
【Web アクセシビリティ評価ツールの紹介】
http://d2d2016.white­stage.com/tool.html
4/15

6. 作業手順
1) ツールを使用してチェックする。
2) ページを見て視覚的に
間違い箇所がないかチェックする。
3) キーボードで操作可能かチェックする。
4) HTML,CSSのソースコードを見て
間違い箇所がないかチェックする。
5/15

7. アクセシビリティ4原則
1.知覚可能
2.操作可能
3.理解可能
4.堅牢性
6/15

8. 【問題の架空サイト トップページ】
Dog Community
http://d2d2016.white­stage.com
※下層ページは作成されている設定です。
HTML ソースコード
http://d2d2016.white­stage.com/top.html
CSS ソースコード
http://d2d2016.white­stage.com/style.css
【Web アクセシビリティ評価ツールの紹介】
http://d2d2016.white­stage.com/tool.html
7/15

9. 間違いさがしの答え
check the answer
8/15

10. レベルA
1) label要素の「ユーザー名」と
input要素が関係付けられていない。
【修正方法例】
<label for="name">
ユーザー名
</label>
< input type="text" id="name"…
9/15

11. レベルA
2)必須項目を色(赤字)の情報のみで伝えている。
【修正方法例】
ラベルの「パスワード」の後に
伝えるべき情報である
「必須」をテキストでも提供する。
(パスワードの後に必須を追記する)
10/15

12. レベルA
3) CSSでh1要素の背景画像に設定されている
蝶々が常に動き続けている。
【修正方法例】
蝶々の動きを制御出来るように
するか(停止ボタン等付ける)
5秒動いたら止める様にする
或いは動き自体を止める。
(CSSで設定している
アニメーション部分の
記述を修正もしくは削除する)
11/15

13. レベルAA
1) 「新規会員登録(無料)」ボタンの背景色と文字色の
コントラスト比が 3.0:1(大きなサイズ)を満たしていない。
【修正方法例】
背景色と文字色のコントラスト比が
3.0:1を満たす配色にする。
例)背景色を#9d630f
文字色#ffffff等
12/15

14. レベルAA
2) キーボード・フォーカスの状態が視覚的に認識出来ない。
(キーボードのTabキーを押して移動した時、
フォーカスされている箇所にアウトラインが表示されないので、
今どこにフォーカスがあたっているのかわからない。
(現在地がわからない) )
【修正方法例】
CSSファイルの89行目、
outline: none;
の記述を削除する。
13/15

15. よりアクセシブルに
パスワードの説明文(※半角英数6文字以上10文字以内)
とinput要素を関係づける。
【修正方法例】
< input type="text" aria-describedby="info" id="password"…
< p id="info">
※半角英数6文字以上10文字以内
< /p >
14/15

16. To make
everyone Happy!
15/15

17. ありがとうございました。
Thank you for your time.
White Stage : https://white­stage.com.