2018-13-Webアクセシビリティ / 2018-13 web accessibility

- マシンリーダブルとは何かを知る
- 簡単なアクセシビリティチェックができるようになる

Transcript

1. 新人開発研修
   Webアクセシビリティ
   小林大輔 (デザイングループ)
   

   View Slide

2. アクセシビリティってなに？
   

   View Slide

3. 障がい者や高齢者を含めて「すべての人」が
   製品やサービスを支障なく利用できること
   アクセシビリティとは？
   

   View Slide

4. 今日の目標
   ▌マシンリーダブルとは何かを知る
   ▌簡単なアクセシビリティチェックができるようになる
   

   View Slide

5. Webはどんなかたち？
   

   View Slide

6. ビジュアルブラウザでの表示
   

   View Slide

7. スマートフォン
   

   View Slide

8. 検索結果
   

   View Slide

9. スクリーンリーダー・テキストブラウザ
   

   View Slide

10. スマートスピーカー、スマートウォッチ
    

    View Slide

11. ▌ビジュアルブラウザ
    ▌スマートフォン
    ▌検索エンジンによる検索結果
    ▌スクレイピングサービス
    ▌テキストブラウザ
    ▌点字ディスプレイ
    ▌スクリーンリーダー
    ▌未来のデバイス！
    Webのかたちはさまざま
    

    View Slide

12. 情報
    (コンテンツ)
    HTML
    ブラウザ
    支援技術
    利用者
    コンテンツがユーザに届くまで
    

    View Slide

13. マシンリーダブル
    コンテンツがソフトウェア・支援技術にとって理解しやすいこと
    アクセシビリティの重要な観点
    

    View Slide

14. マシンリーダブルの例
    

    View Slide

15. View Slide

16. これでよいだろうか
    
    

    View Slide

17. 
    画像の内容を機械に理解させよう
    

    View Slide

18. 
    
    
    見出しであることを機械に理解させよう
    

    View Slide

19. アクセシビリティチェック
    

    View Slide

20. https://www.w3.org/TR/WCAG20/
    WCAG2.0
    

    View Slide

21. ▌文面が難しく理解力が求められる
    ▌チェックする項目数が多い
    （レベルA:25個 レベルAA:33個 レベルAAA:13個 ）
    ▌チェックの網羅性が高い
    ▌国内外の法律やJIS/ISO等の規格はWCAG2.0に準拠
    WCAG2.0の長所と短所
    

    View Slide

22. https://www.w3.org/WAI/test-evaluate/preliminary/
    W3C Easy Checks
    

    View Slide

23. チェックの進め方
    ① ページタイトル
    ② 文書構造（見出し・リストなど）
    ③ 画像の代替テキスト
    ④ キーボード操作
    ⑤ フォームのラベル・エラー
    ⑥ 画面拡大
    ⑦ 色のコントラスト
    

    View Slide

24. ポータル- kintone
    ▌スクリーンリーダーが一番最初に読み上げる情報
    (全盲のユーザは、ページを俯瞰してみることが難しい)
    ▌ブラウザのタブやお気に入りの文言としても使われる
    ▌各ページに固有で、別のWebサイトと区別できるように
    適切なページタイトルをつけよう
    １
    

    View Slide

25. ▌スクリーンリーダーは「見出し」「リスト」など、構造を読む
    ▌見出しごとにジャンプするなど、読み飛ばすことができる
    ▌見出しには〜を使う
    ▌リストにはなどを使う
    文章構造をマークアップしよう
    ２
    

    View Slide

26. ▌全盲のユーザが画像の内容を理解するために重要
    ▌画像がダウンロードされなかったときにも画像の内容がわかる
    ▌すべてのimg要素に適切なalt属性をつける
    ▌装飾的な画像はalt=“”をつけるか、CSSの背景画像にする
    画像に代替テキストをつけよう
    ３
    

    View Slide

27. 
    
    
    代替テキストの例 - 検索ボタン
    

    View Slide

28. 
    代替テキストの例 – 円グラフ
    

    View Slide

29. 
    Warning!
    Your session is about to expire.
    Home
    代替テキストを省略する例
    

    View Slide

30. ▌四肢の障害や怪我、視覚障害のユーザに役立つ
    ▌一時的にマウスが使えないときや、マウスを使った方が効率が
    よいときがある
    ▌すべてキーボードで操作できるようにする
    ▌キーボードで操作している箇所が視認できるようにする
    ※表示されない場合は強制的に表示するツールなどを使う
    キーボード操作できるようにしよう
    ４
    

    View Slide

31. ユーザ名
    
    ▌スクリーンリーダーはフォームにフォーカスしたとき
    ラベルを読み上げる
    ▌ラベルがついていないと、何を入力して良いかわからない
    ▌だめな例：
    フォームにラベルをつけよう
    5
    

    View Slide

32. 名を入力” />
    ▌どうしてもラベルが配置できないとき:
    ユーザ名
    
    ▌ラベルが配置できるとき:
    ラベルをつける方法
    

    View Slide

33. ▌人によってはコンテンツの拡大が必要になるときがある
    ▌行間やフォントの変更が必要になる人もいる
    ▌200%拡大して読めない内容がないかチェック
    (要素の中の文字がはみ出した結果、別の要素に被るなど)
    拡大縮小しても情報が得られるようにしよう
    6
    

    View Slide

34. ▌ロービジョンのユーザや、屋外で端末を使用しているユーザな
    どに役立つ
    ▌文字と背景色のコントラスト比を
    4.5:1以上にしよう
    ▌チェックツールを使おう
    Colour Contrast Analyzer
    カラーコントラストを高めよう
    7
    

    View Slide

35. ✓適切なページタイトルがついている
    ✓見出しやリストで文書構造が指定されている
    ✓画像に適切な代替テキストがついている
    ✓キーボード操作できる
    ✓フォームにラベルがついている
    ✓拡大してもデザインが崩れない
    ✓色のコントラスト比が基準を満たしている
    きみのサイトはいくつチェックできるかな？
    

    View Slide

36. アクセシビリティに
    より深く取り組むには？
    

    View Slide

37. http://www.soumu.go.jp/menu_news/s-news/2005/051215_1_wmv.html
    当事者の使い方を知ろう
    

    View Slide

38. ▌デザイニングWebアクセシビリティ
    アクセシビリティ教科書の決定版
    ▌コーディングWebアクセシビリティ
    よりマシンリーダブルなHTMLを書くために
    ▌インクルーシブHTML+CSS&JavaScript
    ただいま輪講中
    優れた書籍を読もう
    

    View Slide

39. ▌Web Content Accessibility Guideline 2.0
    http://waic.jp/docs/WCAG20/Overview.html
    ▌W3Cが勧告しているアクセシビリティ基準リスト
    ▌各国のアクセシビリティに関する法律は、この基準を採用
    WCAG2.0を読んでみよう
    

    View Slide

40. ▌マシンリーダビリティとはなにか
    ▌アクセシビリティチェックの方法
    お話ししたこと
    

    View Slide