アクセシビリティ

Transcript

1. サイボウズ 開発運⽤研修 アクセシビリティ 杉崎 信清 開発本部 アクセシビリティエンジニア
2. 杉崎 信清 視覚障害（全盲） スクリーンリーダー・キーボードネイティブ • 2020年 新卒⼊社→アクセシビリティチーム • アクセシビリティの啓発 • 開発チームの⽀援 • 2022年 kintone Design Team（兼務） デザインテクノロジスト • デザインシステムの開発、保守、普及 趣味︓ワイン、読書、⿃と遊ぶこと ⾃⼰紹介
3. この講義で学ぶこと 復習 • アクセシビリティとは︖ • マシンリーダブル・ヒューマンリーダブルを理解する • アクセシビリティ確保の基本を理解する（7項⽬） • アクセシビリティを検証する⽅法を知る
4. 講義のコンセプト サイボウズに新しく⼊社した社員の⽅に 誰に 何と⾔ってほしい 「アクセシビリティを⾼める考え⽅がわかった。 意識しながら取り組んでいこう︕」と⾔ってほしい
5. アクセシビリティとは︖ 復習
6. アクセシビリティの定義 「すべての⼈」が⽀障なく 製品・サービス・情報を利⽤でき、⽬的を達成できること
7. すべての⼈＝多様な環境・ツール・特性 環境 ▌ ࡏ୐ۈ຿ ▌ ւ֎ۈ຿ ▌ ෭ۀ ▌ ࣌୹ۈ຿ ▌ ిंͷத ▌ ޻৔ͷத ▌ ਤॻؗ ▌ ΧϑΣ ▌ ԰֎ ▌ ໷ؒ ツール ▌ PC ▌ スマートフォン ▌ タブレット ▌ モニター ▌ マウス ▌ キーボード ▌ トラックパッド ▌ ⾳声⼊⼒ ▌ スクリーンリーダー ▌ 拡⼤鏡 ▌ リアルタイム字幕 個⼈の特性 ▌ 年齢 ▌ 性別 ▌ 国籍 ▌ ⼈種 ▌ 能⼒ ▌ スキル ▌ ⾊覚多様性 ▌ 視覚障害 ▌ 聴覚障害 ▌ 肢体不⾃由 ▌ 精神障害 ▌ 発達障害
8. ユーザ サイボウズ製品 チーム
9. サイボウズにとって、アクセシビリティとは 「ユーザがチームにアクセスできる能⼒」
10. アクセシビリティを確保することは 「チームに参加したい」という ユーザのねがいを尊重すること
11. アクセシブルなウェブコンテンツを届けるには
12. コンテンツがユーザに届くまで 制作者 ユーザ ハードウェア （PC・スマホ…) ソフトウェア (ブラウザ・⽀援技術) ⼊出⼒ 機器 感覚情報 （視覚・聴覚・触覚…） Webコンテンツ (HTML・CSS・JS…)
13. アクセシビリティを⾼める2つの要素 制作者 マシン リーダブル ヒューマン リーダブル ユーザ
14. ヒューマンリーダブルにする考え⽅ 多様な感覚特性を想定する ⾊を⾒分けにくい まぶしい、暗い ⾳が出せない ⾳が聞こえない 細かい作業が苦⼿ 記憶が困難 多様な操作⽅法を想定する マウス操作 タッチ操作 キーボード操作 拡⼤・縮⼩ 印刷
15. ⾒た⽬と構造を分離して考える 打倒なHTML要素で構造をマークアップする CSSで⾒た⽬を表現する マシンリーダブルにする考え⽅
16. アクセシビリティ確保の基本
17. アクセシビリティ確保の基本(7項⽬) 1. 情報を伝える⾊の使い⽅に注意する 2. ⽂字を拡⼤しても情報が正しく伝わるようにする 3. キーボードで操作できるようにする 4. ⾒出し・ランドマークなどの⽂書構造をマークアップする 5. 画像に代替テキストを付ける 6. リンクテキストはリンク先がわかる⽂⾔にする 7. フォームフィールドにラベルを関連づける
18. 役⽴つ⼈・役⽴つ場⾯ 情報を伝える⾊の使い⽅に注意する ⾊のみに依存しない表現にする ⾊同⼠のコントラストを⾼くする • ロービジョンの⼈・さまざまな⾊覚の⼈ • ⽩⿊印刷した場合・屋外で閲覧した場合・プロジェクター • 初めて閲覧するサイト、⽂化圏の異なるサイトを⾒る場合
19. ⾊のみに依存しない表現 • ⾊以外の別の視覚情報を組み合わせる(テキスト、アイコン、記号など)
20. ⾊のコントラスト • 2つの⾊の違いを「コントラスト⽐」で表すことができる • ⽂字⾊と背景⾊のコントラスト⽐には 4.5:1 以上を推奨 21 : 1 4.5 : 1 1 : 1 A A A A A A A A A A
21. ⾊のチェックツール • Spectrum さまざまな⾊覚を再現できるChrome拡張 • Color Contrast Analyzer 2つの⾊のコントラスト⽐を測定できる
22. やるべきこと (情報を伝える⾊の使い⽅に注意する) デザイン • ⽩⿊や⾊覚再現フィルターで表⽰して確認する • ⽂字⾊と背景⾊のコントラスト⽐を4.5:1以上に
23. 役⽴つ⼈・役⽴つ場⾯ ⽂字を拡⼤しても情報が正しく伝わるようにする 拡⼤が必要な⼈・閲覧環境でも情報が正しく伝わる • ロービジョンの⼈・視⼒が低い⼈ • スマホなど⼩さい画⾯で閲覧しているとき
24. ⽂字を拡⼤する⽅法 • 拡⼤する⽅法は主に３種類 • OSの拡⼤機能を使う（拡⼤鏡など） • ブラウザのズーム機能で拡⼤する • ブラウザのフォントサイズを変更する • 200%まで拡⼤でき、情報が⽋落しないようにする
25. 拡⼤に強くするには︖ • 位置が固定された要素に要注意（ヘッダー・フッターなど） • フォントサイズ・フォントサイズに連動して変化する箇所には 相対値（％, em, rem）を使う header footer header footer
26. やるべきこと (⽂字を拡⼤しても情報が正しく伝わるようにする) デザイン • 200%拡⼤したときの動作を決めておく 実装 • フォントサイズに連動して変化する箇所には 相対値（％, em, rem）を使う
27. 役⽴つ⼈・役⽴つ場⾯ キーボードで操作できるようにする マウスが使えない⼈・閲覧環境でもキーボードで操作できる • 怪我をしている⼈・視覚障害の⼈・肢体不⾃由の⼈ • 作業を効率的に進めたいとき、急いでいるとき
28. キーボード操作についての注意 • HTML標準のインタラクティブ要素はキーボードで操作できる • button, select, input要素など • 以下は⾃分でキーボード操作を実装する必要がある • 独⾃のUIパーツを作る場合 • マウスに依存する操作を提供する場合（ホバー、D&Dなど） • キーボードフォーカスしたときのスタイルをつける
29. やるべきこと (キーボードで操作できるようにする) デザイン • キーボード操作の⽅法を考えておく • キーボードフォーカススタイルを決める 実装 • キーボード操作できるHTML要素を選ぶ • キーボードフォーカススタイルをもれなくつける
30. 役⽴つ⼈・役⽴つ場⾯ • 全盲の⼈／ロービジョンの⼈／ディスレクシアの⼈ ⾒出し・ランドマークなどの⽂書構造をマークアップする ウェブページがマシンリーダブルになるよう構造化する スクリーンリーダーは⾒出し・ランドマークなどの⽂書構造を読む 構造ごとに「読み⾶ばす」こともできる
31. ユーザごとの⽂章構造の把握⽅法 • 眼で確認するユーザー • ⼤きな⽂字や領域で「⾒出し」「ランドマーク」を把握する • 必要な箇所に視線を移動する • スクリーンリーダーを使うユーザー • マークアップで「⾒出し」「ランドマーク」を把握する • 必要な箇所に「ジャンプ」する
32. ⾒出し・ランドマークはどう読まれる︖
33. デザイン 実装 やるべきこと（⾒出し・ランドマークなどの⽂書構造をマークアップする） デザイン • ⾒出しはh1...h6要素でマークアップする • header, footer, nav, aside...を使う • モックの段階で⾒出しにする箇所を決める • モックの段階でランドマークにする箇所を決める
34. 役⽴つ⼈・役⽴つ場⾯ 画像に代替テキストを提供する 代替テキストとは、画像が伝えたいことを説明するテキスト • スクリーンリーダーは代替テキストを読み上げる • 画像のダウンロードに失敗すると代替テキストが表⽰される • 画像検索でヒットするようになる • 視覚障害の⼈ • 低速回線（画像のダウンロードに失敗した場合）、SEO
35. • img要素にalt属性をつける • 装飾的な画像、画像の横にテキストがある場合にはalt=""をつける • alt属性そのものを省略しない 代替テキストの提供⽅法 <img src="cybozu.png" alt="サイボウズ株式会社"> <img src=“模様.png" alt="">
36. やるべきこと (画像に代替テキストを提供する) デザイン • 画像の近くに説明のテキストをつける • 画像の代替テキストを決める 実装 • 意味のあるimg要素には、alt属性をつける • 装飾的なimg要素には、alt=""をつける
37. 役⽴つ⼈・役⽴つ場⾯ リンクテキストはリンク先がわかる⽂⾔にする • 急いでいる⼈・全盲の⼈・ロービジョンの⼈・ディスレクシアの⼈ • リンクがおおいウェブサイト、初めて訪問したとき、SEO リンク先が理解できる、説明的なリンクテキストにする 「こちら」「ここをクリック」などのあいまいな⽂⾔を使わない 流し読みしているユーザー、スクリーンリーダーのユーザーが リンクを押すべきか瞬時に判断できる
38. あいまいなリンクテキスト、説明的なリンクテキスト
39. やるべきこと (リンクテキストはリンク先がわかる⽂⾔にする) デザイン • 不明瞭なリンクテキストを使わない 「ここをクリック」「さらに表⽰」「詳細はこちら」
40. 役⽴つ⼈・役⽴つ場⾯ フォームフィールドにラベルを関連づける クリック・タップ領域が広がる ⾳声⼊⼒でフォームをアクティブにできる スクリーンリーダーは、フォームにフォーカスしたときに 対応するラベルを読み上げる • 視覚障害の⼈、肢体不⾃由の⼈ • タッチ操作、⼩さいデバイスを使うとき、⾳声⼊⼒、⼤量のフォーム を⼊⼒するとき
41. ラベルを関連づける⽅法 label要素で関連づける <label for="username">ユーザー名</label> <input type="text" id="username">
42. やるべきこと (フォームフィールドにラベルを関連づける) デザイン • フィールドの近くに可視のラベルをつける 実装 • フィールドとラベルをlabel要素で関連づける
43. （発展）マシンリーダブルにするためのHTMLの仕様
44. ⾚字でエラー…error要素がない タブを作りたい…tab要素がない div要素とCSSで⾒た⽬を整えることはできるけど… 標準のHTML要素で表現できないとき
45. HTMLのセマンティクスを補う属性群 role属性と、aria属性がある lrole属性︓役割を決める l ボタン、タブ、ツリー、メニュー laria属性︓ふるまいを決める l 選択状態、チェック状態、エラーかどうか WAI-ARIAでセマンティクスを補う
46. マシンリーダブルなエラー 構造︓エラー、⾒た⽬︓⾚ <label for=“name” class=“error”>名前 （必須）</label> <input type=“text” aria-invalid=“true” required id=“name”> .error { color: red; }
47. エラーをマシンリーダブルにすると スクリーンリーダーは、エラーのフィールドに差し掛かると、エ ラーであることを読み上げる
48. マシンリーダブルなタブ 構造︓タブ・選択状態、⾒た⽬︓選択を表すデザイン上の変化 <div role=“tablist”> <div role=“tab” aria-selected=“true”>タブ1</div> <div role=“tab” aria-selected=“false”>タブ2</div> <div role=“tab” aria-selected=“false”>タブ3</div> </div> <div role=“tabpanel”>…</div> [role=“tablist”] { display: flex; }
49. タブをマシンリーダブルにすると スクリーンリーダーはタブであることを読み上げる 選択状態を読み上げる
50. アクセシビリティを検証する
51. eslintのアクセシビリティルールセットを使う eslint-plugin-jsx-a11y https://www.npmjs.com/package/eslint-plugin-jsx-a11y eslint-plugin-vuejs-accessibility https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility コードレベルの検証
52. ⾃動チェックツールで検証 axe DevTools
53. ページの状態が変わるごとにチェックする ポップアップが開く、トグルボタンを押すなど 機械的に検出できる問題は全体の3割程度でしかない ⾃動チェックにpassしたからアクセシビリティOKではない ⾃動チェックツールの注意事項
54. アクセシビリティツリーで検証 HTML CSS DOMツリー CSSOMツリー アクセシビリティ ツリー ⽀援技術 （スクリーンリーダー等）
55. • Name︓識別する呼び名 ボタンテキスト、フォームのラベル、など • Role︓どのような役割か ボタン、チェックボックス、コンボボックスなど • State︓どのようなふるまいか 選択状態、チェック状態など アクセシビリティツリーの⾒かた インタラクティブ要素にName、Role、Stateが設定されているか確認
56. ボタンのアクセシビリティツリー HTML アクセシビリティ ツリー
57. タブのアクセシビリティツリー HTML アクセシビリティ ツリー
58. DevTools→Elementsパネル→Accessibilityペイン →Enable full-page accessibility treeにチェック （参考）DevTools の新機能 (Chrome 98) アクセシビリティツリーの表⽰⽅法(Chrome) チェック ツリーを表⽰