Successfully reported this slideshow.
Your SlideShare is downloading. ×

ワークショップ間違いさがし - Spot the Difference 2016

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 17 Ad

ワークショップ間違いさがし - Spot the Difference 2016

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Recently uploaded (20)

Advertisement

ワークショップ間違いさがし - Spot the Difference 2016

  1. 1. D2D アクセシビリティ勉強会          2016 ワークショップ 間違いさがし Presented by みるく
  2. 2. 作業内容 1 問題ページの中で "アクセシブルではない箇所"を 探し当ててください。 (JIS X 8341­3:2016 レベルA,レベルAAで不適合になる箇所) 1/15
  3. 3. 作業内容 2 その箇所は、 なぜアクセシブルではないのか? また、 どうすればアクセシブルになるのか 修正方法も提示してください。 2/15
  4. 4. 間違っている箇所について (JIS X 8341­3:2016 不適合箇所) 1) レベルA不適合箇所 3個所 2) レベルAA不適合箇所 2個所 3) よりアクセシブルに出来る箇所 1個所 3/15
  5. 5. 【問題の架空サイト トップページ】 Dog Community http://d2d2016.white­stage.com ※下層ページは作成されている設定です。 【Web アクセシビリティ評価ツールの紹介】 http://d2d2016.white­stage.com/tool.html 4/15
  6. 6. 作業手順 1) ツールを使用してチェックする。 2) ページを見て視覚的に   間違い箇所がないかチェックする。 3) キーボードで操作可能かチェックする。 4) HTML,CSSのソースコードを見て   間違い箇所がないかチェックする。 5/15
  7. 7. アクセシビリティ4原則 1.知覚可能 2.操作可能 3.理解可能 4.堅牢性 6/15
  8. 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. 9. 間違いさがしの答え check the answer 8/15
  10. 10. レベルA 1) label要素の「ユーザー名」と input要素が関係付けられていない。 【修正方法例】 <label for="name"> ユーザー名 </label> < input type="text" id="name"… 9/15
  11. 11. レベルA 2)必須項目を色(赤字)の情報のみで伝えている。 【修正方法例】 ラベルの「パスワード」の後に 伝えるべき情報である 「必須」をテキストでも提供する。 (パスワードの後に必須を追記する) 10/15
  12. 12. レベルA 3) CSSでh1要素の背景画像に設定されている 蝶々が常に動き続けている。 【修正方法例】 蝶々の動きを制御出来るように するか(停止ボタン等付ける) 5秒動いたら止める様にする 或いは動き自体を止める。 (CSSで設定している アニメーション部分の 記述を修正もしくは削除する) 11/15
  13. 13. レベルAA 1) 「新規会員登録(無料)」ボタンの背景色と文字色の コントラスト比が 3.0:1(大きなサイズ)を満たしていない。 【修正方法例】 背景色と文字色のコントラスト比が 3.0:1を満たす配色にする。 例)背景色を#9d630f 文字色#ffffff等 12/15
  14. 14. レベルAA 2) キーボード・フォーカスの状態が視覚的に認識出来ない。 (キーボードのTabキーを押して移動した時、 フォーカスされている箇所にアウトラインが表示されないので、 今どこにフォーカスがあたっているのかわからない。 (現在地がわからない) ) 【修正方法例】 CSSファイルの89行目、 outline: none; の記述を削除する。 13/15
  15. 15. よりアクセシブルに パスワードの説明文(※半角英数6文字以上10文字以内) とinput要素を関係づける。 【修正方法例】 < input type="text" aria-describedby="info" id="password"… < p id="info"> ※半角英数6文字以上10文字以内 < /p > 14/15
  16. 16. To make everyone Happy! 15/15
  17. 17. ありがとうございました。 Thank you for your time. White Stage : https://white­stage.com.

×