スクリーンリーダーを併用しなくても見出しやランドマークへの移動 (キーボード操作) を可能にする「Skip To」

以前、「一般ブラウザにおけるセクション間の移動 (キーボード操作)」という記事を書きましたが、一般ブラウザ (Internet Explorer、Firefox、Google Chrome、Safari など) でスクリーンリーダーを併用しない場合、キーボード操作によって見出しや WAI-ARIA ランドマーク (Landmark Roles) にジャンプ移動することができない、というお話をしました。

これに対して、決裁サービスを展開している「PayPal」のアクセシビリティチームが、実験的に「Skip To」というプログラムを開発/公開しているのを、つい先日、知りました。Web サイト (ページ) にこのプログラムを仕込むことで、見出しやランドマークを一覧表示でき、任意の見出し/ランドマークにジャンプすることができる、というものです。

ブラウザの種類を問わずキーボード操作で見出し/ランドマークに移動できる

Firefox の場合、アドオン (機能拡張) によって、見出し要素間/ランドマーク間をキーボード操作で移動することが可能です (ご参考 : Firefox におけるキーボード操作によるセクション間の移動)。一方、今回ご紹介する「Skip To」を用いると、ブラウザの種類を問わず、スクリーンリーダーを併用しなくても、キーボード操作によって任意の見出し/ランドマークに移動することができるようになります。

目が見えて、かつマウスではなくキーボードによる操作のほうが好都合なユーザー (たとえば、手指に障害/怪我を持っていたり、ロービジョンであったり) にとっては、「Skip To」のようなソリューションは、とても便利だと思います。もちろん (アクセシビリティ専門のチームが開発しているだけあって)「Skip To」はスクリーンリーダーによる音声読み上げもしっかりサポートされています。

「Skip To」を実装した Web ページでの実際の挙動

「Skip To」は、Web ページのソースコードに <script> 要素を書く (JavaScript を読み込ませる) ことで実装することができますが、WordPress であればプラグインとしても提供されているので、気軽に試してみることができます。

「Skip To」を実装した Web ページの読み込み後、[Tab] キーでフォーカスを移動させようとすると、まずはじめに「Skip To」が起動します (フォーカスが当たり、表示されます)。

ページの読み込み後、[Tab] キーを押すと、「Skip To」が起動する。
「Skip To」の起動

この状態で、[Enter] キーを押すと、WAI-ARIA ランドマーク (Landmark Roles) と見出しが、リスト表示されます。なお、 [Enter] キーではなく [Tab] キーを押すと、「Skip To」は閉じられ、次のフォーカス可能な位置 (リンクなど) にフォーカスが移動します。

[Enter] キーを押すと、ランドマークと見出しがリスト表示される。
「Skip To」のリスト表示

リスト上で上下矢印キーを押すと、フォーカスが移動し、任意のランドマーク/見出しを選択することができます。選択後、[Enter] キーを押すと、そのランドマーク/見出しにジャンプします。

リスト上で上下矢印キーを押すと、任意のランドマーク/見出しを選択できる。
「Skip To」におけるランドマーク/見出しの選択

ランドマーク/見出しにジャンプした後、[Tab] キーを押すと、そのランドマーク/見出しを起点として、次のフォーカス可能な位置 (リンクなど) にフォーカスを移動させることができます。

なお、WordPress プラグイン版の「Skip To」を使用している場合は、「どのレベルの見出しを表示させるか」「どの種類のランドマークを表示させるか」の設定が、WordPress の管理画面で容易にできます。

WordPress の管理画面で、表示させる見出しレベルやランドマークの種類を容易に設定できる。
WordPress 管理画面における「Skip To」の設定画面

「Skip To」を試してみての所感

本来であれば、「Skip To」のようなソリューションは、Web サイト (ページ) 側に仕込むべきものではなく、ユーザーエージェント (ブラウザ) 側で持つべき機能かもしれませんが、ブラウザの種類を問わず、スクリーンリーダーを併用しなくても、見出しやランドマークへの移動 (キーボード操作) が付加機能として可能になる、という点でとても面白いと思いました。実際の挙動も、プログレッシブエンハンスメント (Progressive Enhancement) に則って「控えめな JavaScript (Unobtrusive JavaScript)」になっていて好感が持てます (Web ページの読み込み後、[Tab] キーを押すと「Skip To」が起動しますが、「Skip To」起動中の操作においては [Tab] キーは一切使われず、次に [Tab] キーを押せばすぐに「Skip To」を閉じる仕組みになっているので、邪魔な印象を覚えません)。

欲を言えば、ランドマークと見出しの親子関係や、各見出しレベルの親子関係が明示的だとよいな、と思いました。また、各ランドマークが日本語で表記されていたら (私たちのような日本語利用者にとっては) より利便性が上がる気がします。このあたりは、今後、この手のソリューションが派生する中で、ブラッシュアップされることを期待したいところです。