ウェブ制作会社のディレクターさんを対象にした、アクセシビリティ勉強会です。(全12回コースの第11回) 前半で、2018年6月に勧告された WCAG 2.1 について学び、後半で「インクルーシブなペルソナ拡張」シートを用いた UI 評価ワークショップを行なっています。 インクルーシブなペルソナ拡張 : https://github.com/caztcha/Inclusive-Persona-Extension

1. ウェブディレクターのための
Web A11Y 勉強会
Season 2
#11 (2019-02-21)

2. 自己紹介
@caztcha
ウェブユーザビリティ / アクセシビリティ / 情報アーキテクチャ (IA)
HCD-Net 認定 人間中心設計専門家
ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳ワーキンググループ
https://website-usability.info

3. 今日のメニュー
• WCAG 2.1 とは？ (おさらい)
• WCAG 2.1 で追加された達成基準を読む
(Level A & AA)
• 2.5.2 Pointer Cancellation (A) [モバイル]
• 2.5.3 Label in Name (A) [モバイル]
• UI ケーススタディ

4. WCAG 2.1 とは？ (おさらい)

5. WCAG 2.1 とは？
• WCAG (Web Content Accessibility Guidelines) の新
バージョン。2018年6月5日に勧告。
https://www.w3.org/TR/WCAG21/
• 旧バージョン (2.0) で十分にカバーできていなかった領域
(ロービジョン 、モバイル 、認知/学習障害 への配慮) が強
化されている。
• 17の新しい達成基準が追加。従来の達成基準はそのまま
(番号の変更はなし)。

6. WCAG 2.1 で追加された
達成基準を読む (Level A & AA)

7. 達成基準 2.5.2
Pointer Cancellation /
ポインタのキャンセル (レベル A) [モバイル]
シングルポインタを使って操作できる機能は、以下の要件の少なくとも 1 つを満たす。
• ダウンイベントがない : 機能を実行する目的でポインタのダウンイベントを使用していない。
• 中止または元に戻すことができる : 機能の完了にはアップイベントを使用し、かつ機能の完
了前に中止する、又は機能の完了後に元に戻すためのメカニズムが利用できる。
• アップイベントで戻すことができる : アップイベントによって、先行したダウンイベントの結
果を元に戻すことができる。
• 必要不可欠 : ダウンイベントによって機能を完了させることが必要不可欠である。
達成基準 2.5.2 原文 : https://www.w3.org/TR/WCAG21/#pointer-cancellation

8. たまたま画面の特定部分に触れ
ただけで、down イベントが発生
して (ユーザーの予期しない) 機
能が実行されてしまう…

9. [まとめ] 達成基準 2.5.2 Pointer Cancellation
ユーザーがある行為をしようとして、うっかり間違ったボタンに触れてしまうことがあります。タッ
チジェスチャでスクロール操作をしようとした際、たまたま UI コンポーネントに触れてしまう、と
いうこともあるでしょう。
UI コンポーネントに指が触れたとき (down イベント) に即その機能を実行にするのではなく、指が
画面から離れたとき (up イベント) に機能を実行にするようにしましょう。
どうしても down イベントで機能を実行する必要があるときは、指を画面から離す、指を滑らせて
UI コンポーネント領域外に動かす、といった操作でアンドゥできるような無効化策を提供しましょう。
* 一般的なウェブコンテンツの実装では、リンクやボタン、各種フォーム要素の操作 (チェックボックス/ラジオ
ボタンの選択、テキストフィールドへのフォーカス、など) は down イベントではなく up イベントで実行され
るので、特に気にする必要はありません。

10. 達成基準 2.5.3
Label in Name / 名前 (name) のラベル
(レベル A) [モバイル]
ユーザインタフェース コンポーネントがテキストまたは文字画像を含むラベ
ルを持つ場合、視覚 的に提示されたテキストが名前 (name) に含まれている。
達成基準 2.5.3 原文 : https://www.w3.org/TR/WCAG21/#label-in-name

11. ユーザーの音声コマンド (リンク
やボタンの実行など ) がシステム
側に伝わらず、反応しない…

12. [まとめ] 達成基準 2.5.3 Label in Name
UI コンポーネントで視覚的に表示されているラベルと、ソースコード内のアクセシブルな名前
(accessible name) の記述が一致していないと、音声コマンドで当該 UI コンポーネントを操
作しようとしても、反応しない恐れがあります。
以下のような実装で、視覚的に表示されているラベルを上書きしたり分断したりしないよう、
注意しましょう。
• <button aria-label=“送信”>Go</button>
… 音声コマンドで「Go」と発話してもボタンが実行されない。
• <a href=“…”>Download <span class=“sr-only”>Product A</span> Specifications</a>
… 音声コマンドで「Download Specifications (仕様書をダウンロード)」と発話してもリンクが実行されない。
ご参考 : Accessible Name and Description Computation 1.1 https://www.w3.org/TR/accname-1.1/

13. UI ケーススタディ

14. お配りした「ペルソナ拡張シート」を使って、みんなでウェブページの UI を評価してみましょう。

15. 1. 各自、それぞれ1枚、お好きな「ペルソナシート」を選びます。
2. 選んだシートの観点に立って、対象ページを使ってみましょう。
3. ひとことずつ、「気づき」を発表してください。
• 批判 (●●ができていないからアクセシビリティ的に不備) ではなく。
• こうすれば、こういう利用状況を持つユーザーの体験が向上するのでは？
という姿勢で。
• 具体的な改善方法がわからなくても「なんとなくここが気になる」でも
OK です。

16. ツール紹介：WAVE
アクセシビリティ検証ツールです。見出しレベルや画像の代替テキストなど、目に見えない
要素 (視覚障害者にとって大切な要素) も確認できます。https://wave.webaim.org/

17. ツール紹介：NoCoffee Vision Simulator
ロービジョン (弱視) や色覚特性に伴う「見えにくさ」を様々なパラメーターでシミュレー
ションできる Chrome 拡張機能です。 https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl

18. 文字色と背景色のコントラスト比を検証できます。https://www.paciellogroup.com/resources/contrastanalyser/
ツール紹介：Colour Contrast Analyser

19. 敢えてマウスを使わず、キーボードだけで操作してみると、視覚障害や運動障害を持った
ユーザーのウェブ利用時の障壁を感じることができます。
ツール紹介：お使いの PC のキーボード

20. 次回予告

21. • WCAG 2.1 で追加された達成基準を読む
(Level A & AA)
• 2.5.4 Motion Actuation (A) [モバイル]
• 4.1.3 Status Messages (AA) [認知/学習]
• この勉強会のまとめ
いよいよ最終回！

22. To be continued…