D2Dアクセシビリティ勉強会　　　　　　　　 2016

ワークショップ間違いさがし

Presented by みるく

作業内容1 問題ページの中で

"アクセシブルではない箇所"を探し当ててください。

(JIS X 8341­3:2016 レベルA,レベルAAで不適合になる箇所)

1/15

作業内容2 その箇所は、

なぜアクセシブルではないのか？ また、どうすればアクセシブルになるのか修正方法も提示してください。

2/15

間違っている箇所について(JIS X 8341­3:2016 不適合箇所)

1) レベルA不適合箇所 3個所2) レベルAA不適合箇所 2個所

3) よりアクセシブルに出来る箇所 1個所

3/15

【問題の架空サイト トップページ】

【

Dog Communityhttp://d2d2016.white­stage.com

※下層ページは作成されている設定です。

Web アクセシビリティ評価ツールの紹介】http://d2d2016.white­stage.com/tool.html

4/15

作業手順1) ツールを使用してチェックする。

2) ページを見て視覚的に　 間違い箇所がないかチェックする。

3) キーボードで操作可能かチェックする。

4) HTML,CSSのソースコードを見て　 間違い箇所がないかチェックする。

5/15

アクセシビリティ4原則

1.知覚可能

2.操作可能

3.理解可能

4.堅牢性

6/15

【問題の架空サイト トップページ】 Dog Communityhttp://d2d2016.white­stage.com※下層ページは作成されている設定です。

HTML ソースコードhttp://d2d2016.white­stage.com/top.htmlCSS ソースコードhttp://d2d2016.white­stage.com/style.css

【Web アクセシビリティ評価ツールの紹介】http://d2d2016.white­stage.com/tool.html

7/15

間違いさがしの答え check the answer

8/15

レベルA1) label要素の「ユーザー名」と input要素が関係付けられていない。

【修正方法例】 <label for="name">

ユーザー名</label>

< input type="text" id="name" …

9/15

レベルA2)必須項目を色(赤字)の情報のみで伝えている。

【修正方法例】 ラベルの「パスワード」の後に伝えるべき情報である 「必須」をテキストでも提供する。(パスワードの後に必須を追記する)

10/15

レベルA3) CSSでh1要素の背景画像に設定されている 蝶々が常に動き続けている。

【修正方法例】 蝶々の動きを制御出来るようにするか(停止ボタン等付ける)

5秒動いたら止める様にする 或いは動き自体を止める。 (CSSで設定している アニメーション部分の 記述を修正もしくは削除する)

11/15

レベルAA1) 「新規会員登録(無料)」ボタンの背景色と文字色の コントラスト比が 3.0:1(大きなサイズ)を満たしていない。

【修正方法例】背景色と文字色のコントラスト比が3.0:1を満たす配色にする。例)背景色を#9d630f 文字色#ffffff等

12/15

レベルAA2) キーボード・フォーカスの状態が視覚的に認識出来ない。 (キーボードのTabキーを押して移動した時、 フォーカスされている箇所にアウトラインが表示されないので、 今どこにフォーカスがあたっているのかわからない。 (現在地がわからない) )

【修正方法例】 CSSファイルの89行目、

outline: none; の記述を削除する。

13/15

よりアクセシブルにパスワードの説明文(※半角英数6文字以上10文字以内)とinput要素を関係づける。

【修正方法例】< input type="text" aria-describedby="info" id="password" …

< p id="info">

※半角英数6文字以上10文字以内< /p >

14/15

To make everyone Happy!

15/15

ありがとうございました。 Thank you for your time.

White Stage : https://white­stage.com.