1. ウェブディレクターのための
Web A11Y 勉強会
#08 (2018-01-09)

2. 自己紹介
@caztcha
ウェブユーザビリティ / アクセシビリティ / 情報アーキテクチャ (IA)
HCD-Net 認定 人間中心設計専門家
ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳WG
https://website-usability.info

3. 前回までのあらすじ
• ウェブアクセシビリティとは？
• ウェブアクセシビリティはなぜ必要なの？
• 支援技術を知ろう
• アクセシビリティ検証ツールいろいろ
• スクリーンリーダーを体験しよう!
• WCAG 2.0 の概略
• WCAG 2.0 (Level A) を読もう！

4. 今日のメニュー
• WCAG 2.0 (Level A) を読もう！
• 2.4.1 ブロックスキップ
• 2.4.2 ページタイトル
• 2.4.3 フォーカス順序
• 2.4.4 リンクの目的 (コンテキスト内)
• ケーススタディ、お悩み相談
利用者がナビゲートしたり、
コンテンツを探し出したり
するための支援について学
びます。

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

6. WCAG 2.0 の基本構成
おさらい
原則 (4)
ガイドライン (12)
達成基準 (61)
このうちレベル「A」のみが
本勉強会の対象です。
1. 知覚可能 (Perceivable)
2. 操作可能 (Operable)
3. 理解可能 (Understandable)
4. 堅牢 (Robust)

7. 原則 2. 操作可能 (Operable)
ユーザインタフェース コンポーネント及びナビゲーションは操作
可能でなければならない。
おさらい

8. ガイドライン 2.4 ナビゲーション可能
利用者がナビゲートしたり、コンテンツを探し出したり、現在
位置を確認したりすることを手助けする手段を提供すること。

9. 達成基準 2.4.1
ブロックスキップ
複数のウェブページ上で繰り返されているコンテンツのブロックをスキップ
するメカニズムが利用できる。 (レベル A)
達成基準 2.4.1 を理解する | WCAG 2.0解説書
https://waic.jp/docs/NOTE-UNDERSTANDING-WCAG20-20160317/navigation-mechanisms-skip.html

10. [用語] 達成基準 2.4.1 ブロックスキップ
複数のウェブページ上で繰り返されているコンテンツの
ブロック
ナビゲーションメニューなど、サイト全体で共通の UI のブロック (塊) のこと。

11. [まとめ] 達成基準 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”,…

12. [ディスカッション] 達成基準 2.4.1 ブロックスキップ
メインコンテンツにジャンプするページ内リンクって、
必要だと思いますか？

13. http://matatk.agrip.org.uk/landmarks/

14. 達成基準 2.4.2
ページタイトル
ウェブページには、主題又は目的を説明したタイトルがある。 (レベル A)
達成基準 2.4.2 を理解する | WCAG 2.0解説書
https://waic.jp/docs/NOTE-UNDERSTANDING-WCAG20-20160317/navigation-mechanisms-title.html

15. [用語] 達成基準 2.4.2 ページタイトル
(特にありません)

16. [まとめ] 達成基準 2.4.2 ページタイトル
<title> 要素に、ページごとのユニークなタイトルを付けましょう。
検索エンジンの SERPs、ソーシャルメディアでのシェア、ブラウザのタブ、など様々な
シーンで流用されることを想定し、<title> 要素ではページの主題 (多くの場合、<h1> と
同じ記述) をまず書いたうえで、その後にサイト名を書く形がよいでしょう。

17. [ディスカッション] 達成基準 2.4.2 ページタイトル
<title> 要素には、このページのサイト内における位置
づけを、どの程度詳細に記述すればよいでしょうか？
(階層構造を正しく title に記述すべき？)

18. 達成基準 2.4.3
フォーカス順序
ウェブページが順を追ってナビゲートできて、そのナビゲーション順が意味
又は操作に影響を及ぼす場合、フォーカス可能なコンポーネントは、意味及
び操作性を損なわない順序でフォーカスを受け取る。(レベル A)
達成基準 2.4.3 を理解する | WCAG 2.0解説書
https://waic.jp/docs/NOTE-UNDERSTANDING-WCAG20-20160317/navigation-mechanisms-focus-order.html

19. [用語] 達成基準 2.4.3 フォーカス順序
順を追ってナビゲート
キーボードを用いて (一つの要素から次へ) フォーカスを移動する際に、ウェブコン
テンツ側で定義された順序に基づいて、フォーカス移動すること。

20. [まとめ] 達成基準 2.4.3 フォーカス順序
キーボード操作によるフォーカス移動が、ユーザーの予測と違わないようにしましょう。
✓ 基本は、ソースコードの情報提示順と、視覚的なページレイアウトが、意味的に合致している
ことです。
✓ Flexbox や CSS Grid Layout といった CSS 仕様で、order プロパティによる視覚的な並べ
替えも容易にできますが、それによってフォーカス順序がユーザーの予測とずれていないか、
十分に確認しましょう。
条件指定 (たとえばソートやフィルタリング) によって情報の提示順やレイアウトが変化
する場合は、JavaScript で DOM を上書きするなどして、視覚的な表現とフォーカス順
序を合致させましょう。

21. 達成基準 2.4.4
リンクの目的 (コンテキスト内)
それぞれのリンクの目的が、リンクのテキスト単独で、又はリンクのテキスト
とプログラムによる解釈が可能なリンクのコンテキストから判断できる。ただ
し、リンクの目的がほとんどの利用者にとって曖昧な場合は除く。(レベル A)
達成基準 2.4.4 を理解する | WCAG 2.0解説書
https://waic.jp/docs/NOTE-UNDERSTANDING-WCAG20-20160317/navigation-mechanisms-refs.html

22. [用語] 達成基準 2.4.4 リンクの目的 (コンテキスト内)
プログラムによる解釈が可能なリンクのコンテキスト
リンクの文脈が、適切な HTML のマークアップによって、機械的に類推可能である
こと。
ほとんどの利用者にとって曖昧
障害がない人も含むほとんどのユーザーにとって、リンクの意味が、実際にリンク
先を開くまでわからないもの。(ユーザーにまったく馴染みのない言葉によるリンク
ラベルなど。)

23. [まとめ] 達成基準 2.4.4 リンクの目的 (コンテキスト内)
リンクラベルは具体的に、リンク先の内容が理解できるようにしましょう。
視覚的に冗長になりすぎてかえって見にくい、などの理由でリンクラベルを簡略化する場合
は、前後の文脈が機械的に類推できるように、HTML をマークアップしましょう。
✓ リンクを含む段落 (<p> 要素) や箇条書き (<li> 要素)、その上位の見出し要素、データテーブルで
関連付けられた見出しセル (<th>) などから総合的に、リンクの目的が類推できること。
✓ スクリーンリーダー利用者への配慮として、[Tab] キー操作によるフォーカスがリンクに当たった
際に、リンクラベル自体に加えて aria-labelledby などで補足情報も同時に読み上げられるよう
にしておくのもよいでしょう。

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

25. Anyone?

26. 次回予告

27. • WCAG 2.0 (Level A) を読もう！
• 3.1.1 ページの言語
• 3.2.1 フォーカス時
• 3.2.2 入力時
• ケーススタディ、お悩み相談
スクリーンリーダー向けにページ
の言語設定をすること、フォー
カス/入力に伴って利用者の予期
せぬ形で状況を変化させないこ
と、を学びます。

28. To be continued…