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

by Cybozu

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

• img要素にalt属性をつける代替テキストの提供⽅法サイボウズ株式会社

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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