アクセシビリティガイドラインの見方・使い方

アクセシビリティガイドラインとは ?

WCAG 2.0

3

JIS X 8341-3:2016

4

5

WCAG 2.0 日本語訳

ガイドラインには何が書いてあるの ?

原則4 つの原則

ガイドライン原則を守るためのガイドライン

達成基準ガイドラインを満たすために守るべき基準

6

4 つの原則

原則 1: 知覚可能利用者に知覚可能な方法で提示できること

原則 2: 操作可能

原則 3: 理解可能

原則 4: 堅牢 (robust) 現在及び将来のさまざまな UA との互換性

7

ガイドラインの難しさ

8

読んでみてどうでしたか、と聞くと

まれにある感想読んだら良くわかった (!)みんな読めばいいのにと思った (!?)

よくある感想なんだか難しい

具体的にどうすればいいかわからない

9

10

なぜ難しいのか ?

内容が一般化されているさまざまな技術に適用できる汎用的な書き方

特定の技術 (HTML 、 CSS) に特化した書き方はしない

時代が変化しても問題ないような書き方W3C Recommendation や JIS 規格は

それほど頻繁には更新できない

一般化の一例

「非テキストコンテンツには、同等の目的を果たす代替テキストが提供されている」たとえば img 要素に alt 属性を指定する話

しかし img 要素以外のオブジェクトや、HTML 以外の技術にも適用できる書き方にしている

11

そこで関連文書 !

難しさはどうしようもないのか ?

12

関連文書

WCAG 2.0 には関連文書がある特定の技術に依存した情報や更新頻度の高い情報は

関連文書としてまとめられている

特に重要なものは以下の 2 つUnderstanding WCAG 2.0Techniques for WCAG 2.0

13

WCAG 2.0 関連文書

14

Understanding WCAG 2.0

15

WCAG 2.0 解説書

16

Understanding はどんな文書 ?

達成基準の意図や目的などの解説何のための基準なのかがわかる

解説は本体側にはほとんどないので、こちらを読んで初めてわかることも多い

事例の紹介

関連する達成方法へのリンク

17

Techniques for WCAG 2.0

18

WCAG 2.0 実装方法集

19

Techniques はどんな文書 ?

各技術ごとに達成基準を満たす方法の具体例HTML 、 CSS 、スクリプト、 PDF などに分かれて

いる

全ての技術に適用できる汎用的な手法もある

特定技術用の方法があればそれを使うほうがよい

それが使えない場合に汎用的な方法を使う

20

21

Techniques の注意点

あくまで例であり、要求事項ではない全てを採用しなければならないわけではない

ここにあるものが全てというわけでもない

コンテンツ側の実装ではない手法もあるズーム機能のあるブラウザを使う、など

2016 年版 JIS では「実装方法」を「達成方法」とした

22

アクセシビリティ・サポーテッド情報

ウェブアクセシビリティ基盤委員会 (WAIC)

23

24

アクセシビリティ・サポーテッド（ AS ）情報

アクセシビリティ・サポーテッド情報とは ?

達成方法のサポート状況をまとめたものTechniques に書かれている達成方法を、

ブラウザや支援技術が実際にサポートしているか ?Techniques に手法が挙げられていても、

支援技術側がまったく対応していなければ、ユーザーが実際にアクセスすることはできない

25

関連文書の使い方の例

26

HTML のコンテンツで達成基準 2.4.1 を満たすには

どうすればいいか ?

を、調べたい

たとえば……

27

WCAG 2.0 の達成基準を確認

28

Understanding の解説を読む

29

同一ページの下のほうで達成方法を確認

30

採用できそうな達成方法を確認

G1: メインコンテンツエリアへ直接移動するリンクを各ページの先頭に追加する

H69: コンテンツの各セクションの開始位置に見出し要素を提供する

31

G1: メインコンテンツエリアへ直接移動するリンクを各ページの先頭に追加する

32

H69: コンテンツの各セクションの開始位置に見出し要素を提供する

33

どちらを採用するのか ?

対象環境でサポートされているものを採用アクセシビリティ・サポーテッド情報を確認して

「達成可能」となっているものはほぼ問題なし

特定技術用の方法があれば優先的に採用たとえば HTML なら、一般的なものよりも

HTML 専用の技術のほうが優れていることが多い

上に書かれているほうが比較的お勧め

34

ブロックスキップに関する AS 情報

35

G1 の情報が 2 つあるのは ?

WAIC の AS 情報は、 Techniques の実装例ごとにテスト結果を出している

G1 には 2 つの例がある :常に表示されているスキップリンク

フォーカスがあたると表示されるスキップリンク

36

AS 情報 G1-1: 要注意

37

AS 情報 G1-2: 要注意

38

AS 情報 H69: 達成可能

39

H69 のテスト結果 ( ビジュアルブラウザ )

40

H69 のテスト結果 ( スクリーンリーダー )

41

参考 : JIS X 8341-3:2010 達成基準 7.2.4.1 を満たす条件に関する意見募集

42

まとめ

43

まとめ

WCAG 2.0 本体だけではわかりにくいこれはそういうもの

解説などは関連文書にまとまっている関連文書を適宜参照すると Good見方を覚えればそんなに難しくないはず

WAIC の AS 情報も参考になるかも ?

44

さあ、はじめよう !

45

デザイニング Web アクセシビリティ

46

ありがとうございました