Embed Size (px)
Citation preview
ウェブディレクターのためのWeb A11Y 勉強会
#08 (2018-01-09)
自己紹介
@caztcha
ウェブユーザビリティ / アクセシビリティ / 情報アーキテクチャ (IA) HCD-Net 認定 人間中心設計専門家
ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳WG https://website-usability.info
前回までのあらすじ• ウェブアクセシビリティとは？ • ウェブアクセシビリティはなぜ必要なの？ • 支援技術を知ろう • アクセシビリティ検証ツールいろいろ • スクリーンリーダーを体験しよう! • WCAG 2.0 の概略 • WCAG 2.0 (Level A) を読もう！
今日のメニュー• WCAG 2.0 (Level A) を読もう！ • 2.4.1 ブロックスキップ
• 2.4.2 ページタイトル
• 2.4.3 フォーカス順序
• 2.4.4 リンクの目的 (コンテキスト内)
• ケーススタディ、お悩み相談
利用者がナビゲートしたり、コンテンツを探し出したりするための支援について学びます。
WCAG 2.0 (Level A) を読もう！ (達成基準、解説書、達成方法集)
WCAG 2.0 の基本構成
おさらい
原則 (4)
ガイドライン (12)
達成基準 (61) このうちレベル「A」のみが本勉強会の対象です。
1. 知覚可能 (Perceivable) 2. 操作可能 (Operable) 3. 理解可能 (Understandable) 4. 堅牢 (Robust)
原則 2. 操作可能 (Operable)
ユーザインタフェース コンポーネント及びナビゲーションは操作可能でなければならない。
おさらい
ガイドライン 2.4 ナビゲーション可能
利用者がナビゲートしたり、コンテンツを探し出したり、現在位置を確認したりすることを手助けする手段を提供すること。
達成基準 2.4.1 ブロックスキップ
複数のウェブページ上で繰り返されているコンテンツのブロックをスキップするメカニズムが利用できる。 (レベル A)
達成基準 2.4.1 を理解する | WCAG 2.0解説書
https://waic.jp/docs/NOTE-UNDERSTANDING-WCAG20-20160317/navigation-mechanisms-skip.html
[用語] 達成基準 2.4.1 ブロックスキップ
複数のウェブページ上で繰り返されているコンテンツのブロック
ナビゲーションメニューなど、サイト全体で共通の UI のブロック (塊) のこと。
[まとめ] 達成基準 2.4.1 ブロックスキップ
スクリーンリーダー利用者や、キーボード操作に依存する利用者は、ページの冒頭にナビゲーションメニューなどのブロックがある場合、何度も [Tab] キーを押さないとメインコンテンツに辿り着けない恐れがあります。こうしたブロックを利用者が回避できるように、少なくとも以下の実装をしましょう。 ✓見出しレベル (h1, h2, h3, …) を適切にマークアップする。
✓HTML のセクション要素と WAI-ARIA ランドマークを適切にマークアップする。
● <header>, <nav>, <main>, <aside>, <footer>, …
● role=“navigation”, role=“search” role=“main”, role=“complementary”, role=“contentinfo”,…
[ディスカッション] 達成基準 2.4.1 ブロックスキップ
メインコンテンツにジャンプするページ内リンクって、必要だと思いますか？
http://matatk.agrip.org.uk/landmarks/
達成基準 2.4.2 ページタイトル
ウェブページには、主題又は目的を説明したタイトルがある。 (レベル A)
達成基準 2.4.2 を理解する | WCAG 2.0解説書
https://waic.jp/docs/NOTE-UNDERSTANDING-WCAG20-20160317/navigation-mechanisms-title.html
[用語] 達成基準 2.4.2 ページタイトル
(特にありません)
[まとめ] 達成基準 2.4.2 ページタイトル
<title> 要素に、ページごとのユニークなタイトルを付けましょう。
検索エンジンの SERPs、ソーシャルメディアでのシェア、ブラウザのタブ、など様々なシーンで流用されることを想定し、<title> 要素ではページの主題 (多くの場合、<h1> と同じ記述) をまず書いたうえで、その後にサイト名を書く形がよいでしょう。
[ディスカッション] 達成基準 2.4.2 ページタイトル
<title> 要素には、このページのサイト内における位置づけを、どの程度詳細に記述すればよいでしょうか？ (階層構造を正しく title に記述すべき？)
達成基準 2.4.3 フォーカス順序
ウェブページが順を追ってナビゲートできて、そのナビゲーション順が意味又は操作に影響を及ぼす場合、フォーカス可能なコンポーネントは、意味及び操作性を損なわない順序でフォーカスを受け取る。(レベル A)
達成基準 2.4.3 を理解する | WCAG 2.0解説書
https://waic.jp/docs/NOTE-UNDERSTANDING-WCAG20-20160317/navigation-mechanisms-focus-order.html
[用語] 達成基準 2.4.3 フォーカス順序
順を追ってナビゲート キーボードを用いて (一つの要素から次へ) フォーカスを移動する際に、ウェブコンテンツ側で定義された順序に基づいて、フォーカス移動すること。
[まとめ] 達成基準 2.4.3 フォーカス順序
キーボード操作によるフォーカス移動が、ユーザーの予測と違わないようにしましょう。
✓基本は、ソースコードの情報提示順と、視覚的なページレイアウトが、意味的に合致していることです。
✓ Flexbox や CSS Grid Layout といった CSS 仕様で、order プロパティによる視覚的な並べ替えも容易にできますが、それによってフォーカス順序がユーザーの予測とずれていないか、十分に確認しましょう。
条件指定 (たとえばソートやフィルタリング) によって情報の提示順やレイアウトが変化する場合は、JavaScript で DOM を上書きするなどして、視覚的な表現とフォーカス順序を合致させましょう。
達成基準 2.4.4 リンクの目的 (コンテキスト内)
それぞれのリンクの目的が、リンクのテキスト単独で、又はリンクのテキストとプログラムによる解釈が可能なリンクのコンテキストから判断できる。ただし、リンクの目的がほとんどの利用者にとって曖昧な場合は除く。(レベル A)
達成基準 2.4.4 を理解する | WCAG 2.0解説書
https://waic.jp/docs/NOTE-UNDERSTANDING-WCAG20-20160317/navigation-mechanisms-refs.html
[用語] 達成基準 2.4.4 リンクの目的 (コンテキスト内)
プログラムによる解釈が可能なリンクのコンテキスト リンクの文脈が、適切な HTML のマークアップによって、機械的に類推可能であること。
ほとんどの利用者にとって曖昧 障害がない人も含むほとんどのユーザーにとって、リンクの意味が、実際にリンク先を開くまでわからないもの。(ユーザーにまったく馴染みのない言葉によるリンクラベルなど。)
[まとめ] 達成基準 2.4.4 リンクの目的 (コンテキスト内)
リンクラベルは具体的に、リンク先の内容が理解できるようにしましょう。
視覚的に冗長になりすぎてかえって見にくい、などの理由でリンクラベルを簡略化する場合は、前後の文脈が機械的に類推できるように、HTML をマークアップしましょう。 ✓リンクを含む段落 (<p> 要素) や箇条書き (<li> 要素)、その上位の見出し要素、データテーブルで
関連付けられた見出しセル (<th>) などから総合的に、リンクの目的が類推できること。
✓スクリーンリーダー利用者への配慮として、[Tab] キー操作によるフォーカスがリンクに当たった際に、リンクラベル自体に加えて aria-labelledby などで補足情報も同時に読み上げられるようにしておくのもよいでしょう。
ケーススタディ、お悩み相談
Anyone?
次回予告
• WCAG 2.0 (Level A) を読もう！ • 3.1.1 ページの言語
• 3.2.1 フォーカス時
• 3.2.2 入力時
• ケーススタディ、お悩み相談
スクリーンリーダー向けにページの言語設定をすること、フォーカス/入力に伴って利用者の予期せぬ形で状況を変化させないこと、を学びます。
To be continued…
