Mais conteúdo relacionado
Semelhante a ウェブディレクターのための Web A11Y 勉強会 (Season 2) #02 (20)
Mais de Kazuhiko Tsuchiya (6)
ウェブディレクターのための Web A11Y 勉強会 (Season 2) #02
- 3. 今日のメニュー
• WCAG 2.0 (Level AA) を読もう
• 1.4.3 コントラスト (最低限)
• 1.4.4 テキストのサイズ変更
• UI ケーススタディ
- 5. WCAG (Web Content Accessibility
Guidelines) の基本構成
原則 (4)
ガイドライン (12)
達成基準 (61)
1. 知覚可能 (Perceivable)
2. 操作可能 (Operable)
3. 理解可能 (Understandable)
4. 堅牢 (Robust)
3つのレベルに分かれている
• A (シングルエー)
• AA (ダブルエー)
• AAA (トリプルエー)
おさらい
- 6. 原則 1. 知覚可能 (Perceivable)
情報及びユーザインタフェース コンポーネントは、利用者が知覚
できる方法で利用者に提示可能でなければならない。
おさらい
- 8. 達成基準 1.4.3
コントラスト (最低限)
テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次
の場合は除く: (レベル AA)
• 大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコント
ラスト比がある。
• 付随的: テキスト又は文字画像において、次の場合はコントラストの要件はない。アクティブで
はないユーザインタフェース コンポーネントの一部である、純粋な装飾である、誰も視覚的に
確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。
• ロゴタイプ: ロゴ又はブランド名の一部である文字には、最低限のコントラストの要件はない。
達成基準 1.4.3 を理解する | WCAG 2.0解説書
https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
- 9. [用語] 達成基準 1.4.3 コントラスト (最低限)
テキスト
プログラムによる解釈が可能な文字の並びで、自然言語で何かを表現しているもの。
文字画像
非テキスト形式 (画像) で提示された文字情報。
サイズの大きな (文字)
少なくとも 18 ポイント、又は 14 ポイントの太字。
中国語、日本語、および韓国語 (CJK) のフォントは、それと同等の文字サイズ。
純粋な装飾
見栄えのためだけのもので、情報は提供せず、機能性も備えていないもの。
- 10. [まとめ] 達成基準 1.4.3 コントラスト (最低限)
文字情報 (テキスト、文字画像、を問わず) の色は、背景色との間で 4.5:1 以上のコントラスト
比を保つようにしましょう。
✓チェックツールで簡単に計測できます。
Colour Contrast Analyser (https://developer.paciellogroup.com/resources/contrastanalyser/ )
Contrast Ratio (http://contrast-ratio.com/ )
… etc.
アクティブではない UI コンポーネントや、純粋な装飾、ロゴマークなどは例外です。
- 12. [用語] 達成基準 1.4.4 テキストのサイズ変更
キャプション
動画の音声トラックに対応した字幕のこと。
文字画像
非テキスト形式 (画像) で提示された文字情報。
テキスト
プログラムによる解釈が可能な文字の並びで、自然言語で何かを表現しているもの。
支援技術
一般的なユーザエージェント (ブラウザなど ) で提供されている機能以上の機能を、障害のある
ユーザーのために提供する、ソフトウェアやハードウェア。(例 : スクリーンリーダー)
- 13. [まとめ] 達成基準 1.4.4 テキストのサイズ変更
ウェブコンテンツの拡大 (ズーム) を妨げないようにしましょう。
✓ブラウザの標準的なズーム機能で200%以上の拡大ができれば OK です。
✓タッチインターフェース向けのウェブサイトやアプリケーションで、ピンチ&ズーム
を不可能にする実装が時々見られますが (<meta name=“viewport”> で user-
scalable=no にする)、やめましょう。
- 22. • WCAG 2.0 (Level AA) を読もう
• 1.4.5 文字画像
• 2.4.5 複数の手段
• UI ケーススタディ