ウェブ制作会社のディレクターさんを対象にした、アクセシビリティ勉強会です。(全12回コースの第8回と第9回の合併回) 2018年6月に勧告された WCAG 2.1 について学びます。 今回は、2回分の合併回のため、「インクルーシブなペルソナ拡張」シートを用いた UI 評価ワークショップはお休みです。

1. ウェブディレクターのための
Web A11Y 勉強会
Season 2
#08 & #09 合併回 (2018-12-20)

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

3. 今日のメニュー
• WCAG 2.1 とは？ (おさらい)
• WCAG 2.1 で追加された達成基準を読む (Level A & AA)
• 1.4.10 Reflow (AA) [ロービジョン]
• 1.4.11 Non-text Contrast (AA) [ロービジョン]
• 1.4.12 Text Spacing (AA) [ロービジョン]
• 1.4.13 Content on Hover or Focus (AA) [ロービジョン]

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. 達成基準 1.4.10
Reflow / リフロー
(レベル AA) [ロービジョン]
以下において、2次元のスクロールを必要とせずに、情報や機能を失うことなく
コンテンツを提示することができる:
• 320 CSS ピクセルに相当する幅の縦スクロールのコンテンツ
• 256 CSS ピクセルに相当する高さの横スクロールのコンテンツ
利用や意味の理解に 2次元のレイアウトが必須である一部のコンテンツを除く。
達成基準 1.4.10 原文 : https://www.w3.org/TR/WCAG21/#reflow

8. 幅 320 ピクセルの、縦スクロールのコンテンツ
縦スクロールに加えて、
横スクロールまで発生させないこと。
320 px
幅 320 CSSピクセルとは、
1,280 CSS ピクセル幅を
400% ズームで見た場合の
表示幅に相当する。

9. 高さ 256 ピクセルの、横スクロールのコンテンツ
(縦書きのコンテンツなど)
横スクロールに加えて、
縦スクロールまで発生させないこと。
256 px
高さ 256 CSS ピクセルとは、
1,024 CSS ピクセル幅を
400% ズームで見た場合の
表示幅に相当する。

10. [まとめ] 達成基準 1.4.10 Reflow
文章を読むのに、行ごとに2次元的なスクロール操作 (縦スクロールコンテンツであれば横ス
クロール、横スクロールコンテンツであれば縦スクロール) をしなければ読めない場合、どこ
を読んでいるのかがわかりにくくなり、理解の妨げになります。
縦スクロールする一般的なウェブページの場合、(幅1,280ピクセルのブラウザ画面サイズでペ
ージを開き) 画面表示を400%まで拡大しても、コンテンツが画面幅の中でリフローする (2次
元的なスクロール操作をせずに読める) ようにしましょう。
* ただし、2 次元のレイアウトを必要とするコンテンツ、たとえば、画像、マップ、図解、ビデオ、ゲー
ム、プレゼンテーション、データテーブル、およびコンテンツを操作している間にツールバーを表示して
おく必要のあるインターフェースなどは、この達成基準の例外とされます。

11. 達成基準 1.4.11
Non-text Contrast /
非テキストのコントラスト
(レベル AA) [ロービジョン]
以下の視覚的提示には、隣接した色との間で少なくとも 3.1 のコントラスト比がある。
• ユーザインタフェース コンポーネント：ユーザインタフェース コンポーネント及び状態
(state) を特定するために要求される視覚的な情報。ただし、アクティブではないユーザ
インタフェース コンポーネントや、そのコンポーネントの見た目がユーザエージェント
によって提示されていてコンテンツ制作者が変更していない場合は除く。
• グラフィカルオブジェクト：コンテンツを理解するのに必要なグラフィック部分。ただ
し、そのグラフィック特有の提示が、情報を伝えるうえで必要不可欠な場合は除く。
達成基準 1.4.11 原文 : https://www.w3.org/TR/WCAG21/#non-text-contrast

12. UI コンポーネントの例
グラフィカルオブジェクトの例

13. [まとめ] 達成基準 1.4.11 Non-text Contrast
テキスト以外の視覚的表現においても、隣接する色との間で十分なコントラスト比 (3:1以上 )
を保つようにしましょう。
• UI コンポーネント … アクティブな (使用可能な) ボタンやアイコンの配色
• グラフィカルオブジェクト … グラフ (円グラフや線グラフ) やフロー図などの配色
* テキストのコントラストについては、WCAG 2.0 達成基準 1.4.3「コントラスト (最低限 )」を参照 :
https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html )

14. 達成基準 1.4.12
Text Spacing / テキストの間隔 (レベル AA) [ロービジョン]
以下のテキストスタイルプロパティをサポートするマークアップ言語を用いて実装されているコンテンツに
おいては、以下をすべて設定し、かつ他のスタイルプロパティを変更しない場合、コンテンツ又は機能が損
なわれない :
• 行の間隔 (行送り) をフォントサイズの少なくとも 1.5 倍に設定する
• 段落に続く間隔をフォントサイズの少なくとも 2 倍に設定する
• 文字の間隔 (字送り) をフォントサイズの少なくとも 0.12 倍に設定する
• 単語の間隔をフォントサイズの少なくとも 0.16 倍に設定する
例外 : これらのテキストスタイルプロパティを1つ以上使用しない自然言語および記述においては、その言
語や記述の組み合わせに存在するプロパティだけを用いて、この達成基準への適合とみなすことができる。
達成基準 1.4.12 原文 : https://www.w3.org/TR/WCAG21/#text-spacing

15. [まとめ ] 達成基準 1.4.12 Text Spacing
ユーザーによっては、行間、段落の間隔、文字間隔などを (独自のスタイルシートで) 調整しないと
読みにくい場合があります。
ユーザーが独自のスタイルを用いて、これらのパラメーターを以下の範囲内でカスタマイズしても、
コンテンツや機能が欠損せずに利用できるよう、配慮しましょう。
• 行の間隔 (行送り) をフォントサイズの少なくとも 1.5 倍に設定する
• 段落に続く間隔をフォントサイズの少なくとも 2 倍に設定する
• 文字の間隔 (字送り) をフォントサイズの少なくとも 0.12 倍に設定する
* なお、「単語の間隔」は、日本語においては例外となります。
The Paciello Group より、簡単なチェックツールがブックマークレットとして提供されています。
https://developer.paciellogroup.com/blog/2018/05/short-note-on-getting-spaced-out-with-sc-1-4-12-text-spacing/

16. 達成基準 1.4.13
Content on Hover or Focus / ホバー又はフォー
カスで表示されるコンテンツ (レベル AA) [ロービジョン]
ポインタホバーやキーボードフォーカスを受け取る/外すことで、追加コンテンツの表示させる/非表示させる場合は、
以下の要件を満たす:
• 非表示にすることができる : ポインタホバーやキーボードフォーカスを動かさずに追加コンテンツを非表示にする
メカニズムが存在する。ただし、追加コンテンツが入力エラーを伝える場合や、他のコンテンツを不明瞭にしたり
置き換えたりしない場合は除く。
• ホバーすることができる : ポインタホバーによって追加コンテンツを表示させることができる場合、その追加コン
テンツを消すことなく、ポインタを追加コンテンツ上で動かすことができる。
• 表示が継続される : ホバーやフォーカスが解除される、利用者が非表示にする、又はその情報が有効でなくなるま
では、追加コンテンツが表示され続ける。
例外 : 追加コンテンツの視覚的提示がユーザエージェントによって制御されていて、かつコンテンツ制作者が変更して
いない場合は例外とする。
達成基準 1.4.13 原文 : https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus

17. (追加コンテンツ)
hover / focus による「追加コンテンツ」にまつわる2つの問題
問題その2 :
追加コンテンツの中を読もうとしてマ
ウスを動かしたら、不意に追加コンテ
ンツが消えてしまった…困る！
問題その1 :
背面にあったコンテンツを読んで
いたら、不意に追加コンテンツが
オーバーレイしてきて、もともと
読んでいたコンテンツが覆い隠さ
れてしまった…困る！
マウスオーバーまたはキーボード操作
によるフォーカスで、追加コンテンツ
が開くと…

18. [まとめ] 達成基準 1.4.13 Content on Hover or Focus
ロービジョン (弱視) ユーザーは、「拡大鏡」機能で画面拡大のうえ、マウスポインターを読みたい対象
箇所まで動かしながら、コンテンツを読むことがあります。
その場合、ユーザーの意図に反したマウスオーバー効果 (見ていたコンテンツが別のコンテンツに覆い隠
される) やマウスアウト効果 (見ていたコンテンツが消える) が生じないよう、以下の配慮しましょう。
• マウスによる hover やキーボードフォーカスを外さなくても、追加コンテンツを非表示にできるよう
にする。(例 : Esc キーで追加コンテンツを閉じる、など。)
• マウスによる hover によって追加コンテンツを表示させる場合、その追加コンテンツ上でマウスポイ
ンタを動かしても、当該追加コンテンツが消えないようにする。
• マウスによる hover やキーボードフォーカスを外す、ユーザーが任意で追加コンテンツを非表示する
操作をする、あるいは追加コンテンツによって提示された情報が有効でなくなる、といった状態にな
るまでは、追加コンテンツが表示され続けるようにする。

19. 基本的に、hover や focus では、追加コンテンツは出さないよう
にしましょう！
• hover はタッチインターフェースでは使えないから。
• focus で追加コンテンツを出すのは、ユーザーのメンタルモデル
に合致しないから。
でも、そもそもの話として…

20. 次回予告

21. • WCAG 2.1 で追加された達成基準を読む
(Level A & AA)
• 2.1.4 Character Key Shortcuts (A) [モバイル]
• 2.5.1 Pointer Gestures (A) [モバイル]
• UI ケーススタディ

22. To be continued…