問題タブ [web-accessibility]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 矢印ボタン付きの aria ロール タブ
WCAG には、Tabpanels を使用してタブを実装するための優れたデザイン パターンがあります。
「ロービング タブ インデックス」とキーボードの矢印キーを使用してタブ間を循環します。これはうまく機能しますが、最近、一度に 1 つのタブのみを表示し、タブを循環するための「前」と「次」の矢印ボタンを持つタブ/タブパネル ウィジェットを作成するリクエストを受け取りました。
視覚的には、矢印ボタンはアクティブなタブの両側にあります。ただし、タブ オーダーに関しては、WCAG デザイン パターンは、アクティブなタブに関連付けられたタブパネルがタブ オーダーに従う必要があることを明確に示しています。
これらの新しい矢印ナビゲーション ボタンをウィジェットに追加することは、タブ オーダーがタブ/タブパネルの前または後にあることを保証する限り、アクセシビリティ ルールに違反しますか? キーボード機能は現在のままでよいと思います（矢印キーを使用してタブ間を切り替えます）