ウェブディレクターのための web a11y 勉強会 #05

ウェブディレクターのためのWeb A11Y 勉強会

#05 (2017-10-10)

自己紹介

@caztcha

ウェブユーザビリティ / アクセシビリティ / 情報アーキテクチャ (IA) HCD-Net 認定 人間中心設計専門家

ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳WG https://website-usability.info

前回までのあらすじ

• ウェブアクセシビリティとは？ • ウェブアクセシビリティはなぜ必要なの？ • 支援技術を知ろう • アクセシビリティ検証ツールいろいろ • スクリーンリーダーを体験しよう!

• WCAG 2.0 の概略 • WCAG 2.0 (Level A) を読もう！

• 1.1.1 非テキストコンテンツ • 1.2.1 音声のみ及び映像のみ (収録済み) • 1.2.2 キャプション (収録済み) • 1.2.3 音声解説又はメディアに対する代替コンテンツ (収録済み)

前回までのあらすじ

• WCAG 2.0 (Level A) を読もう！ • 1.3.1 情報及び関係性

• 1.3.2 意味のある順序

• 1.3.3 感覚的な特徴

• ケーススタディ、お悩み相談

今日のメニュー

多様なユーザーエージェント (デバイス、ブラウザ、支援技術) への適応について学びます。

WCAG 2.0 (Level A) を読もう！ (達成基準、解説書、達成方法集)

WCAG 2.0 の基本構成

おさらい

原則 (4)

ガイドライン (12)

達成基準 (61) このうちレベル「A」のみが本勉強会の対象です。

1. 知覚可能 (Perceivable) 2. 操作可能 (Operable) 3. 理解可能 (Understandable) 4. 堅牢 (Robust)

原則 1. 知覚可能 (Perceivable)

情報及びユーザインタフェース コンポーネントは、利用者が知覚できる方法で利用者に提示可能でなければならない。

おさらい

ガイドライン 1.3 適応可能

情報、及び構造を損なうことなく、様々な方法 (例えば、よりシンプルなレイアウト) で提供できるようにコンテンツを制作すること。

それでは、達成基準を読んでみましょう。

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

何らかの形で提示されている情報、 構造、及び関係性は、プログラムによる解釈が可能である、又はテキストで提供されている。(レベル A)

達成基準 1.3.1 を理解する | WCAG 2.0解説書 http://waic.jp/docs/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html

[用語] 達成基準 1.3.1 情報及び関係性

プログラムによる解釈が可能 ウェブコンテンツが、様々なユーザーエージェント (ブラウザやスクリーンリーダー) によって処理/解釈されて、多様なモダリティ (視覚情報、聴覚情報、触覚情報、など) で情報が提示できること。

[まとめ] 達成基準 1.3.1 情報及び関係性

�適切な HTML 要素や属性を用いて、(見た目的にではなく) 「意味的に (セマンティックに)」正しく情報をマークアップしましょう。 ✓ランドマーク、見出し (レベル)、段落、画像 (とそれに紐づく代替テキストやキャプション)、箇条書き、

強調、引用、リンク、テーブル (見出しセルとデータセルの対応づけ)、各種フォーム入力要素 (とそれに紐づくラベル)、ボタン、etc...

✓WAI-ARIA を使って、状況の変化や要素間の関係を「意味的に」明確にしましょう。

�ユーザーエージェントが (新しく定義された) セマンティクスを解釈できないケースに備えて、テキストでの情報提供も検討しましょう。 ✓フォーム入力欄が必須項目の場合、aria-required や HTML5 の required 属性だけでなく、label 要

素内に「必須」とテキスト記述する (アスタリスク記号だけで済ませるのではなく)、etc...

達成基準 1.3.2 意味のある順序

コンテンツが提示されている順序が意味に影響を及ぼす場合には、正しく読む順序はプログラムによる解釈が可能である。 (レベル A)

達成基準 1.3.2 を理解する | WCAG 2.0解説書 http://waic.jp/docs/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html

[用語] 達成基準 1.3.2 意味のある順序

プログラムによる解釈が可能 ウェブコンテンツが、様々なユーザーエージェント (ブラウザやスクリーンリーダー) によって処理/解釈されて、多様なモダリティ (視覚情報、聴覚情報、触覚情報、など) で情報が提示できること。

[まとめ] 達成基準 1.3.2 意味のある順序

�ウェブページの見た目から想起される情報の提示順と、ソースコードによる情報の提示順は、一致させましょう。 ✓キーボード操作に依存するユーザーが [Tab] キーでページを見る際、フォーカスの移動順序

が、ユーザーの期待通りになります。

✓ロービジョンのスクリーンリーダー利用者 (聴覚モダリティと視覚モダリティを併用している) が、キーボード操作でウェブページを見る際、音声読み上げ順序が、ユーザーの期待通りになります。

�文字組みの調整のために、単語内にスペースを入れたり改行を入れたりしないようにしましょう。

達成基準 1.3.3 感覚的な特徴

コンテンツを理解し操作するための説明は、形、大きさ、視覚的な位置、方向、又は音のような、構成要素が持つ感覚的な特徴だけに依存していない。 (レベル A)

達成基準 1.3.3 を理解する | WCAG 2.0解説書 http://waic.jp/docs/UNDERSTANDING-WCAG20/content-structure-separation-understanding.html

[用語] 達成基準 1.3.3 感覚的な特徴

(特にありません)

[まとめ] 達成基準 1.3.3 感覚的な特徴

�コンテンツにおいて、「感覚的な特徴」だけで説明しないようにしましょう。その「感覚」は、ユーザーの能力や状況 (利用デバイスの違いを含む) によって変わるからです。

×「～するには、左上のボタンを押してください。」

→ 具体的なラベルも含めて説明しましょう。(「○○ボタンを押してください。」

× フォーム入力必須項目をアスタリスク記号のみで表現する。

→ 具体的なラベルを用いて意味を明示的にしましょう。

✓「* は入力必須項目です。」

✓「お名前 (必須)」… こちらのほうがユーザーの認知負荷が低いのでベター。

�ソースコードでの情報提示順に合致する相対的な表現であれば、大丈夫です。 ✓「上記の」「以下の」etc...

おまけ

いずれの状況 (環境) でも利用できること

プログレッシブエンハンスメント (Progressive Enhancement)

HTML (情報)

CSS (見栄え)

JavaScript (ふるまい)

マシンリーダブル (Machine-readable)

ユーザーは、マシン (ユーザーエージェント) を介して初めて、ウェブコンテンツを利用することができる。

Web Content Machine

ケーススタディ、お悩み相談

Anyone?

次回予告

• WCAG 2.0 (Level A) を読もう！ • 1.4.1 色の使用

• 1.4.2 音声の制御

• 2.1.1 キーボード

• 2.1.2 キーボードトラップなし

• ケーススタディ、お悩み相談

色への依存、 音声再生のコントロール、 マウスが使えない人のキーボード操作、 について学びます。

To be continued…