第2回 D2D アクセシビリティ勉強会

JIS X 8341-3:2010 を

一人で読めるようになろう

2014年9月27日

2

アウトライン

1. 自己紹介／WAICのご紹介

2. 今回の目標

3. JIS X8341-3:2010の概要

4. 読み方／使い方

5. 具体例で実践（グループ）

6. まとめ

3

自己紹介

4

自己紹介

SAWADA STANDARD DESIGN

澤田 望

@SawadaStdDesign

WAIC WG2委員（2011年〜）

キヤノンサイトのデザイン監修／運用（〜2013年）

2014年、岡山で独立

5

WAICとは？

6

WAIC

Web ウェブ

Accessibil ity アクセシビリティ

Infrastructure 基盤

Committee 委員会

7

WAIC

JIS X 8341-3:2010の理解普及を促進させ

日本のウェブアクセシビリティを前進させる

基盤造りを目指すボランティア団体

8

WAIC

JISの原案を作った人たち

制作会社で実装してる人たち

ブラウザ／アプリを開発してる人たち

企業サイトを運用してる人たち

関連省庁の担当の人たち

利用する人たち（視覚障害者など）

など、いろんな立場の人たちが参加

9

WAIC

実装する際に必要な情報

試験や評価を行う際に必要な情報

などを公開

↓

http://waic.jp/

10

本題に入る前に

今回の目標

11

目標

前回：

•アクセシビリティって身近なこと

•実例を交えて重要性の再認識

by みるくさん

12

目標

↑

アクセシビリティの大切さは分かった。

でもJIS対応はやっぱり難しそう．．．

今回：ここの克服。

目標：誰かに聞かなくても、自分でJIS対応の方法について調べられるようになる。

13

JIS X8341-3:2010の

概要を理解しよう

14

概要

JIS X 8341-3:2010 とは

「高齢者・障害者等配慮設計指針−情報通信における機器，

ソフトウェア及びサービス−第3部：ウェブコンテンツ」

ウェブアクセシビリティに関する、

日本工業規格化されたガイドライン（2010年版）

15

概要

ざっと眺めてみよう。

【 規格票（冊子）】

日本規格協会 Web Store

16

概要

ざっと眺めてみよう。

【 PDFでの閲覧 】

日本工業標準調査会 JIS検索

※ 閲覧環境によっては動作が不安定な場合もあります。

閲覧できない場合は「JIS規格の閲覧等が上手く出来ない場合」を参照のこと。

17

概要

ウェブコンテンツについてのガイドライン

WAICトップページから

> JIS X 8341-3:2010 関連文書

> JIS X 8341-3:2010 解説

> JIS X 8341-3:2010 の概要

> 箇条7 ウェブコンテンツに関する要件

18

概要

ガイドラインの中身は > WCAG 2.0の日本語訳

実装方法は > WCAG 2.0 実装方法集

19

概要

読みにくいですね。

20

概要

JIS（とWAICのサイト）は読みにくい？

•階層が深い

•資料が分散

•文字ばかり

•日本語が難しい

•表現が難解

21

概要

どうして？

22

概要

階層が複雑 ／ 資料が分散

JIS X8341-3:2010 ＝ WCAG 2.0 ＋ JIS独自の要求事項

技術に依存しない記述

（規格票／ガイドライン：更新少ない）

（関連文書：更新多い）

23

概要

文字ばかり

技術に依存しない記述

2004年版にあった具体例：全て削除

24

概要

日本語が難しい ／ 表現が難解

WCAG 2.0（技術非依存）の翻訳

原文に忠実な翻訳を目指すと、

聞き慣れた日本語表現から離れてしまう。

【 例 】

「時間の経過に伴って変化するメディア」

25

概要

そういうモノだと思って

割り切りましょう。

＼(^o^)／

26

概要

JIS X8341-3:2010の構成について

27

概要

JIS X8341-3:2010の構成

WAICトップページから

> JIS X 8341-3:2010 関連文書

> JIS X 8341-3:2010 解説

> JIS X 8341-3:2010 の概要

> JIS X 8341-3:2010 の構成

28

概要

JIS X8341-3:2010の構成

•箇条4 ウェブコンテンツのアクセシビリティ達成等級

•箇条5 一般的原則

•箇条6 ウェブコンテンツの確保・向上に関する要件

•箇条7 ウェブコンテンツに関する要件 ← 実装がらみはココ

•箇条8 試験方法

29

概要

箇条4 ウェブコンテンツのアクセシビリティ達成等級

WCAG 2.0の level と同一

等級 A ：最低限 ← まずはココ

等級 AA ：目標

等級 AAA ：たぶん無理

30

概要

箇条5 一般的原則

•知覚可能 − 情報の存在を知り、得られなきゃダメ

•操作可能 − 操作ができなきゃダメ

•理解可能 − 得た情報は理解できなきゃダメ

•頑健性 - 様々なユーザーエージェントが解釈できなきゃダメ

31

概要

箇条6 ウェブコンテンツの確保・向上に関する要件

開発プロセス全体で実施しなければならないコト

32

概要

箇条6 ウェブコンテンツの確保・向上に関する要件

ウェブアクセシビリティ方針の策定と公開

詳しくは、WAICサイト

> ウェブアクセシビリティ方針策定ガイドライン

33

概要

箇条8 試験方法

詳しくは、WAICサイト

> 試験実施ガイドライン

34

概要

いよいよ

箇条7 ウェブコンテンツに関する要件

35

概要

箇条7 ウェブコンテンツに関する要件

JIS X 8341-3:2010 の 箇条7 ＝ WCAG 2.0

【 例 】

•JIS の 7.1.1：代替テキストに関するガイドライン

•WCAG 2.0 の 1.1：代替テキスト

すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉

などの利用者が必要とする形式に変換できるように、代替テキストを提供する。

（同じ内容）

36

概要

ここから先は

WCAG 2.0 の話です。

37

概要

WCAG 2.0および関連文書（JISを含む）の主な構成

38

概要

原則（JISの箇条5 一般的原則と同じ）

•知覚可能 − 情報の存在を知り、得られなきゃダメ

•操作可能 − 操作ができなきゃダメ

•理解可能 − 得た情報は理解できなきゃダメ

•頑健性 - 様々なユーザーエージェントが解釈できなきゃダメ

39

概要

ガイドライン

コンテンツ制作者が達成基準を理解し、

より適した実装方法を用いることができるように、

全体像および全般的な目的を提供。

（検証不可能）

40

概要

達成基準

WCAG 2.0 に適合するために要求される個別要件。

ウェブコンテンツ技術に依存しない形で、

検証可能な基準として記述。

41

概要

解説書（Understanding）

理解と実装を助けるためにW3Cが公開している参考文書。

定期的に追加／更新される予定。

• 達成基準の意図

• 重要な用語

• 達成基準の具体的なメリット

• 達成基準を満たしている事例

• 達成基準を満たすことのできる実装方法

• さらに対応が望まれる実装方法（参考）

• よくある不適合事例

42

概要

実装方法集（Techniques）

WCAG 2.0の達成基準を満たすために用いることができる

具体的なコンテンツ制作方法集。

定期的に追加／更新される予定。

• 適用（対象）

• 解説

• 事例

• 参考リソース

• 関連する実装方法

• 検証

43

概要

実装方法集のカテゴリー

•一般（G）

•HTML / XHTML（H）

•CSS（C）

•クライアントサイド・スクリプト（SCR）

•サーバサイド・スクリプト（SVR）

•SMIL （SMIL）

•プレーンテキスト（T）

•ARIA（ARIA）

•Flash（FLASH）

•Silverlight（SL）

•PDF（PDF）

•不適合事例（F） ※一部英文のまま

44

概要

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

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

実際に利用者が利用可能であること。

WAICが日本のユーザエージェントで調査した結果、

及び各実装方法が達成基準を満たせるかどうかを

判断するための参考資料。

※支援技術は海外に比べて新しい技術や仕様への対応が遅れ気味。

45

概要

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

•実装方法／事例に対するテストファイル

•見解（達成可能／達成不可能／要注意）

•対象（テストする対象／事例の特長）

•注意点（結果×なユーザーエージェントなど）

•代替もしくは推奨する方法

•テスト結果の詳細

※全て◯の場合は掲載されないので注意。

※テストファイルは独自実装のチェックなどに利用可能。

46

JIS X8341-3:2010の

読み方／使い方

47

読み方／使い方

WCAG 2.0、解説書、実装方法集、

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

を実際に使ってみよう。

48

読み方／使い方

よくある（？）シチュエーション

画像に対して代替テキストが必要なことは何となく知っているが、実際どんな実装方法の種類があるのか知りたい。

これから使おうとしている実装方法が、達成等級 A を達成できるかどうか知りたい。

49

読み方／使い方

まずはこちら

画像に対して代替テキストが必要なことは何となく知っているが、実際どんな実装方法の種類があるのか知りたい。

50

読み方／使い方

手順（かなり慎重派）

1. 代替テキストについて書かれているガイドラインを探す。

2. ガイドラインに対する解説書を読む。

3. ガイドラインに含まれる達成基準を探す。

4. 達成基準に対する解説書を読む。

5. 達成基準を満たすことのできる実装方法を知る。

6. 実装方法のアクセシビリティ・サポーテッド情報を見る。

7. 想定される閲覧環境で問題がないか確認する。

51

読み方／使い方

1. 代替テキストについて書かれているガイドラインを探す

WAICトップ

ウェブ・コンテンツ・アクセシビリティ・ガイドライン（WCAG）2.0

52

読み方／使い方

1. 代替テキストについて書かれているガイドラインを探す

ウェブ・コンテンツ・アクセシビリティ・ガイドライン（WCAG）2.0

53

読み方／使い方

2. ガイドラインに対する解説書を読む。

ウェブ・コンテンツ・アクセシビリティ・ガイドライン（WCAG）2.0

WCAG 2.0 解説書

54

読み方／使い方

3. ガイドラインに含まれる達成基準を探す。

※この例の場合は達成基準が一つだけ

55

読み方／使い方

4. 達成基準に対する解説書を読む。

ウェブ・コンテンツ・アクセシビリティ・ガイドライン（WCAG）2.0

WCAG 2.0 解説書

56

読み方／使い方

5. 達成基準を満たすことのできる実装方法を知る。

WCAG 2.0 解説書

57

読み方／使い方

6. 実装方法のアクセシビリティ・サポーテッド情報を見る。

WAICトップ

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

58

読み方／使い方

6. 実装方法のアクセシビリティ・サポーテッド情報を見る。

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

※検証結果が全て◯の場合は

掲載されないので注意。

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

59

読み方／使い方

7. 想定される閲覧環境で問題がないか確認する。

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

※Safari, Google Chromeでは画像を非表示にすると代替テキストが表示されないが、

スクリーンリーダーでは問題なく読めているため、実質上は問題なしという判断。

60

読み方／使い方

次はこちら

これから使おうとしている実装方法が、達成等級 A を達成できるかどうか知りたい。

61

読み方／使い方

使おうとしている実装方法：H2

隣り合った画像とテキストリンクを同じリンクの中に入れる

<a href="https://www.youtube.com/〜">

動画を公開しました。

<img src="img/icon.png" alt="YouTubeへ">

</a>

62

読み方／使い方

手順（やはり慎重派）

1. 実装方法集で該当する実装方法を探す。

2. 自信がなかったら解説書で達成基準の意図を確認する。

3. 実装方法を用いた事例を確認する。

4. 実装方法のアクセシビリティ・サポーテッド情報を見る。

5. 想定される閲覧環境で問題がないか確認する。

63

読み方／使い方

1. 実装方法集で該当する実装方法を探す。

WAICトップ

WCAG 2.0 実装方法集

WCAG 2.0 実装方法集：H2

64

読み方／使い方

2. 自信がなかったら解説書で達成基準の意図を確認する。

WCAG 2.0 実装方法集：H2

WCAG 2.0 解説書

使おうとしている実装方法H2で満たすこと

ができるのは、想定していた達成基準なのか

65

読み方／使い方

3. 実装方法を用いた事例を確認する。

←

WCAG 2.0 実装方法集：H2

<a href="https://www.youtube.com/〜">

動画を公開しました。

<img src="img/icon.png" alt="YouTubeへ">

</a>

実装内容としては、H2-2 と同じ。

※AS情報は事例単位なので。

66

読み方／使い方

4. 実装方法のアクセシビリティ・サポーテッド情報を見る。

WAICトップ

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

67

読み方／使い方

4. 実装方法のアクセシビリティ・サポーテッド情報を見る。

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

※検証結果が全て◯の場合は

掲載されないので注意。

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

68

読み方／使い方

5. 想定される閲覧環境で問題がないか確認する。

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

※Safari, Google Chromeでの画像を非表示にすると代替テキストが表示されない件に加え、

PC-Talker XPとNetReader、VoiceOverで問題が認められるため、「要注意」という判断。

69

概要

唐突ですが．．．

第1回目の勉強会で、こんな質問をいただきました。

70

概要

等級 A 準拠ページを作るのに

満たすべき達成基準がパッと見て分かる一覧ないの？

その達成基準を満たせる実装方法の一覧はないの？

71

概要

等級 A 準拠ページが満たすべき達成基準一覧

JIS 規格票 箇条4の表1

もしくは、WAICサイト

> JIS X 8341-3:2010 試験実施ガイドライン

> JIS X 8341-3:2010 試験実施ガイドライン 2012年11月版

> 3.3 達成基準チェックリストの例

> 達成基準チェックリストの例 ※ パッと見ての一覧性は低いかもしれません。

72

概要

達成基準を満たせる実装方法の一覧

JIS 規格票に実装方法は掲載なし

WAICサイト

> JIS X 8341-3:2010 試験実施ガイドライン

> JIS X 8341-3:2010 試験実施ガイドライン 2012年11月版

> 3.2 実装チェックリストの例

> 実装チェックリストの例 2012年11月版

または解説書の「達成基準を満たすことのできる実装方法」

73

概要

【 注意 】

満たすべき達成基準一覧のうち、

使用している実装方法が含まれる

達成基準のみチェックすればOK。

【 例 】

動画も音声も使っていないページで、

「 7.1.2 時間の経過に伴って変化するメディアに関する達成基準 」

をチェックする必要はない。

74

実践してみよう

75

実践

何を？

特定の実装方法が達成基準を満たせるのかどうか、

みんなで調べて、みんなで考える。

76

実践

グループでやってみよう

1. 状況を理解する。

2. 状況にあう実装方法を探す。

3. その実装方法が、達成等級 A の達成基準を満たせるかどうか調べる。

4. 満たせない／問題がある場合は、代替の手段を考える。

77

実践

1. 状況を理解する。

【状況 1 】

テーブルには要約を付けた方がいいと聞いたので、

追加することにした。

78

実践

2.状況にあう実装方法を探す。

該当する実装方法は何？

79

実践

2.状況にあう実装方法を探す。

【 正解 】

実装方法：H73（の事例１）

table要素のsummary属性を用いて、

データテーブルの概要を提供する。

80

実践

3. その実装方法が、達成等級 A の達成基準を満たせるかどうか調べる。

では、実装方法：H73（の事例1）が、

達成等級 A の達成基準を満たせるかどうか調べてみよう。

81

実践

3. その実装方法が、達成等級 A の達成基準を満たせるかどうか調べる。

実装方法：H73が関連する達成基準は、

達成基準 1.3.1（情報及び関係性）

※説明不足だったためページ追加しました。（2014年10月5日）

82

実践

3. その実装方法が、達成等級 A の達成基準を満たせるかどうか調べる。

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

•見解：要注意

•注意点：

PC-Talkerが未対応。単純なデータテーブルにはsummaryは必要ないこともある。特に、レイアウトテーブルには

summary属性を使用しないこと。

•代替もしくは推奨する方法：

表の説明がスクリーンリーダーの利用者以外にも有益なもの

であれば、表題を使用したり、単純に表の前にテキストを書いて説明したほうが良い 場合もある。

83

実践

4. 満たせない／問題がある場合は、代替の手段を考える。

他に代替できる実装方法がないか、みんなで考えよう。

84

実践

1. 状況を理解する。

【状況 2 】

同じリンクラベルが複数あり、

それぞれリンク先が違うのは良くないと思い、

リストを使って説明を追加することにした。

85

実践

2.状況にあう実装方法を探す。

該当する実装方法は何？

86

実践

2.状況にあう実装方法を探す。

こんなイメージ

※テストファイルを見るとイメージしやすい。

87

実践

2.状況にあう実装方法を探す。

【 正解 】

実装方法：H81（の事例1）

入れ子になったリスト項目にあるリンクテキストと

その親のリスト項目とを組み合わせて、

リンクの目的を特定する。

88

実践

3. その実装方法が、達成等級 A の達成基準を満たせるかどうか調べる。

では、実装方法：H81（の事例1）が、

達成等級 A の達成基準を満たせるかどうか調べてみよう。

89

実践

3. その実装方法が、達成等級 A の達成基準を満たせるかどうか調べる。

実装方法：H81が関連する達成基準は、

達成基準 2.4.4 （文脈におけるリンクの目的）

※説明不足だったためページ追加しました。（2014年10月5日）

90

実践

3. その実装方法が、達成等級 A の達成基準を満たせるかどうか調べる。

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

•見解：達成不可能

•代替もしくは推奨する方法：

できるかぎり、「リンクテキストだけ」でリンクの目的が

分かるようにするとよい。

•備考：

親のリスト項目を読み上げるキー操作を提供しているスクリーンリーダーがない。今後の支援技術の機能向上に期 待するが、現時点では利用者が親のリスト項目を文脈の一 つとして利用することは困難である。

91

実践

4. 満たせない／問題がある場合は、代替の手段を考える。

他に代替できる実装方法がないか、みんなで考えよう。

92

まとめ

93

まとめ

•JIS X 8341-3:2010 の 箇条7 ＝ WCAG 2.0

•達成基準だけで理解できないことは解説書を読もう。

•実装方法集に載っていても日本で使えるとは限らない。

•満たすべきは達成基準で、実装方法集は事例集に過ぎない。

•実装方法集にない方法でも達成基準を満たすことは可能。

94

ありがとうございました。