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

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. • 拡⼤する⽅法は主に３種類 • 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. 多様なユーザの使い⽅を知ろう