scroll-marker-group プロパティが拡張され、以下のモードがサポートされるようになりました。
- 'links' - 生成される::scroll-marker-groupは「links」モードで動作し、ナビゲーションリストのように機能します。省略した場合、これがデフォルトモードとなります。
- 'tabs' - 生成された ::scroll-marker-group は「tabs」モードで動作し、タブリストのように機能します。
各モードでは、WAI-ARIA パターンに従って、::scroll-marker-group および ::scroll-markers のフォーカス順序とアクセシビリティ動作が変更されます。
詳細はこちら:
リンクモード(デフォルト)
このモードは、標準的なナビゲーションランドマークとフラグメントアンカーを組み合わせたものを模倣するように設計されています。
意味役割
::scroll-marker-group はナビゲーションの役割を担い、::scroll-marker 要素はリンクの役割を担います。これは、<nav> + <a> という構造パターンに完全に対応しています。
キーボードナビゲーション
すべての ::scroll-marker 要素は連続したタブストップであり、標準のアンカーリンクのリストのように機能します。
影響を受けない標的
元の要素は特定の役割に強制されることはなく、文書の自然な意味構造はそのまま維持される。
活性化フォーカス管理
リンクマーカーがアクティブになると、シーケンシャルフォーカスナビゲーションの開始点がターゲット要素(元の要素)に設定され、マーカーからフォーカスが失われます。これは、標準的な内部リンクである<a href="#target">をクリックしたときのネイティブな動作を模倣しています。
タブモード
このモードは、タブパターンをネイティブに再現するように設計されており、タブ付きカルーセルパターンのインタラクティブな基盤として機能します。
意味役割
::scroll-marker-group には暗黙的に tablist ロールが割り当てられ、::scroll-marker 要素は tab ロールとして機能し、それらの元となる要素には tabpanel ロールが割り当てられます。これは、必要な WAI-ARIA タブ構造を反映しています。
キーボードナビゲーション(ロービングタブインデックス)
これは、標準的な手順で説明されている複雑なキーボード操作に準拠しています。アクティブな::scroll-markerのみがタブストップとして機能します。ユーザーは矢印キーを使用してフォーカスグループ内を移動(マーカー間を切り替え)するため、20個のカルーセルドットをタブキーで移動しなければならない「タブトラップ」を回避できます。
焦点範囲管理
マーカーはフォーカスナビゲーションスコープの所有者として機能します。アクティブなマーカーからTabキーを押すと、フォーカスがアクティブなタブパネルの内容に直接移動し、タブインターフェースの仕様に準拠します。
木の剪定
非アクティブなタブのコンテンツは、アクセシビリティツリーから明示的に非表示になります。これは、非アクティブなタブパネルにおける aria-hidden="true" または inert の期待される動作を模倣しており、開発者が状態変更を手動でスクリプト化する手間を省きます。
活性化の焦点
マーカーがアクティブになると、フォーカスはマーカーに保持されます。これは、標準的なタブの動作とまったく同じです。