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

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

A97eee01397705443a72a48ce29d3e19?s=47 Cybozu
May 17, 2021

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

A97eee01397705443a72a48ce29d3e19?s=128

Cybozu

May 17, 2021
Tweet

Transcript

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

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

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

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

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

  6. ⾒る ロービジョン 全盲 話す ⾔語障害 聞く ろう 難聴 読む ディスレクシア

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

    集中する うつ ADHD 動く 肢体不⾃由 ⾻折・怪我 ⼩さい画⾯ 電⾞内 マスク 海外出張 在宅ワーク ⽇光下 急な予定 育児中 満員電⾞ 運転中 英⽂ 騒⾳ 静⾳環境
  8. ユーザ サイボウズ製品 チーム

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

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

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

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

    (視覚・聴覚・触覚…) Webコンテンツ (HTML・CSS・JS…)
  13. アクセシビリティを⾼める2つの要素 マシン リーダブル ヒューマン リーダブル 制作者 ユーザ

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

  15. 1. ⾒出し・ランドマークなどの⽂書構造をマークアップする 2. リンクテキストはリンク先がわかるようにする 3. 画像に代替テキストを提供する 4. 情報を伝える⾊の使い⽅に注意する 5. ⽂字を拡⼤しても情報が正しく伝わるようにする

    6. キーボードで操作できるようにする 7. フォームフィールドにラベルを関連づける アクセシビリティ確保の基本
  16. 役⽴つ⼈・役⽴つ場⾯ ⾒出し・ランドマークなどの⽂書構造をマークアップする スクリーンリーダーは⾒出し・ランドマークなどの⽂書構造を読む 構造ごとに「読み⾶ばす」こともできる • 全盲の⼈/ロービジョンの⼈/ディスレクシアの⼈

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

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

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

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

  21. • img要素にalt属性をつける 代替テキストの提供⽅法 <img src="cybozu.png" alt="サイボウズ株式会社">

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

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

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

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

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

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

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

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

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

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

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

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

  34. • HTML標準のインタラクティブ要素はキーボードで操作できる • button, select, input要素など • 以下は⾃分でキーボード操作を実装する必要がある • 独⾃のUIパーツを作る場合

    • マウスに依存する操作を提供する場合 • キーボードフォーカスしたときのスタイルをつける キーボード操作についての注意
  35. やるべきこと デザイン • キーボード操作の⽅法を考えておく • キーボードフォーカススタイルを決める 実装 • キーボード操作できるHTML要素を選ぶ •

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

  37. • label要素で関連づける • 可視のラベルがない場合はaria-label属性かtitle属性をつける ラベルを関連づける⽅法 <label for="username">ユーザー名</label> <input type="text" id="username">

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

  39. 1. ⽂書構造をマークアップする 2. リンクテキストはリンク先がわかるようにする 3. 画像に代替テキストを提供する 4. 情報を伝える⾊の使い⽅に注意する 5. ⽂字を拡⼤しても情報が正しく伝わるようにする

    6. キーボードで操作できるようにする 7. フォームフィールドにラベルを関連づける アクセシビリティ確保の基本
  40. • アクセシビリティとは︖ • マシンリーダブル・ヒューマンリーダブルを理解する • アクセシビリティ確保の基本を理解する この講義で学んだこと 復習

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

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

  43. • Web Content Accessibility Guideline 2.1 https://waic.jp/docs/WCAG21/ • W3Cが勧告しているアクセシビリティ基準リスト •

    各国のアクセシビリティに関する法律は、この基準を採⽤ ガイドラインを読んでみよう
  44. 多様なユーザの使い⽅を知ろう