一般ブラウザにおけるセクション間の移動 (キーボード操作)

Web コンテンツは、W3C (World Wide Web Consortium) が策定する Web 標準仕様に基づいて、「内容ごとの塊 (セクション)」を明示的にマークアップすることができます。スクリーンリーダー (主に視覚障害者が使用する、音声読み上げソフト) を使っている場合は、キーボード操作 (ショートカットキー) によって、各セクションの冒頭部分に容易にジャンプすることができます。

ところが意外なことに、一般的なブラウザ (支援技術ではないブラウザ、ここでは Internet Explorer、Firefox、Google Chrome、Safari、Opera を指します) では、キーボード操作によるセクション間のジャンプ移動ができません。これらのブラウザ (以下、便宜的に「一般ブラウザ」といいます) のユーザーはマウスを使うことが多いため、キーボード操作によるブラウジングはさほど重要視されていないのかもしれません。その一方で、目が見えて、かつマウスではなくキーボードによる操作のほうが好都合なユーザーも少なくなく (たとえば、手指などの障害/怪我を持っていたり、ロービジョンであったり)、こうしたユーザーにとって現状は不便だと言えます。特にマルチカラムで情報量が膨大な Web ページの場合、読みたいコンテンツにアクセス (リンク) するために [Tab] キーを何度も何度も押さなければならない... という状況に陥りがちです。

この記事では、一般ブラウザにも対応してもらえたら嬉しいキーボード操作によるセクション間移動について、(スクリーンリーダーとも比較しつつ) 考えてみたいと思います。

見出し要素間の移動

Web コンテンツの見出しは、HTML の <h1>、<h2>、<h3>...要素でマークアップします。大半のスクリーンリーダーには、見出しナビゲーション機能 (<h1>、<h2>、<h3>...でマークアップされた箇所だけを辿って読み上げる機能) が既に用意されています。一方、ほとんどの一般ブラウザには、現時点では見出しナビゲーションの機能は用意されていません。

ひとつだけ、Opera は例外です。[S] キーを押すと次の (下の) 見出しに、[W] キーを押すと前の (上の) 見出しに、それぞれジャンプすることができます (こうして見出しにフォーカスを当てた状態で、 [Shift]+上下矢印キーを押すと、そのフォーカス位置を起点にして近隣のリンク箇所にフォーカスを移動することができます)。このキー操作をするには事前設定が必要で、Opera メニューの「設定」画面で行ないます。「詳細設定」タブの「ショートカット」の中に「キーボード設定」というパラメーターがあるので、そこで「Opera 9.2 Compatible」を選びます。

Opera の設定画面 (ショートカットのキーボード設定)

WAI-ARIA ランドマーク間の移動

アクセシビリティに特化した Web 標準仕様として WAI-ARIA があります。もともと RIA (Rich Internet Applications) をアクセシブルにするために策定された仕様ですが、この中の「ランドマーク (Landmark Roles)」は、リッチな UI を持たない一般的な Web サイトでも採り入れることができます (<div> などの要素に「role="xxx"」属性を記述することで、セマンティックにセクションの種類を明示するものです)。

スクリーンリーダーには、キーボード操作によってセクション (ランドマーク) 間をジャンプ移動できる機能が備わっているものが多いです。無料のスクリーンリーダー「NVDA (Windows PC)」や「VoiceOver (iOS)」も、ランドマーク間の移動に対応しています (具体的な使用方法については、記事「WAI-ARIA のランドマーク (Landmark Roles) を設置する」の「支援技術での利用例 (スクリーンリーダーで試してみる)」をご参照ください)。

一方、一般ブラウザには、現時点ではランドマーク間をキーボード操作で移動できる機能は備わっていません。

HTML5 セクション間の移動

W3C が策定する最新の HTML 仕様「HTML5」を用いると、<header>、<nav>、<aside>、<footer>...といった要素によって、ドキュメント (ページ) 内のセクションをセマンティックに明示することができます。

現時点では、HTML5 形式でマークアップされたセクションをそのまま認識できるスクリーンリーダーは無く、同等の WAI-ARIA ランドマークを併記するのが現実的のようです (<header role="banner">、<nav role="navigation">、<aside role="complementary">、<footer role="contentinfo">、といった具合)。ちなみに「NVDA」は (Firefox と一緒に使っている場合)、WAI-ARIA ランドマークの併記が無くても HTML5 形式のセクションを一応は認識してくれるようですが、便宜的に同等のランドマークと見做して解釈するようです。たとえば <nav> 要素は「ナビゲーション」として (role="navigation" と見做す)、<aside> 要素は「補足情報」として (role="complementary" と見做す)、>footer< 要素は「コンテンツ情報」として (role="contentinfo" と見做す)、それぞれユーザーに提示されます。

一般ブラウザでも、現時点では、HTML5 形式のセクション間をキーボード操作で移動できる機能は、備わっていません。

一般ブラウザに期待したいセクション間移動の挙動

キーボード操作によるセクション間の移動について、見出し要素、WAI-ARIA ランドマーク、HTML5 形式のセクション、という3つの観点で見たわけですが、スクリーンリーダーはそれなりに対応できていても、一般ブラウザはまったくと言ってよいほど対応できていないことがわかります。アクセシビリティは視覚障害者だけに対する配慮ではないので、一般ブラウザにおいてもキーボード操作によるセクション間移動が可能になることによって、アクセシビリティの裾野が大きく広がると思います。

その際、一般ブラウザに具体的に期待したい挙動としては、以下が考えられます。

  • ショートカットキーを押すことで、順番に、セクションの冒頭や見出しにフォーカスを移動することができる。
  • アウトライン (セクションや見出しの一覧) を別途表示して、任意の場所に一足飛びで移動することができる。

上記の機能を実際に一般ブラウザに持たせるにあたっては、スクリーンリーダーとの様々なコンフリクトが課題になることが予想されます。使用可能なショートカットキーの組み合わせはもちろんですが、「一般ブラウザでの表示内容をスクリーンリーダーで読み上げる」という使いかたをする場合、ユーザーはどちらのショートカットキーを選んでセクション間を移動するべきか、という問題も出てきそうです。解決策として、一般ブラウザ側のキーボード操作 (ショートカットキーの機能) はオプションにする (またはベンダー公式のアドオンにしてユーザーの任意で提供する) という形も考えられますね。