水無月ばけらのえび日記

bakera.jp > 水無月ばけらのえび日記 > 2012年のえび日記 > 2012年3月 > 2012年3月19日(月曜日)

2012年3月19日(月曜日)

スキップリンクの議論: 前提まとめ

公開: 2012年3月21日22時20分頃

スキップリンクの話が盛り上がったので、情報を整理してみます。「キヤノンはなぜ達成等級「A」を満たせなかったのか」「スキップリンクにまつわるいくつかの議論」の続きです。

ブロックスキップの達成基準

まず前提の話から。WCAG2.0の2.4.1には "Bypass Blocks" という等級Aの基準があります。

2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)

以上、WCAG2.0 2.4.1 より

JIS X 8341-3:2010 では以下のように訳されています。

7.2.4.1 ブロックスキップに関する達成基準

複数のウェブページ上で繰り返されているコンテンツのブロックをスキップできるメカニズムが利用可能でなければならない。

注記 この達成基準は，等級A の達成基準である。

以上、JIS X 8341-3:2010 7.2.4.1 より

これだけだと分かりにくいですが、以下でもう少し細かく解説されています。

スキップリンク

ブロックスキップを達成するための実装方法はいくつか提示されていますが、その筆頭に挙げられているのが以下のテクニックです。

「本文へ」などのリンクを設けて、メインコンテンツの開始位置までフォーカスを移動させられるようにするという手法です。

G123にもブロックスキップのリンクを設ける手法が挙げられています。

こちらは本文へ移動するのではなく、ナビゲーションの直前にリンクを設けてナビゲーションのすぐ後ろまで飛ぶようなタイプのものです。

さらにG124にも、G1と似たようなリンクの手法があります。

これは「本文へ」単独ではなくて、いくつかのブロックへのリンクを列挙するタイプのものですね。

これらをまとめて「スキップリンク」と呼んでいます。ただし、G123やG124のパターンは、G1と比べるとマイナーで、使われるケースはことが少なめです。断りなしに「スキップリンク」と言った場合、特にG1をイメージしている場合が多いです。

スキップリンクの目的と要件

スキップリンクの目的は、キーボードの利用者がナビゲーション部分を飛ばして、すぐにメインコンテンツにアクセスできるようにすることです。

スクリーンリーダー専用の機能ではない、という点に注意が必要です。G1の説明には以下のような注記があります。

Note: It is preferable for links to be visible at all times, since users navigating via the keyboard include switch users, those using techniques that generate keyboard strokes slowly, screen magnification software users, screen reader users working with sighted colleagues, keyboard only users and those navigating using voice recognition software.

以上、G1: Adding a link at the top of each page that goes directly to the main content area より

ここでは、以下のようなケースがあるとしています。

  • キーボードやスイッチを利用し、ストロークを遅くしている
  • 画面拡大ソフトウェアを利用している
  • スクリーンリーダーの利用者が、目の見える人と一緒に作業している
  • キーボードだけで操作している
  • 音声認識ソフトでナビゲーションしている (音声の場合、キーと違って連打が大変)

こういった場合、スキップリンクが視覚的に見えるものになっていなければ利用することができません。

従来のサイトには、透明な画像をスキップリンクにしたり、何らかの方法でスキップリンクを視覚的に隠すといった処理をしているものがあります。そのようなケースはG1の実装の要件を満たしていないことになります。

なお、この注記には続きがあります。

However, does not require that they be visible when they do not have focus, and links that are visible only when they have focus can meet this success criterion.

以上、G1: Adding a link at the top of each page that goes directly to the main content area より

フォーカスを受け取っていないときは見えていなくても良い、ということになっています。つまり、最初は見えていないが、tabキーを押してフォーカスが移るとひょっこり現れる、という実装はOKです。

※この部分は後から追記された部分で、日本語訳には追記部分がありません。

スキップリンク以外の手法

2.4.1を満たすための手法はスキップリンクだけではありません。HTML文書において、2.4.1を満たす実装方法には以下のようなものがあります。

コンテンツの各セクションに見出しをつける

見出しをつけるという方法は非常に分かりやすいと思います。現在では、ほとんどのスクリーンリーダーが何らかの見出しジャンプ機能を持っていて、見出しの一覧を出したり、次の見出しに飛んだりすることができます。

逆に、ビジュアルブラウザは見出しジャンプ機能にほとんど対応していません。スクリーンリーダーの利用者は活用できますが、そうでない人は活用することが難しい実装方法です。

map要素を使ってリンクをグループ化する

ナビゲーション部分をグループ化するという話なのですが、まさかのmap要素……。今ならnav要素が例として挙げられるかもしれません。

以前はul要素も例として挙げられていたのですが、リストをスキップできないスクリーンリーダーが多いと判断したのか、今はmap要素だけの例になっているようです。もっとも、map要素をスキップできるスクリーンリーダーも少ないのですが。

いずれも、ビジュアルブラウザはほとんど対応していません。一部のスクリーンリーダーでしか活用できない実装方法です。

フレームを使ってブロックをスキップできるようにする

まさかのframe要素。

ブラウザによってはフレームを切り替えるキーボード操作ができない場合があったりしますし、フレームのtitle属性を読み上げられるスクリーンリーダーも少ないです。そもそも、ブロックをスキップできるようにするためにframeを使う人はほとんどいないでしょう。

スクリプトで開閉するメニューを作る

メニューが開閉できるようになっていれば、閉じてスキップできるという発想。

実際にスキップできるかどうかは実装方法によりますが、アクセシビリティ目的でこのような実装をするケースは少ないだろうと思います。

スキップリンク 前提のまとめ

ここまでに見てきたことをまとめると、以下のようになります。

  • WCAG2.0 2.4.1には"Bypass Blocks"という等級Aの基準がある
  • その実装方法の一つがスキップリンク
  • ビジュアルブラウザの利用者もスキップリンクを利用できるように、見えるようになっている必要がある
  • スキップリンク以外の実装方法もあるが、ビジュアルブラウザで利用できるものはほとんどない

以上のことから、WCAG2.0の等級Aを満たすためには、スキップリンクを設けることがほぼ必須となっています。

ここまでが議論の前提となる話です。

長くなったので続きます……。

関連する話題: Web / アクセシビリティ / スキップリンク

最近の日記

関わった本など