Successfully reported this slideshow.
Your SlideShare is downloading. ×

第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」

第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」

Download to read offline

2014-09-27(土)にJUSO Coworkingにて行われた「第2回 D2D アクセシビリティ勉強会」でのスライドです。
公開にあたり下記の編集を加えました。

1.資料中の下線箇所にハイパーリンクを張りました。

2.「実践してみよう」コーナーで当日ご指摘ありました箇所に追記しました。
 ・「達成等級Aを満たす」→「達成等級Aの達成基準を満たす」(p.80/p.82/p.88/p.90)
 ・「実装方法:H73」→「実装方法:H73(の事例1)」(p.79/p.80)
 ・「アクセシビリティ・サポーテッド情報」→「アクセシビリティ・サポーテッド情報(H73-1)」(p.82)
 ・「実装方法:H81」→「実装方法:H81(の事例1)」(p.87/p.88)
 ・「アクセシビリティ・サポーテッド情報」→「アクセシビリティ・サポーテッド情報(H81-1)」(p.90)

3.実装方法から達成基準を遡る手順が説明不足でしたのでページを追加しました。(p.81/p.89)

2014-09-27(土)にJUSO Coworkingにて行われた「第2回 D2D アクセシビリティ勉強会」でのスライドです。
公開にあたり下記の編集を加えました。

1.資料中の下線箇所にハイパーリンクを張りました。

2.「実践してみよう」コーナーで当日ご指摘ありました箇所に追記しました。
 ・「達成等級Aを満たす」→「達成等級Aの達成基準を満たす」(p.80/p.82/p.88/p.90)
 ・「実装方法:H73」→「実装方法:H73(の事例1)」(p.79/p.80)
 ・「アクセシビリティ・サポーテッド情報」→「アクセシビリティ・サポーテッド情報(H73-1)」(p.82)
 ・「実装方法:H81」→「実装方法:H81(の事例1)」(p.87/p.88)
 ・「アクセシビリティ・サポーテッド情報」→「アクセシビリティ・サポーテッド情報(H81-1)」(p.90)

3.実装方法から達成基準を遡る手順が説明不足でしたのでページを追加しました。(p.81/p.89)

More Related Content

More from Nozomi Sawada

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」

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

×