aria-current 属性の動作検証
WAI-ARIA で定義されている aria-current 属性。
スクリーンリーダーやブラウザーでどの様な挙動を取るのかの検証と、このページを使って動作の確認が出来ます。
aria-current 属性の対応状況
パンくずリストで主に使われる属性ですが、NVDA、PC-Talker 10、iOS VoiceOver では、aria-current が適用されると、テキストの前後に「現在のページ」と情報が付加されます。
iOS 13.2 VoiceOver と Safari では、li 要素や span 要素では動作せず、a 要素に属性を付加しないと動作しませんでした。
現在のページにリンクを張るのはスマートでは無い気がするのですが、今後変更は有るのでしょうか。
※ 実際の動作はスクリーンリーダーとブラウザーの種類やバージョン、組み合わせで異なります
aria-current の動作確認
スクリーンリーダーと任意のブラウザーでこのページを開き、以下のパンくずリストの「このページ」の要素にカーソルのフォーカスを当てると、aria-current 属性が適用される場合「このページ」の前後に「現在のページ」等と読み上げが付加されます。
li 要素
<li aria-current="page">span 要素
<span aria-current="page">a 要素
<a href="http://example.com" aria-current="page">