SlideShare ist ein Scribd-Unternehmen logo
1 von 47
アクセシビリティガイドラインの
見方・使い方
アクセシビリティガイドライン
とは?
WCAG 2.0
3
JIS X 8341-3:2016
4
WCAG 2.0日本語訳
5
ガイドラインには何が書いてあるの?
原則
 4つの原則
ガイドライン
 原則を守るためのガイドライン
達成基準
 ガイドラインを満たすために守るべき基準
6
4つの原則
原則 1: 知覚可能
 利用者に知覚可能な方法で提示できること
原則 2: 操作可能
原則 3: 理解可能
原則 4: 堅牢 (robust)
 現在及び将来のさまざまなUAとの互換性
7
ガイドラインの難しさ
8
読んでみてどうでしたか、と聞くと
まれにある感想
 読んだら良くわかった (!)
 みんな読めばいいのにと思った (!?)
よくある感想
 なんだか難しい
 具体的にどうすればいいかわからない
9
なぜ難しいのか?
内容が一般化されている
 さまざまな技術に適用できる汎用的な書き方
 特定の技術 (HTML、CSS) に特化した書き方はしない
時代が変化しても問題ないような書き方
 W3C Recommendation や JIS 規格は
それほど頻繁には更新できない
10
一般化の一例
「非テキストコンテンツには、
同等の目的を果たす代替テキストが
提供されている」
 たとえばimg要素にalt属性を指定する話
 しかしimg要素以外のオブジェクトや、
HTML以外の技術にも適用できる書き方にしている
11
そこで
関連文書!
難しさはどうしようもないのか?
12
関連文書
WCAG 2.0には関連文書がある
 特定の技術に依存した情報や更新頻度の高い情報は
関連文書としてまとめられている
特に重要なものは以下の2つ
 Understanding WCAG 2.0
 Techniques 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
Techniquesの注意点
あくまで例であり、要求事項ではない
 全てを採用しなければならないわけではない
 ここにあるものが全てというわけでもない
コンテンツ側の実装ではない手法もある
 ズーム機能のあるブラウザを使う、など
 2016年版JISでは「実装方法」を「達成方法」とした
21
アクセシビリティ・サポーテッド情報
22
ウェブアクセシビリティ基盤委員会 (WAIC)
23
アクセシビリティ・サポーテッド(AS)情報
24
アクセシビリティ・サポーテッド情報とは?
達成方法のサポート状況をまとめたもの
 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
参考:JISX8341-3:2010達成基準7.2.4.1を満たす条件に関する意見募集
42
まとめ
43
まとめ
WCAG 2.0 本体だけではわかりにくい
 これはそういうもの
解説などは関連文書にまとまっている
 関連文書を適宜参照するとGood
 見方を覚えればそんなに難しくないはず
WAICのAS情報も参考になるかも?
44
さあ、はじめよう!
45
デザイニングWebアクセシビリティ
46
ありがとうございました

Weitere ähnliche Inhalte

Mehr von Yoshinori OHTA

世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組み世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組みYoshinori OHTA
 
個人情報の観点から見るサイトセキュリティの重要性
個人情報の観点から見るサイトセキュリティの重要性個人情報の観点から見るサイトセキュリティの重要性
個人情報の観点から見るサイトセキュリティの重要性Yoshinori OHTA
 
アクセシビリティvsセキュリティ ~こんな対策はいらない!~
アクセシビリティvsセキュリティ ~こんな対策はいらない!~ アクセシビリティvsセキュリティ ~こんな対策はいらない!~
アクセシビリティvsセキュリティ ~こんな対策はいらない!~ Yoshinori OHTA
 
Web制作会社とBA、ここ15年の変貌
Web制作会社とBA、ここ15年の変貌Web制作会社とBA、ここ15年の変貌
Web制作会社とBA、ここ15年の変貌Yoshinori OHTA
 
実はできているWebアクセシビリティ ヒカラボ編
実はできているWebアクセシビリティ  ヒカラボ編実はできているWebアクセシビリティ  ヒカラボ編
実はできているWebアクセシビリティ ヒカラボ編Yoshinori OHTA
 
アクセシビリティからはじめる、WebサイトのUI/UXデザイン
アクセシビリティからはじめる、WebサイトのUI/UXデザインアクセシビリティからはじめる、WebサイトのUI/UXデザイン
アクセシビリティからはじめる、WebサイトのUI/UXデザインYoshinori OHTA
 
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザインアクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザインYoshinori OHTA
 
デザイニングWebアクセシビリティ 誕生秘話
デザイニングWebアクセシビリティ 誕生秘話デザイニングWebアクセシビリティ 誕生秘話
デザイニングWebアクセシビリティ 誕生秘話Yoshinori OHTA
 
アクセシビリティ vs セキュリティ ~こんな対策はいらない!~
アクセシビリティ vs セキュリティ ~こんな対策はいらない!~アクセシビリティ vs セキュリティ ~こんな対策はいらない!~
アクセシビリティ vs セキュリティ ~こんな対策はいらない!~Yoshinori OHTA
 
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーションWAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーションYoshinori OHTA
 
「マシンリーダビリティ」がユーザー体験を加速する
「マシンリーダビリティ」がユーザー体験を加速する「マシンリーダビリティ」がユーザー体験を加速する
「マシンリーダビリティ」がユーザー体験を加速するYoshinori OHTA
 

Mehr von Yoshinori OHTA (11)

世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組み世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組み
 
個人情報の観点から見るサイトセキュリティの重要性
個人情報の観点から見るサイトセキュリティの重要性個人情報の観点から見るサイトセキュリティの重要性
個人情報の観点から見るサイトセキュリティの重要性
 
アクセシビリティvsセキュリティ ~こんな対策はいらない!~
アクセシビリティvsセキュリティ ~こんな対策はいらない!~ アクセシビリティvsセキュリティ ~こんな対策はいらない!~
アクセシビリティvsセキュリティ ~こんな対策はいらない!~
 
Web制作会社とBA、ここ15年の変貌
Web制作会社とBA、ここ15年の変貌Web制作会社とBA、ここ15年の変貌
Web制作会社とBA、ここ15年の変貌
 
実はできているWebアクセシビリティ ヒカラボ編
実はできているWebアクセシビリティ  ヒカラボ編実はできているWebアクセシビリティ  ヒカラボ編
実はできているWebアクセシビリティ ヒカラボ編
 
アクセシビリティからはじめる、WebサイトのUI/UXデザイン
アクセシビリティからはじめる、WebサイトのUI/UXデザインアクセシビリティからはじめる、WebサイトのUI/UXデザイン
アクセシビリティからはじめる、WebサイトのUI/UXデザイン
 
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザインアクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザイン
 
デザイニングWebアクセシビリティ 誕生秘話
デザイニングWebアクセシビリティ 誕生秘話デザイニングWebアクセシビリティ 誕生秘話
デザイニングWebアクセシビリティ 誕生秘話
 
アクセシビリティ vs セキュリティ ~こんな対策はいらない!~
アクセシビリティ vs セキュリティ ~こんな対策はいらない!~アクセシビリティ vs セキュリティ ~こんな対策はいらない!~
アクセシビリティ vs セキュリティ ~こんな対策はいらない!~
 
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーションWAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
 
「マシンリーダビリティ」がユーザー体験を加速する
「マシンリーダビリティ」がユーザー体験を加速する「マシンリーダビリティ」がユーザー体験を加速する
「マシンリーダビリティ」がユーザー体験を加速する
 

Kürzlich hochgeladen

論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...Toru Tamaki
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものですiPride Co., Ltd.
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A surveyToru Tamaki
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNetToru Tamaki
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略Ryo Sasaki
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Yuma Ohgami
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdftaisei2219
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムsugiuralab
 

Kürzlich hochgeladen (9)

論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
 

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