$30 off During Our Annual Pro Sale. View Details »

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

Cybozu
PRO
July 18, 2018
25k

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

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

Cybozu
PRO

July 18, 2018
Tweet

More Decks by Cybozu

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