ワークショップ間違いさがし - Spot the Difference 2016
-
Upload
milk54 -
Category
Technology
-
view
501 -
download
0
Transcript of ワークショップ間違いさがし - Spot the Difference 2016
D2Dアクセシビリティ勉強会 2016
ワークショップ間違いさがし
Presented by みるく
作業内容1 問題ページの中で
"アクセシブルではない箇所"を探し当ててください。
(JIS X 83413:2016 レベルA,レベルAAで不適合になる箇所)
1/15
作業内容2 その箇所は、
なぜアクセシブルではないのか? また、どうすればアクセシブルになるのか修正方法も提示してください。
2/15
間違っている箇所について(JIS X 83413:2016 不適合箇所)
1) レベルA不適合箇所 3個所2) レベルAA不適合箇所 2個所
3) よりアクセシブルに出来る箇所 1個所
3/15
【問題の架空サイト トップページ】
【
Dog Communityhttp://d2d2016.whitestage.com
※下層ページは作成されている設定です。Web アクセシビリティ評価ツールの紹介】http://d2d2016.whitestage.com/tool.html
4/15
作業手順1) ツールを使用してチェックする。
2) ページを見て視覚的に 間違い箇所がないかチェックする。
3) キーボードで操作可能かチェックする。
4) HTML,CSSのソースコードを見て 間違い箇所がないかチェックする。
5/15
アクセシビリティ4原則
1.知覚可能
2.操作可能
3.理解可能
4.堅牢性
6/15
【問題の架空サイト トップページ】 Dog Communityhttp://d2d2016.whitestage.com※下層ページは作成されている設定です。
HTML ソースコードhttp://d2d2016.whitestage.com/top.htmlCSS ソースコードhttp://d2d2016.whitestage.com/style.css
【Web アクセシビリティ評価ツールの紹介】http://d2d2016.whitestage.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://whitestage.com.