aria-flowto 属性の動作検証

WAI-ARIA で定義されている aria-flowto 属性。
スクリーンリーダーやブラウザーでどの様な挙動を取るのかの検証と、このページを使って動作の確認が出来ます。

aria-flowto 属性の適用

aria-flowto 属性は他の要素の ID を指定(aria-flowto="対象 ID")し、その要素へ読み上げを渡します。
文頭で文末の要素の ID を指定すれば、文中のテキストを飛び越えて文末に読み上げを渡したり、文末から文中の指定した要素に読み上げを渡したりといった事が出来ます。

aria-flowto 属性の対応状況

PC-Talker 10 では aria-flowto が指定されている要素にフォーカスが当たると「次の読み上げ順序 指定あり」と補足説明がアナウンスされます。
ここで PC-Talker 10 の独自ナビゲーションキーの「-」を押すと、指定した ID を持つ要素へジャンプします。
しかし、aria-flowto 属性を利用しているサイトは少なく、このナビゲーションキーを利用する機会も無いので、迷わずに操作出来るユーザーは少数かと思われます。

NVDA Version 2020.2jp では aria-flowto に対応したそれらしきショートカットキーは見つけられませんでした。
aria-flowto 属性を実装しても思い通りの動作は期待出来ないかもしれません。

※ 実際の動作はスクリーンリーダーとブラウザーの種類やバージョン、組み合わせで異なります

aria-flowto の動作確認

スクリーンリーダーと任意のブラウザーでこのページを開き、以下の各要素にキー操作でフォーカスを当て、aria-flowto 属性に対応した操作を行うと、要素を 1 → 3 → 2 → 4 の順序で読み上げます。