サイボウズ開発運⽤研修 アクセシビリティ⼩林⼤輔デザイン＆リサーチアクセシビリティエキスパート
View Slide
• アクセシビリティとは︖• マシンリーダブル・ヒューマンリーダブルを理解する• アクセシビリティ確保の基本を理解するこの講義で学ぶこと復習
アクセシビリティとは︖復習
アクセシビリティ＝障害者・⾼齢者のための特別対応︖
アクセシビリティとは障害者・⾼齢者を含めて「すべての⼈」が製品やサービスを⽀障なく利⽤できること
⾒るロービジョン 全盲話す⾔語障害聞くろう難聴読むディスレクシア集中するうつADHD動く肢体不⾃由⾻折・怪我
⾒るロービジョン 全盲話す⾔語障害聞くろう難聴読むディスレクシア集中するうつADHD動く肢体不⾃由⾻折・怪我⼩さい画⾯電⾞内マスク海外出張在宅ワーク⽇光下急な予定育児中満員電⾞運転中英⽂ 騒⾳静⾳環境
ユーザ サイボウズ製品 チーム
サイボウズにとって、アクセシビリティとは「ユーザがチームにアクセスできる能⼒」
アクセシビリティを確保することは「チームに参加したい」というユーザのねがいを尊重すること
アクセシビリティに取り組むには︖
コンテンツがユーザに届くまで制作者 ユーザハードウェア（PC・スマホ…)ソフトウェア(ブラウザ・⽀援技術)⼊出⼒機器感覚情報（視覚・聴覚・触覚…）Webコンテンツ(HTML・CSS・JS…)
アクセシビリティを⾼める2つの要素マシンリーダブルヒューマンリーダブル制作者 ユーザ
アクセシビリティ確保の基本
1. ⾒出し・ランドマークなどの⽂書構造をマークアップする2. リンクテキストはリンク先がわかるようにする3. 画像に代替テキストを提供する4. 情報を伝える⾊の使い⽅に注意する5. ⽂字を拡⼤しても情報が正しく伝わるようにする6. キーボードで操作できるようにする7. フォームフィールドにラベルを関連づけるアクセシビリティ確保の基本
役⽴つ⼈・役⽴つ場⾯⾒出し・ランドマークなどの⽂書構造をマークアップするスクリーンリーダーは⾒出し・ランドマークなどの⽂書構造を読む構造ごとに「読み⾶ばす」こともできる• 全盲の⼈／ロービジョンの⼈／ディスレクシアの⼈
デザイン実装やるべきこと• モックの段階で⾒出しにする箇所を決める• モックの段階でランドマークにする箇所を決める• ⾒出しはh1...h6要素でマークアップする• header, footer, nav, aside...を使う
役⽴つ⼈・役⽴つ場⾯リンクテキストはリンク先がわかる⽂⾔にするスクリーンリーダーには「リンク」にジャンプする機能がある同じリンク⽂⾔が続くとリンクが表す内容を理解しづらい（デモ）• 全盲の⼈／ロービジョンの⼈／ディスレクシアの⼈
やるべきことデザイン • 不明瞭なリンクテキストを使わない「ここをクリック」「さらに表⽰」「詳細はこちら」• どうしてもテキストを変えられない場合⾒出しと組み合わせるツールチップで補⾜する
役⽴つ⼈・役⽴つ場⾯画像に代替テキストを提供するスクリーンリーダーは代替テキストを読み上げる画像のダウンロードに失敗すると代替テキストが表⽰される• 視覚障害の⼈• 低速回線の⼈（画像のダウンロードに失敗した場合）
• img要素にalt属性をつける代替テキストの提供⽅法
alt属性はどう読まれる︖https://jsfiddle.net/sukoyakarizumu/qL5sf7r1/show
やるべきことデザイン • 画像が何を表しているのかテキストで説明する• 画像につける代替テキストを決める実装• 意味のあるimg要素には、alt属性をつける• 装飾的なimg要素には、alt=""をつける
役⽴つ⼈・役⽴つ場⾯情報を伝える⾊の使い⽅に注意する⾊のみに依存しない表現にする⾊同⼠のコントラストを⾼くする• ロービジョンの⼈・さまざまな⾊覚の⼈• ⽩⿊印刷した場合・屋外で閲覧した場合・プロジェクター
• ⾊以外の別の視覚情報を組み合わせる⾊のみに依存しない表現
• 2つの⾊の違いを「コントラスト⽐」で表すことができる• ⽂字⾊と背景⾊のコントラスト⽐には 4.5:1 以上を推奨⾊のコントラスト21 : 1 4.5 : 1 1 : 1" " " " " " " " " "
• Spectrumさまざまな⾊覚を再現できるChrome拡張• Color Contrast Analyzer2つの⾊のコントラスト⽐を測定できる⾊のチェックツール
やるべきことデザイン • ⽩⿊や⾊覚再現フィルターで表⽰して確認する• ⽂字⾊と背景⾊のコントラスト⽐を4.5:1以上に
役⽴つ⼈・役⽴つ場⾯⽂字を拡⼤しても情報が正しく伝わるようにする拡⼤が必要な⼈・閲覧環境でも情報が正しく伝わる• ロービジョンの⼈・視⼒が低い⼈• スマホなど⼩さい画⾯で閲覧しているとき
• 拡⼤する⽅法は主に３種類• OSの拡⼤機能を使う（拡⼤鏡など）• ブラウザのズーム機能で拡⼤する• ブラウザのフォントサイズを変更する• 200%まで拡⼤でき、情報が⽋落しないようにする⽂字を拡⼤する⽅法
• 位置が固定された要素に要注意（ヘッダー・フッターなど）• フォントサイズ・フォントサイズに連動して変化する箇所には相対値（％, em, rem）を使う拡⼤に強くするには︖headerfooterheaderfooter
やるべきことデザイン • 200%拡⼤したときの動作を決めておく実装 • フォントサイズに連動して変化する箇所には相対値（％, em, rem）を使う
役⽴つ⼈・役⽴つ場⾯キーボードで操作できるようにするマウスが使えない⼈・閲覧環境でもキーボードで操作できる• 視覚障害の⼈・肢体不⾃由の⼈・怪我をしている⼈• 作業を効率的に進めたいとき
• HTML標準のインタラクティブ要素はキーボードで操作できる• button, select, input要素など• 以下は⾃分でキーボード操作を実装する必要がある• 独⾃のUIパーツを作る場合• マウスに依存する操作を提供する場合• キーボードフォーカスしたときのスタイルをつけるキーボード操作についての注意
やるべきことデザイン • キーボード操作の⽅法を考えておく• キーボードフォーカススタイルを決める実装 • キーボード操作できるHTML要素を選ぶ• キーボードフォーカススタイルをもれなくつける
役⽴つ⼈・役⽴つ場⾯フォームフィールドにラベルを関連づけるスクリーンリーダーには「フィールド」にジャンプする機能があるフィールドに⼊⼒すべき値が理解できる（デモ）• 視覚障害の⼈
• label要素で関連づける• 可視のラベルがない場合はaria-label属性かtitle属性をつけるラベルを関連づける⽅法ユーザー名
やるべきことデザイン • フィールドの近くに可視のラベルをつける実装 • フィールドとラベルをlabel要素で関連づける• 可視ラベルがないときはaria-label属性をつける
1. ⽂書構造をマークアップする2. リンクテキストはリンク先がわかるようにする3. 画像に代替テキストを提供する4. 情報を伝える⾊の使い⽅に注意する5. ⽂字を拡⼤しても情報が正しく伝わるようにする6. キーボードで操作できるようにする7. フォームフィールドにラベルを関連づけるアクセシビリティ確保の基本
• アクセシビリティとは︖• マシンリーダブル・ヒューマンリーダブルを理解する• アクセシビリティ確保の基本を理解するこの講義で学んだこと復習
アクセシビリティにより深く取り組むには︖
• デザイニングWebアクセシビリティアクセシビリティ教科書の決定版• コーディングWebアクセシビリティよりマシンリーダブルなHTMLを書くために• インクルーシブHTML+CSS&JavaScript優れた書籍を読もう
• Web Content Accessibility Guideline 2.1https://waic.jp/docs/WCAG21/• W3Cが勧告しているアクセシビリティ基準リスト• 各国のアクセシビリティに関する法律は、この基準を採⽤ガイドラインを読んでみよう
多様なユーザの使い⽅を知ろう
cybozuinsideout
hiashisan
sugamasao
ewolff
smt7174
lemon
non97
salaboy
soracom
linedevth
lmi
colopl
kazumax55
skipperchong
addyosmani
soudai
marcelosomers
holman
keathley
afnizarnur
jeffersonlam
revolveconf
danielanewman
destraynor
rmw