Contenu connexe Similaire à 第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」 (20) Plus de Nozomi Sawada (18) 第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」4. 4
自己紹介
SAWADA STANDARD DESIGN
澤田望
@SawadaStdDesign
WAIC WG2委員(2011年〜)
キヤノンサイトのデザイン監修/運用(〜2013年)
2014年、岡山で独立 6. 6
WAIC
Webウェブ
Accessibilityアクセシビリティ
Infrastructure基盤
Committee委員会 7. 7
WAIC
JIS X 8341-3:2010の理解普及を促進させ
日本のウェブアクセシビリティを前進させる
基盤造りを目指すボランティア団体 8. 8
WAIC
JISの原案を作った人たち
制作会社で実装してる人たち
ブラウザ/アプリを開発してる人たち
企業サイトを運用してる人たち
関連省庁の担当の人たち
利用する人たち(視覚障害者など)
など、いろんな立場の人たちが参加 11. 11
目標
前回:
•アクセシビリティって身近なこと
•実例を交えて重要性の再認識
by みるくさん 12. 12
目標
↑
アクセシビリティの大切さは分かった。
でもJIS対応はやっぱり難しそう...
今回:ここの克服。
目標:誰かに聞かなくても、自分でJIS対応の方
法について調べられるようになる。
14. 14
概要
JIS X 8341-3:2010 とは
「高齢者・障害者等配慮設計指針−情報通信における機器,
ソフトウェア及びサービス−第3部:ウェブコンテンツ」
ウェブアクセシビリティに関する、
日本工業規格化されたガイドライン(2010年版) 16. 16
概要
ざっと眺めてみよう。
【PDFでの閲覧】
日本工業標準調査会JIS検索
※ 閲覧環境によっては動作が不安定な場合もあります。
閲覧できない場合は「JIS規格の閲覧等が上手く出来ない場合」を参照のこと。 17. 17
概要
ウェブコンテンツについてのガイドライン
WAICトップページから
> JIS X 8341-3:2010 関連文書
> JIS X 8341-3:2010 解説
> JIS X 8341-3:2010 の概要
> 箇条7 ウェブコンテンツに関する要件 22. 22
概要
階層が複雑/資料が分散
JIS X8341-3:2010 =WCAG 2.0 +JIS独自の要求事項
技術に依存しない記述
(規格票/ガイドライン:更新少ない)
(関連文書:更新多い) 24. 24
概要
日本語が難しい/表現が難解
WCAG 2.0(技術非依存)の翻訳
原文に忠実な翻訳を目指すと、
聞き慣れた日本語表現から離れてしまう。
【例】
「時間の経過に伴って変化するメディア」 27. 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. 28
概要
JIS X8341-3:2010の構成
•箇条4ウェブコンテンツのアクセシビリティ達成等級
•箇条5一般的原則
•箇条6ウェブコンテンツの確保・向上に関する要件
•箇条7ウェブコンテンツに関する要件← 実装がらみはココ
•箇条8試験方法 29. 29
概要
箇条4 ウェブコンテンツのアクセシビリティ達成等級
WCAG 2.0のlevel と同一
等級A:最低限← まずはココ
等級AA:目標
等級AAA:たぶん無理 30. 30
概要
箇条5 一般的原則
•知覚可能− 情報の存在を知り、得られなきゃダメ
•操作可能− 操作ができなきゃダメ
•理解可能− 得た情報は理解できなきゃダメ
•頑健性-様々なユーザーエージェントが解釈できなきゃダメ 31. 31
概要
箇条6 ウェブコンテンツの確保・向上に関する要件
開発プロセス全体で実施しなければならないコト 32. 32
概要
箇条6 ウェブコンテンツの確保・向上に関する要件
ウェブアクセシビリティ方針の策定と公開
詳しくは、WAICサイト
> ウェブアクセシビリティ方針策定ガイドライン 35. 35
概要
箇条7 ウェブコンテンツに関する要件
JIS X 8341-3:2010 の箇条7 =WCAG 2.0
【例】
•JIS の7.1.1:代替テキストに関するガイドライン
•WCAG 2.0 の1.1:代替テキスト
すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉 などの利用者が必要とする形式に変換できるように、代替テキストを提供する。
(同じ内容) 38. 38
概要
原則(JISの箇条5 一般的原則と同じ)
•知覚可能− 情報の存在を知り、得られなきゃダメ
•操作可能− 操作ができなきゃダメ
•理解可能− 得た情報は理解できなきゃダメ
•頑健性-様々なユーザーエージェントが解釈できなきゃダメ 39. 39
概要
ガイドライン
コンテンツ制作者が達成基準を理解し、
より適した実装方法を用いることができるように、
全体像および全般的な目的を提供。
(検証不可能) 40. 40
概要
達成基準
WCAG 2.0 に適合するために要求される個別要件。
ウェブコンテンツ技術に依存しない形で、
検証可能な基準として記述。 41. 41
概要
解説書(Understanding)
理解と実装を助けるためにW3Cが公開している参考文書。
定期的に追加/更新される予定。
•達成基準の意図
•重要な用語
•達成基準の具体的なメリット
•達成基準を満たしている事例
•達成基準を満たすことのできる実装方法
•さらに対応が望まれる実装方法(参考)
•よくある不適合事例 42. 42
概要
実装方法集(Techniques)
WCAG 2.0の達成基準を満たすために用いることができる
具体的なコンテンツ制作方法集。
定期的に追加/更新される予定。
•適用(対象)
•解説
•事例
•参考リソース
•関連する実装方法
•検証 43. 43
概要
実装方法集のカテゴリー
•一般(G)
•HTML / XHTML(H)
•CSS(C)
•クライアントサイド・スクリプト(SCR)
•サーバサイド・スクリプト(SVR)
•SMIL(SMIL)
•プレーンテキスト(T)
•ARIA(ARIA)
•Flash(FLASH)
•Silverlight(SL)
•PDF(PDF)
•不適合事例(F)※一部英文のまま 44. 44
概要
アクセシビリティ・サポーテッド(AS)情報
アクセシビリティ・サポーテッド:
実際に利用者が利用可能であること。
WAICが日本のユーザエージェントで調査した結果、
及び各実装方法が達成基準を満たせるかどうかを
判断するための参考資料。
※支援技術は海外に比べて新しい技術や仕様への対応が遅れ気味。 45. 45
概要
アクセシビリティ・サポーテッド情報の概要
•実装方法/事例に対するテストファイル
•見解(達成可能/達成不可能/要注意)
•対象(テストする対象/事例の特長)
•注意点(結果×なユーザーエージェントなど)
•代替もしくは推奨する方法
•テスト結果の詳細
※全て◯の場合は掲載されないので注意。
※テストファイルは独自実装のチェックなどに利用可能。 50. 50
読み方/使い方
手順(かなり慎重派)
1.代替テキストについて書かれているガイドラインを探す。
2.ガイドラインに対する解説書を読む。
3.ガイドラインに含まれる達成基準を探す。
4.達成基準に対する解説書を読む。
5.達成基準を満たすことのできる実装方法を知る。
6.実装方法のアクセシビリティ・サポーテッド情報を見る。
7.想定される閲覧環境で問題がないか確認する。 51. 51
読み方/使い方
1. 代替テキストについて書かれているガイドラインを探す
WAICトップ
ウェブ・コンテンツ・アク セシビリティ・ガイドライ ン(WCAG)2.0 52. 52
読み方/使い方
1. 代替テキストについて書かれているガイドラインを探す
ウェブ・コンテンツ・アク セシビリティ・ガイドライ ン(WCAG)2.0 53. 53
読み方/使い方
2. ガイドラインに対する解説書を読む。
ウェブ・コンテンツ・アク セシビリティ・ガイドライ ン(WCAG)2.0
WCAG 2.0 解説書 55. 55
読み方/使い方
4. 達成基準に対する解説書を読む。
ウェブ・コンテンツ・アク セシビリティ・ガイドライ ン(WCAG)2.0
WCAG 2.0 解説書 57. 57
読み方/使い方
6. 実装方法のアクセシビリティ・サポーテッド情報を見る。
WAICトップ
アクセシビリティ・サポーテッド (AS)情報 58. 58
読み方/使い方
6. 実装方法のアクセシビリティ・サポーテッド情報を見る。
アクセシビリティ・サポー テッド(AS)情報
※検証結果が全て◯の場合は
掲載されないので注意。
アクセシビリティ・サポーテッド (AS)情報:H37-1 59. 59
読み方/使い方
7. 想定される閲覧環境で問題がないか確認する。
アクセシビリティ・サポーテッド(AS)情報:H37-1
※Safari, Google Chromeでは画像を非表示にすると代替テキストが表示されないが、
スクリーンリーダーでは問題なく読めているため、実質上は問題なしという判断。 61. 61
読み方/使い方
使おうとしている実装方法:H2
隣り合った画像とテキストリンクを同じリンクの中に入れる
<ahref="https://www.youtube.com/〜">
動画を公開しました。
<imgsrc="img/icon.png"alt="YouTubeへ">
</a> 62. 62
読み方/使い方
手順(やはり慎重派)
1.実装方法集で該当する実装方法を探す。
2.自信がなかったら解説書で達成基準の意図を確認する。
3.実装方法を用いた事例を確認する。
4.実装方法のアクセシビリティ・サポーテッド情報を見る。
5.想定される閲覧環境で問題がないか確認する。 63. 63
読み方/使い方
1. 実装方法集で該当する実装方法を探す。
WAICトップ
WCAG 2.0 実装方法集
WCAG 2.0 実装方法集:H2 64. 64
読み方/使い方
2. 自信がなかったら解説書で達成基準の意図を確認する。
WCAG 2.0 実装方法集:H2
WCAG 2.0 解説書
使おうとしている実装方法H2で満たすこと
ができるのは、想定していた達成基準なのか 65. 65
読み方/使い方
3. 実装方法を用いた事例を確認する。
←
WCAG 2.0 実装方法集:H2
<ahref="https://www.youtube.com/〜">
動画を公開しました。
<imgsrc="img/icon.png"alt="YouTubeへ">
</a>
実装内容としては、H2-2 と同じ。
※AS情報は事例単位なので。 66. 66
読み方/使い方
4. 実装方法のアクセシビリティ・サポーテッド情報を見る。
WAICトップ
アクセシビリティ・サポーテッド (AS)情報 67. 67
読み方/使い方
4. 実装方法のアクセシビリティ・サポーテッド情報を見る。
アクセシビリティ・サポー テッド(AS)情報
※検証結果が全て◯の場合は
掲載されないので注意。
アクセシビリティ・サポーテッド (AS)情報:H2-2 68. 68
読み方/使い方
5. 想定される閲覧環境で問題がないか確認する。
アクセシビリティ・サポーテッド(AS)情報:H2-2
※Safari, Google Chromeでの画像を非表示にすると代替テキストが表示されない件に加え、
PC-Talker XPとNetReader、VoiceOverで問題が認められるため、「要注意」という判断。 70. 70
概要
等級A 準拠ページを作るのに
満たすべき達成基準がパッと見て分かる一覧ないの?
その達成基準を満たせる実装方法の一覧はないの?
71. 71
概要
等級
A 準拠ページが満たすべき達成基準一覧
JIS 規格票箇条4の表1
もしくは、WAICサイト
> JIS X 8341-3:2010 試験実施ガイドライン
> JIS X 8341-3:2010 試験実施ガイドライン2012年11月版
> 3.3 達成基準チェックリストの例
> 達成基準チェックリストの例
※ パッと見ての一覧性は低いかもしれません。 72. 72
概要
達成基準を満たせる実装方法の一覧
JIS 規格票に実装方法は掲載なし
WAICサイト
> JIS X 8341-3:2010 試験実施ガイドライン
> JIS X 8341-3:2010 試験実施ガイドライン2012年11月版
> 3.2 実装チェックリストの例
> 実装チェックリストの例2012年11月版
または解説書の「達成基準を満たすことのできる実装方法」 73. 73
概要
【
注意
】
満たすべき達成基準一覧のうち、
使用している実装方法が含まれる
達成基準のみチェックすればOK。
【例】
動画も音声も使っていないページで、
「7.1.2 時間の経過に伴って変化するメディアに関する達成基準」
をチェックする必要はない。 75. 75
実践
何を?
特定の実装方法が達成基準を満たせるのかどうか、
みんなで調べて、みんなで考える。 76. 76
実践
グループでやってみよう
1.状況を理解する。
2.状況にあう実装方法を探す。
3.その実装方法が、達成等級A の達成基準を満たせるかどうか調べる。
4.満たせない/問題がある場合は、代替の手段を考える。 77. 77
実践
1. 状況を理解する。
【状況1 】
テーブルには要約を付けた方がいいと聞いたので、
追加することにした。 80. 80
実践
3. その実装方法が、達成等級
A の達成基準を満たせるかどうか調べる。
では、実装方法:H73(の事例1)が、
達成等級A の達成基準を満たせるかどうか調べてみよう。 81. 81
実践
3. その実装方法が、達成等級
A の達成基準を満たせるかどうか調べる。
実装方法:H73が関連する達成基準は、
達成基準1.3.1(情報及び関係性)
※説明不足だったためページ追加しました。(2014年10月5日) 82. 82
実践
3. その実装方法が、達成等級
A の達成基準を満たせるかどうか調べる。
アクセシビリティ・サポーテッド情報(H73-1)
•見解:要注意
•注意点:
PC-Talkerが未対応。単純なデータテーブルにはsummary は必要ないこともある。特に、レイアウトテーブルには
summary属性を使用しないこと。
•代替もしくは推奨する方法:
表の説明がスクリーンリーダーの利用者以外にも有益なもの であれば、表題を使用したり、単純に表の前にテキストを書 いて説明したほうが良い場合もある。 83. 83
実践
4. 満たせない/問題がある場合は、代替の手段を考える。
他に代替できる実装方法がないか、みんなで考えよう。 84. 84
実践
1. 状況を理解する。
【状況2 】
同じリンクラベルが複数あり、
それぞれリンク先が違うのは良くないと思い、
リストを使って説明を追加することにした。 88. 88
実践
3. その実装方法が、達成等級
A の達成基準を満たせるかどうか調べる。
では、実装方法:H81(の事例1)が、
達成等級A の達成基準を満たせるかどうか調べてみよう。 89. 89
実践
3. その実装方法が、達成等級
A の達成基準を満たせるかどうか調べる。
実装方法:H81が関連する達成基準は、
達成基準2.4.4 (文脈におけるリンクの目的)
※説明不足だったためページ追加しました。(2014年10月5日) 90. 90
実践
3. その実装方法が、達成等級
A の達成基準を満たせるかどうか調べる。
アクセシビリティ・サポーテッド情報(H81-1)
•見解:達成不可能
•代替もしくは推奨する方法:
できるかぎり、「リンクテキストだけ」でリンクの目的が 分かるようにするとよい。
•備考:
親のリスト項目を読み上げるキー操作を提供しているス クリーンリーダーがない。今後の支援技術の機能向上に期待 するが、現時点では利用者が親のリスト項目を文脈の一つと して利用することは困難である。 91. 91
実践
4. 満たせない/問題がある場合は、代替の手段を考える。
他に代替できる実装方法がないか、みんなで考えよう。 93. 93
まとめ
•JIS X 8341-3:2010 の箇条7 =WCAG 2.0
•達成基準だけで理解できないことは解説書を読もう。
•実装方法集に載っていても日本で使えるとは限らない。
•満たすべきは達成基準で、実装方法集は事例集に過ぎない。
•実装方法集にない方法でも達成基準を満たすことは可能。