やらねば.com

aria-disabled 属性の動作検証

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

aria-disabled 属性の適用

aria-disabled 属性は HTML の disabled 属性が使えない場合にその代替として要素に aria-disabled="true" と付加する事で、スクリーンリーダーにそれが無効な要素である事を伝えます。
<button type="button" aria-disabled="true">無効なボタン</button>

aria-disabled 属性の対応状況

主要なブラウザ Edge、Chrome、Firefox であればスクリーンリーダー NVDA や PC-Talker で aria-disabled="true" が付加された要素にフォーカスが当たると「使用不能」のアナウンスや音声のピッチを変更して、それが無効な要素である事を知らせます。

iOS のスクリーンリーダー Voiceover と Safari でも、無効な要素である事を伝える情報が付加されます。

aria-disabled の動作確認

HTML の disabled 属性を持つ要素は Tab キーの移動ではスキップされフォーカスが当たりません。
一方、aria-disabled 属性が指定された要素は Tab キーの移動が可能で、使用不能の情報が伝えられるものの操作する事が可能です。
つまり、aria-disabled="true" を付加してもアクションが無効になる訳ではなく、無効にする為の別の方法を用意する必要があります。

以下は通常のボタンと disabled 属性、aria-disabled 属性をそれぞれ付加したものです。
Tab キーの移動では disabled 属性のボタンがスキップされ、aria-disabled 属性のボタンはスクリーンリーダーでは使用不能の情報を受け取るものの操作出来る事が分かります。