Download as PDF, PPTX
![[用語] 達成基準 1.3.1 情報及び関係性
プログラムによる解釈が可能
ウェブコンテンツが、様々なユーザーエージェント (ブラウザやスクリーンリーダー)
によって処理/解釈されて、多様なモダリティ (視覚情報、聴覚情報、触覚情報、など)
で情報が提示できること。](https://image.slidesharecdn.com/weba11y5-171228211900/85/Web-A11Y-05-12-320.jpg)
![[まとめ] 達成基準 1.3.1 情報及び関係性
適切な HTML 要素や属性を用いて、(見た目的にではなく) 「意味的に (セマンティックに)」正し
く情報をマークアップしましょう。
✓ ランドマーク、見出し (レベル)、段落、画像 (とそれに紐づく代替テキストやキャプション)、箇条書き、
強調、引用、リンク、テーブル (見出しセルとデータセルの対応づけ)、各種フォーム入力要素 (とそれ
に紐づくラベル)、ボタン、etc...
✓ WAI-ARIA を使って、状況の変化や要素間の関係を「意味的に」明確にしましょう。
ユーザーエージェントが (新しく定義された) セマンティクスを解釈できないケースに備えて、テ
キストでの情報提供も検討しましょう。
✓ フォーム入力欄が必須項目の場合、aria-required や HTML5 の required 属性だけでなく、label 要
素内に「必須」とテキスト記述する (アスタリスク記号だけで済ませるのではなく)、etc...](https://image.slidesharecdn.com/weba11y5-171228211900/85/Web-A11Y-05-13-320.jpg)
![[用語] 達成基準 1.3.2 意味のある順序
プログラムによる解釈が可能
ウェブコンテンツが、様々なユーザーエージェント (ブラウザやスクリーンリーダー)
によって処理/解釈されて、多様なモダリティ (視覚情報、聴覚情報、触覚情報、など)
で情報が提示できること。](https://image.slidesharecdn.com/weba11y5-171228211900/85/Web-A11Y-05-15-320.jpg)
![[まとめ] 達成基準 1.3.2 意味のある順序
ウェブページの見た目から想起される情報の提示順と、ソースコードによる情報の提
示順は、一致させましょう。
✓ キーボード操作に依存するユーザーが [Tab] キーでページを見る際、フォーカスの移動順序
が、ユーザーの期待通りになります。
✓ ロービジョンのスクリーンリーダー利用者 (聴覚モダリティと視覚モダリティを併用してい
る) が、キーボード操作でウェブページを見る際、音声読み上げ順序が、ユーザーの期待通
りになります。
文字組みの調整のために、単語内にスペースを入れたり改行を入れたりしないように
しましょう。](https://image.slidesharecdn.com/weba11y5-171228211900/85/Web-A11Y-05-16-320.jpg)
![[用語] 達成基準 1.3.3 感覚的な特徴
(特にありません)](https://image.slidesharecdn.com/weba11y5-171228211900/85/Web-A11Y-05-18-320.jpg)
![[まとめ] 達成基準 1.3.3 感覚的な特徴
コンテンツにおいて、「感覚的な特徴」だけで説明しないようにしましょう。その「感覚」は、
ユーザーの能力や状況 (利用デバイスの違いを含む) によって変わるからです。
×「～するには、左上のボタンを押してください。」
→ 具体的なラベルも含めて説明しましょう。(「○○ボタンを押してください。」
× フォーム入力必須項目をアスタリスク記号のみで表現する。
→ 具体的なラベルを用いて意味を明示的にしましょう。
✓ 「* は入力必須項目です。」
✓ 「お名前 (必須)」… こちらのほうがユーザーの認知負荷が低いのでベター。
ソースコードでの情報提示順に合致する相対的な表現であれば、大丈夫です。
✓ 「上記の」「以下の」etc...](https://image.slidesharecdn.com/weba11y5-171228211900/85/Web-A11Y-05-19-320.jpg)
Uploaded byKazuhiko Tsuchiya
ウェブディレクターのための Web A11Y 勉強会 #05
ウェブ制作会社のディレクターさんを対象にした、アクセシビリティ勉強会です。(全10回コースの第5回目)
![ウェブディレクターのための Web A11Y 勉強会 (Season 2) #12 [最終回]](https://cdn.slidesharecdn.com/ss_thumbnails/weba11yseminars212-190315211627-thumbnail.jpg?width=640&height=640&fit=bounds)
ウェブディレクターのための Web A11Y 勉強会 #05
- 1. ウェブディレクターのための Web A11Y 勉強会 #05(2017-10-10)
- 2. 自己紹介 @caztcha ウェブユーザビリティ / アクセシビリティ/ 情報アーキテクチャ (IA) HCD-Net 認定 人間中心設計専門家 ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳WG https://website-usability.info
- 3. 前回までのあらすじ • ウェブアクセシビリティとは？ • ウェブアクセシビリティはなぜ必要なの？ •支援技術を知ろう • アクセシビリティ検証ツールいろいろ • スクリーンリーダーを体験しよう!
- 4. • WCAG 2.0の概略 • WCAG 2.0 (Level A) を読もう！ • 1.1.1 非テキストコンテンツ • 1.2.1 音声のみ及び映像のみ (収録済み) • 1.2.2 キャプション (収録済み) • 1.2.3 音声解説又はメディアに対する代替コンテンツ (収録済み) 前回までのあらすじ
- 5. • WCAG 2.0(Level A) を読もう！ • 1.3.1 情報及び関係性 • 1.3.2 意味のある順序 • 1.3.3 感覚的な特徴 • ケーススタディ、お悩み相談 今日のメニュー 多様なユーザーエージェント (デバイス、ブラウザ、支援 技術) への適応について学び ます。
- 6. WCAG 2.0 (LevelA) を読もう！ (達成基準、解説書、達成方法集)
- 7. WCAG 2.0 の基本構成 おさらい 原則(4) ガイドライン (12) 達成基準 (61) このうちレベル「A」のみが 本勉強会の対象です。 1. 知覚可能 (Perceivable) 2. 操作可能 (Operable) 3. 理解可能 (Understandable) 4. 堅牢 (Robust)
- 8. 原則 1. 知覚可能(Perceivable) 情報及びユーザインタフェース コンポーネントは、 利用者が知覚できる方法で利用者に提示可能でなけ ればならない。 おさらい
- 9. ガイドライン 1.3 適応可能 情報、及び構造を損なうことなく、様々な方法(例 えば、よりシンプルなレイアウト) で提供できるよ うにコンテンツを制作すること。
- 10.
- 11. 達成基準 1.3.1 情報及び関係性 何らかの形で提示されている情報、構造、及び関係性は、プログラムによ る解釈が可能である、又はテキストで提供されている。(レベル A) 達成基準 1.3.1 を理解する | WCAG 2.0解説書 http://waic.jp/docs/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html
- 12. [用語] 達成基準 1.3.1情報及び関係性 プログラムによる解釈が可能 ウェブコンテンツが、様々なユーザーエージェント (ブラウザやスクリーンリーダー) によって処理/解釈されて、多様なモダリティ (視覚情報、聴覚情報、触覚情報、など) で情報が提示できること。
- 13. [まとめ] 達成基準 1.3.1情報及び関係性 適切な HTML 要素や属性を用いて、(見た目的にではなく) 「意味的に (セマンティックに)」正し く情報をマークアップしましょう。 ✓ ランドマーク、見出し (レベル)、段落、画像 (とそれに紐づく代替テキストやキャプション)、箇条書き、 強調、引用、リンク、テーブル (見出しセルとデータセルの対応づけ)、各種フォーム入力要素 (とそれ に紐づくラベル)、ボタン、etc... ✓ WAI-ARIA を使って、状況の変化や要素間の関係を「意味的に」明確にしましょう。 ユーザーエージェントが (新しく定義された) セマンティクスを解釈できないケースに備えて、テ キストでの情報提供も検討しましょう。 ✓ フォーム入力欄が必須項目の場合、aria-required や HTML5 の required 属性だけでなく、label 要 素内に「必須」とテキスト記述する (アスタリスク記号だけで済ませるのではなく)、etc...
- 14. 達成基準 1.3.2 意味のある順序 コンテンツが提示されている順序が意味に影響を及ぼす場合には、正しく 読む順序はプログラムによる解釈が可能である。(レベル A) 達成基準 1.3.2 を理解する | WCAG 2.0解説書 http://waic.jp/docs/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html
- 15. [用語] 達成基準 1.3.2意味のある順序 プログラムによる解釈が可能 ウェブコンテンツが、様々なユーザーエージェント (ブラウザやスクリーンリーダー) によって処理/解釈されて、多様なモダリティ (視覚情報、聴覚情報、触覚情報、など) で情報が提示できること。
- 16. [まとめ] 達成基準 1.3.2意味のある順序 ウェブページの見た目から想起される情報の提示順と、ソースコードによる情報の提 示順は、一致させましょう。 ✓ キーボード操作に依存するユーザーが [Tab] キーでページを見る際、フォーカスの移動順序 が、ユーザーの期待通りになります。 ✓ ロービジョンのスクリーンリーダー利用者 (聴覚モダリティと視覚モダリティを併用してい る) が、キーボード操作でウェブページを見る際、音声読み上げ順序が、ユーザーの期待通 りになります。 文字組みの調整のために、単語内にスペースを入れたり改行を入れたりしないように しましょう。
- 17. 達成基準 1.3.3 感覚的な特徴 コンテンツを理解し操作するための説明は、形、大きさ、視覚的な位 置、方向、又は音のような、構成要素が持つ感覚的な特徴だけに依存 していない。(レベル A) 達成基準 1.3.3 を理解する | WCAG 2.0解説書 http://waic.jp/docs/UNDERSTANDING-WCAG20/content-structure-separation-understanding.html
- 18. [用語] 達成基準 1.3.3感覚的な特徴 (特にありません)
- 19. [まとめ] 達成基準 1.3.3感覚的な特徴 コンテンツにおいて、「感覚的な特徴」だけで説明しないようにしましょう。その「感覚」は、 ユーザーの能力や状況 (利用デバイスの違いを含む) によって変わるからです。 ×「～するには、左上のボタンを押してください。」 → 具体的なラベルも含めて説明しましょう。(「○○ボタンを押してください。」 × フォーム入力必須項目をアスタリスク記号のみで表現する。 → 具体的なラベルを用いて意味を明示的にしましょう。 ✓ 「* は入力必須項目です。」 ✓ 「お名前 (必須)」… こちらのほうがユーザーの認知負荷が低いのでベター。 ソースコードでの情報提示順に合致する相対的な表現であれば、大丈夫です。 ✓ 「上記の」「以下の」etc...
- 20.
- 21. いずれの状況 (環境) でも利 用できること プログレッシブエンハンスメント (Progressive Enhancement) HTML(情報) CSS (見栄え) JavaScript (ふるまい)
- 22.
- 23.
- 24.
- 25.
- 26. • WCAG 2.0(Level A) を読もう！ • 1.4.1 色の使用 • 1.4.2 音声の制御 • 2.1.1 キーボード • 2.1.2 キーボードトラップなし • ケーススタディ、お悩み相談 色への依存、 音声再生のコントロール、 マウスが使えない人のキーボード操作、 について学びます。
- 27.