ウェブディレクターのための Web A11Y 勉強会 (Season 2) #04
0 likes247 views
ウェブ制作会社のディレクターさんを対象にした、アクセシビリティ勉強会です。(全12回コースの第4回) 前半で WCAG 2.0 達成基準 (レベルAA) を学び、後半で「インクルーシブなペルソナ拡張」シートを用いた UI 評価ワークショップを行なっています。 インクルーシブなペルソナ拡張 : https://github.com/caztcha/Inclusive-Persona-Extension
![[用語] 達成基準 2.4.6 見出し及びラベル
ラベル
ウェブコンテンツ内の UI コンポーネントを識別するためにユーザーに提示されている、
自然言語による情報。](https://image.slidesharecdn.com/weba11yseminars204-180721212914/85/Web-A11Y-Season-2-04-9-320.jpg)
![[まとめ] 達成基準 2.4.6 見出し及びラベル
コンテンツ本文において、内容がわかる見出しを付けましょう。
UI コンポーネントにおいて、内容や目的がわかるラベルを付けましょう。
ユーザーの認知負荷、記憶負荷を下げることが期待できます。
特に、認知/学習障害を持つユーザー、視野の制約で一度に取得できる情報量が限られるロー
ビジョンのユーザー、操作ミスを起こすと「行ったり来たり」の操作が面倒な運動障害を
持つユーザー、にとって大きなメリットがあります。](https://image.slidesharecdn.com/weba11yseminars204-180721212914/85/Web-A11Y-Season-2-04-10-320.jpg)
![[用語 ] 達成基準 2.4.7 フォーカスの可視化
(特にありません )](https://image.slidesharecdn.com/weba11yseminars204-180721212914/85/Web-A11Y-Season-2-04-12-320.jpg)
![[まとめ] 達成基準 2.4.7 フォーカスの可視化
UI コンポーネントがキーボード操作によるフォーカスを受けとったときは、CSS によ
って表示を視覚的に変更させましょう。
デザイン上の制約から上記が難しい場合は、少なくとも、ユーザーエージェント (ブラ
ウザなど) が標準で提供する視覚的な効果 (フォーカスリング) を無効にしないように
しましょう。
キーボード操作に依存するユーザーは、画面上を直接ポインティングできないので、
フォーカス位置が視覚的にわからないと、どこが操作対象なのか見失ってしまいます。](https://image.slidesharecdn.com/weba11yseminars204-180721212914/85/Web-A11Y-Season-2-04-13-320.jpg)
ウェブディレクターのための Web A11Y 勉強会 (Season 2) #04
- 1. ウェブディレクターのための Web A11Y 勉強会 Season 2 #04 (2018-07-19)
- 2. 自己紹介 @caztcha ウェブユーザビリティ / アクセシビリティ / 情報アーキテクチャ (IA) HCD-Net 認定 人間中心設計専門家 ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳ワーキンググループ https://website-usability.info
- 3. 今日のメニュー • WCAG 2.0 (Level AA) を読もう • 2.4.6 見出し及びラベル • 2.4.7 フォーカスの可視化 • UI ケーススタディ
- 4. WCAG 2.0 (Level AA) を読もう
- 5. WCAG (Web Content Accessibility Guidelines) の基本構成 原則 (4) ガイドライン (12) 達成基準 (61) 1. 知覚可能 (Perceivable) 2. 操作可能 (Operable) 3. 理解可能 (Understandable) 4. 堅牢 (Robust) 3つのレベルに分かれている • A (シングルエー) • AA (ダブルエー) • AAA (トリプルエー) おさらい
- 6. 原則 2. 操作可能 (Operable) ユーザインタフェース コンポーネント及びナビゲーションは操作 可能でなければならない。 おさらい
- 8. 達成基準 2.4.6 見出し及びラベル 見出し及びラベルは、主題又は目的を説明している。(レベル AA) 達成基準 2.4.6 を理解する | WCAG 2.0解説書 https://waic.jp/docs/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html
- 9. [用語] 達成基準 2.4.6 見出し及びラベル ラベル ウェブコンテンツ内の UI コンポーネントを識別するためにユーザーに提示されている、 自然言語による情報。
- 10. [まとめ] 達成基準 2.4.6 見出し及びラベル コンテンツ本文において、内容がわかる見出しを付けましょう。 UI コンポーネントにおいて、内容や目的がわかるラベルを付けましょう。 ユーザーの認知負荷、記憶負荷を下げることが期待できます。 特に、認知/学習障害を持つユーザー、視野の制約で一度に取得できる情報量が限られるロー ビジョンのユーザー、操作ミスを起こすと「行ったり来たり」の操作が面倒な運動障害を 持つユーザー、にとって大きなメリットがあります。
- 11. 達成基準 2.4.7 フォーカスの可視化 キーボード操作が可能なあらゆるユーザインタフェースには、フォーカスイ ンジケータが見える操作モードがある。(レベル AA) 達成基準 2.4.7 を理解する | WCAG 2.0解説書 https://waic.jp/docs/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html
- 12. [用語 ] 達成基準 2.4.7 フォーカスの可視化 (特にありません )
- 13. [まとめ] 達成基準 2.4.7 フォーカスの可視化 UI コンポーネントがキーボード操作によるフォーカスを受けとったときは、CSS によ って表示を視覚的に変更させましょう。 デザイン上の制約から上記が難しい場合は、少なくとも、ユーザーエージェント (ブラ ウザなど) が標準で提供する視覚的な効果 (フォーカスリング) を無効にしないように しましょう。 キーボード操作に依存するユーザーは、画面上を直接ポインティングできないので、 フォーカス位置が視覚的にわからないと、どこが操作対象なのか見失ってしまいます。
- 14. UI ケーススタディ
- 16. 1. 各自、それぞれ1枚、お好きな「ペルソナシート」を選びます。 2. 選んだシートの観点に立って、対象ページを使ってみましょう。 3. ひとことずつ、「気づき」を発表してください。 • 批判 (●●ができていないからアクセシビリティ的に不備) ではなく。 • こうすれば、こういう利用状況を持つユーザーの体験が向上するのでは？と いう姿勢で。 • 具体的な改善方法がわからなくても「なんとなくここが気になる」でも OK です。
- 18. ツール紹介：NoCoffee Vision Simulator ロービジョン (弱視) や色覚特性に伴う「見えにくさ」を様々なパラメーターでシミュレー ションできる Chrome 拡張機能です。 https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl
- 21. 次回予告
- 22. • WCAG 2.0 (Level AA) を読もう • 3.1.2 一部分の言語 • 3.2.3 一貫したナビゲーション • 3.2.4 一貫した識別性 • UI ケーススタディ
- 23. To be continued…