Upgrade to Pro — share decks privately, control downloads, hide ads and more …

アクセシビリティ 2021 / Accessibility 2021

アクセシビリティ 2021 / Accessibility 2021

Cybozu
PRO

May 17, 2021
Tweet

More Decks by Cybozu

Other Decks in Technology

Transcript

  1. サイボウズ
    開発運⽤研修 アクセシビリティ
    ⼩林⼤輔
    デザイン&リサーチ
    アクセシビリティエキスパート

    View Slide

  2. • アクセシビリティとは︖
    • マシンリーダブル・ヒューマンリーダブルを理解する
    • アクセシビリティ確保の基本を理解する
    この講義で学ぶこと
    復習

    View Slide

  3. アクセシビリティとは︖
    復習

    View Slide

  4. アクセシビリティ=障害者・⾼齢者のための特別対応︖

    View Slide

  5. アクセシビリティとは
    障害者・⾼齢者を含めて「すべての⼈」が
    製品やサービスを⽀障なく利⽤できること

    View Slide

  6. ⾒る
    ロービジョン 全盲
    話す
    ⾔語障害
    聞く
    ろう
    難聴
    読む
    ディスレクシア
    集中する
    うつ
    ADHD
    動く
    肢体不⾃由
    ⾻折・怪我

    View Slide

  7. ⾒る
    ロービジョン 全盲
    話す
    ⾔語障害
    聞く
    ろう
    難聴
    読む
    ディスレクシア
    集中する
    うつ
    ADHD
    動く
    肢体不⾃由
    ⾻折・怪我
    ⼩さい画⾯
    電⾞内
    マスク
    海外出張
    在宅ワーク
    ⽇光下
    急な予定
    育児中
    満員電⾞
    運転中
    英⽂ 騒⾳
    静⾳環境

    View Slide

  8. ユーザ サイボウズ製品 チーム

    View Slide

  9. サイボウズにとって、アクセシビリティとは
    「ユーザがチームにアクセスできる能⼒」

    View Slide

  10. アクセシビリティを確保することは
    「チームに参加したい」という
    ユーザのねがいを尊重すること

    View Slide

  11. アクセシビリティに取り組むには︖

    View Slide

  12. コンテンツがユーザに届くまで
    制作者 ユーザ
    ハードウェア
    (PC・スマホ…)
    ソフトウェア
    (ブラウザ・⽀援技術)
    ⼊出⼒
    機器
    感覚情報
    (視覚・聴覚・触覚…)
    Webコンテンツ
    (HTML・CSS・JS…)

    View Slide

  13. アクセシビリティを⾼める2つの要素
    マシン
    リーダブル
    ヒューマン
    リーダブル
    制作者 ユーザ

    View Slide

  14. アクセシビリティ確保の基本

    View Slide

  15. 1. ⾒出し・ランドマークなどの⽂書構造をマークアップする
    2. リンクテキストはリンク先がわかるようにする
    3. 画像に代替テキストを提供する
    4. 情報を伝える⾊の使い⽅に注意する
    5. ⽂字を拡⼤しても情報が正しく伝わるようにする
    6. キーボードで操作できるようにする
    7. フォームフィールドにラベルを関連づける
    アクセシビリティ確保の基本

    View Slide

  16. 役⽴つ⼈・役⽴つ場⾯
    ⾒出し・ランドマークなどの⽂書構造をマークアップする
    スクリーンリーダーは⾒出し・ランドマークなどの⽂書構造を読む
    構造ごとに「読み⾶ばす」こともできる
    • 全盲の⼈/ロービジョンの⼈/ディスレクシアの⼈

    View Slide

  17. デザイン
    実装
    やるべきこと
    • モックの段階で⾒出しにする箇所を決める
    • モックの段階でランドマークにする箇所を決める
    • ⾒出しはh1...h6要素でマークアップする
    • header, footer, nav, aside...を使う

    View Slide

  18. 役⽴つ⼈・役⽴つ場⾯
    リンクテキストはリンク先がわかる⽂⾔にする
    スクリーンリーダーには「リンク」にジャンプする機能がある
    同じリンク⽂⾔が続くとリンクが表す内容を理解しづらい(デモ)
    • 全盲の⼈/ロービジョンの⼈/ディスレクシアの⼈

    View Slide

  19. やるべきこと
    デザイン • 不明瞭なリンクテキストを使わない
    「ここをクリック」「さらに表⽰」「詳細はこちら」
    • どうしてもテキストを変えられない場合
    ⾒出しと組み合わせる
    ツールチップで補⾜する

    View Slide

  20. 役⽴つ⼈・役⽴つ場⾯
    画像に代替テキストを提供する
    スクリーンリーダーは代替テキストを読み上げる
    画像のダウンロードに失敗すると代替テキストが表⽰される
    • 視覚障害の⼈
    • 低速回線の⼈(画像のダウンロードに失敗した場合)

    View Slide

  21. • img要素にalt属性をつける
    代替テキストの提供⽅法

    View Slide

  22. alt属性はどう読まれる︖
    https://jsfiddle.net/sukoyakarizumu/qL5sf7r1/show

    View Slide

  23. やるべきこと
    デザイン • 画像が何を表しているのかテキストで説明する
    • 画像につける代替テキストを決める
    実装
    • 意味のあるimg要素には、alt属性をつける
    • 装飾的なimg要素には、alt=""をつける

    View Slide

  24. 役⽴つ⼈・役⽴つ場⾯
    情報を伝える⾊の使い⽅に注意する
    ⾊のみに依存しない表現にする
    ⾊同⼠のコントラストを⾼くする
    • ロービジョンの⼈・さまざまな⾊覚の⼈
    • ⽩⿊印刷した場合・屋外で閲覧した場合・プロジェクター

    View Slide

  25. • ⾊以外の別の視覚情報を組み合わせる
    ⾊のみに依存しない表現

    View Slide

  26. • 2つの⾊の違いを「コントラスト⽐」で表すことができる
    • ⽂字⾊と背景⾊のコントラスト⽐には 4.5:1 以上を推奨
    ⾊のコントラスト
    21 : 1 4.5 : 1 1 : 1
    " " " " " " " " " "

    View Slide

  27. • Spectrum
    さまざまな⾊覚を再現できるChrome拡張
    • Color Contrast Analyzer
    2つの⾊のコントラスト⽐を測定できる
    ⾊のチェックツール

    View Slide

  28. やるべきこと
    デザイン • ⽩⿊や⾊覚再現フィルターで表⽰して確認する
    • ⽂字⾊と背景⾊のコントラスト⽐を4.5:1以上に

    View Slide

  29. 役⽴つ⼈・役⽴つ場⾯
    ⽂字を拡⼤しても情報が正しく伝わるようにする
    拡⼤が必要な⼈・閲覧環境でも情報が正しく伝わる
    • ロービジョンの⼈・視⼒が低い⼈
    • スマホなど⼩さい画⾯で閲覧しているとき

    View Slide

  30. • 拡⼤する⽅法は主に3種類
    • OSの拡⼤機能を使う(拡⼤鏡など)
    • ブラウザのズーム機能で拡⼤する
    • ブラウザのフォントサイズを変更する
    • 200%まで拡⼤でき、情報が⽋落しないようにする
    ⽂字を拡⼤する⽅法

    View Slide

  31. • 位置が固定された要素に要注意(ヘッダー・フッターなど)
    • フォントサイズ・フォントサイズに連動して変化する箇所には
    相対値(%, em, rem)を使う
    拡⼤に強くするには︖
    header
    footer
    header
    footer

    View Slide

  32. やるべきこと
    デザイン • 200%拡⼤したときの動作を決めておく
    実装 • フォントサイズに連動して変化する箇所には
    相対値(%, em, rem)を使う

    View Slide

  33. 役⽴つ⼈・役⽴つ場⾯
    キーボードで操作できるようにする
    マウスが使えない⼈・閲覧環境でもキーボードで操作できる
    • 視覚障害の⼈・肢体不⾃由の⼈・怪我をしている⼈
    • 作業を効率的に進めたいとき

    View Slide

  34. • HTML標準のインタラクティブ要素はキーボードで操作できる
    • button, select, input要素など
    • 以下は⾃分でキーボード操作を実装する必要がある
    • 独⾃のUIパーツを作る場合
    • マウスに依存する操作を提供する場合
    • キーボードフォーカスしたときのスタイルをつける
    キーボード操作についての注意

    View Slide

  35. やるべきこと
    デザイン • キーボード操作の⽅法を考えておく
    • キーボードフォーカススタイルを決める
    実装 • キーボード操作できるHTML要素を選ぶ
    • キーボードフォーカススタイルをもれなくつける

    View Slide

  36. 役⽴つ⼈・役⽴つ場⾯
    フォームフィールドにラベルを関連づける
    スクリーンリーダーには「フィールド」にジャンプする機能がある
    フィールドに⼊⼒すべき値が理解できる(デモ)
    • 視覚障害の⼈

    View Slide

  37. • label要素で関連づける
    • 可視のラベルがない場合はaria-label属性かtitle属性をつける
    ラベルを関連づける⽅法
    ユーザー名


    View Slide

  38. やるべきこと
    デザイン • フィールドの近くに可視のラベルをつける
    実装 • フィールドとラベルをlabel要素で関連づける
    • 可視ラベルがないときはaria-label属性をつける

    View Slide

  39. 1. ⽂書構造をマークアップする
    2. リンクテキストはリンク先がわかるようにする
    3. 画像に代替テキストを提供する
    4. 情報を伝える⾊の使い⽅に注意する
    5. ⽂字を拡⼤しても情報が正しく伝わるようにする
    6. キーボードで操作できるようにする
    7. フォームフィールドにラベルを関連づける
    アクセシビリティ確保の基本

    View Slide

  40. • アクセシビリティとは︖
    • マシンリーダブル・ヒューマンリーダブルを理解する
    • アクセシビリティ確保の基本を理解する
    この講義で学んだこと
    復習

    View Slide

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

    View Slide

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

    View Slide

  43. • Web Content Accessibility Guideline 2.1
    https://waic.jp/docs/WCAG21/
    • W3Cが勧告しているアクセシビリティ基準リスト
    • 各国のアクセシビリティに関する法律は、この基準を採⽤
    ガイドラインを読んでみよう

    View Slide

  44. 多様なユーザの使い⽅を知ろう

    View Slide