aria-label 属性の動作検証

WAI-ARIA で定義されている aria-label 属性。
スクリーンリーダーユーザーに対してとても有用な技術だと思います。
しかし、実装するに当たってスクリーンリーダーやブラウザー、またはその組み合わせによって挙動が異なり、どう実装するのが良いか悩むところです。
現状でスクリーンリーダーやブラウザーでどの様な挙動を取るのかの検証と、このページを使って動作の確認が出来ます。

aria-label 属性の対応状況

NVDA、PC-Talker 10、iOS VoiceOver では、aria-label が適用されると、テキストが aria-label="" で指定されたテキストで上書きされます。
対し Windows ナレーターではラベルが付加される形でテキストと共に読み上げられます。
この辺りで既に挙動が違うのですが、更にブラウザーとの組み合わせで適用される要素も異なる為、実装するのをためらってしまいます。

安定して動作してくれるのは button 要素。
a 要素も比較的上手く動作する様です。
i 要素はアイコンフォントで使用されているので、アイコンフォントで何らかの意味を示したい場合は有効だと思うのですが、適用範囲は狭い様です。

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

aria-label の動作確認

スクリーンリーダーと任意のブラウザーでこのページを開き、以下の各要素の「テスト」の上にマウスカーソルを乗せる、またはキー操作でフォーカスを当てると、aria-label 属性が適用される場合「テスト」の読み上げが「ラベル」に置き換わるか付加されます。