キーボードでもWebサイトを使いやすく ～「Edge」チームが「フォーカスグループ」を発表

デザインが複雑になるにつれ、キーボードナビゲーションを十分に考慮しないWebページが増えており、操作性の低下が懸念されている

　「Microsoft Edge」の開発チームは3月5日（米国時間）、キーボードナビゲーションを管理する仕様「フォーカスグループ」（focusgroup）を発表した。「Edge」のベースとなっている「Chromium」プロジェクトにも実装されており、将来的にはWeb標準として広く普及することが期待されている。

　Webページは基本的にキーボードでも操作できるようになっており、マウスに頼らなくても、［Tab］キーでリンク間を移動したり、矢印キーでページをスクロールしたりできる。しかし、多くのWebページでは以下の理由で快適に利用できるとはいいがたいのが現状だ。

• 「tabindex」が設定されていなかったり、誤って設定されている
• フォーカスを正しい要素に移動させる関数『focus()』を呼び忘れている
• 矢印キーのデフォルト動作を適切に制御できていない
• 非表示・無効化された要素にフォーカスが移ってしまう
• 期待されるキーボード操作パターンと異なる挙動を独自に実装している
• テキスト方向（LTR/RTL）への対応不足
• 再フォーカス時に前回選択した要素が復元されない

　メニューやタブ、ツールバーといったウィジェットの登場でWebページのレイアウトは複雑化する一方だが、その多くはマウスで操作することが前提となっている。キーボード操作が十分に考慮されていないので、マウスが故障した際に使えなかったり、身体にハンデのあるユーザーにとって優しくない設計になってしまっているわけだ。こうした問題を解決するJavaScriptライブラリもあるが、メンテナンスすべきコードが増え、Webサイトのパフォーマンスにも悪影響が出ることもある。

　そこで考案されたのが「フォーカスグループ」だ。「フォーカスグループ」には典型的なUI要素やその挙動（タブリスト、メニュー、ツールバー、ブロック・インライン、折り返しの可否など）が定義済みで、HTMLに『focusgroup="tablist inline wrap"』などと指定するだけで複雑なフォーカス制御を定義できる。その動作はアクセシビリティ標準「ARIA」で定められた指針（ARIA Authoring Practices）に準拠しており、一貫性のある操作性が得られる。非表示・無効化要素が自動でスキップされる点やシャドウDOMでも動作する点、ライブラリの読み込みが不要でパフォーマンス低下の懸念があまりない点もメリットといえるだろう。

　「フォーカスグループ」は現在、早期テストとして「Edge」などで試せる。ローカルでテストしたい場合は試験フラグ（about://flags/#enable-experimental-web-platform-features）を有効にするか、起動フラグ（--enable-blink-features=Focusgroup）を付けてWebブラウザーを起動すればよい。