Re: 「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありません

とても勉強になった。aria- で始まる属性はなんなのかという基本的なところから、具体的なユースケースの話まで端的にまとまっていて、ウェブアクセシビリティへの理解が深まった。

ところで、参照先の記事が訂正を試みている『「disabled属性を使った要素はスクリーンリーダで読めなくなる」という誤解』について、実際の挙動を確認したくなったのでテストページを作って VoiceOver で読み上げさせてみた。

OS の言語設定が英語になっているので読み上げも英語になっているのと、スピーカーから出た音声をマイクで録音しているので音質が悪い。

以下のような結果となった。参照先の記事で説明されているとおり、スクリーンリーダーで disabled 属性のフォーム要素にフォーカスできるし、存在を検知できる。

通常のテキストフィールド
- スクリーンリーダーのフォーカスが当たると「カッ」という音が鳴る
- 「テキストを入力したければキーボードをタイプせよ」という音声ガイダンスが流れる
disabled 属性がついたテキストフィールド
- スクリーンリーダーのフォーカスが当たっても音が鳴らない
- 「This item is dimmed.（この要素は見えづらい）」という音声ガイダンスが流れる
- 「テキストを入力したければ〜」という音声ガイダンスは流れない（キー入力を受け付けない）
aria-disabled="true" 属性がついたテキストフィールド
- スクリーンリーダーのフォーカスが当たると「カッ」という音が鳴る
- 「This item is dimmed.（この要素は見えづらい）」という音声ガイダンスが流れる
- 「テキストを入力したければ〜」という音声ガイダンスは流れない（しかしキー入力を受け付ける）
通常のボタン
- スクリーンリーダーのフォーカスが当たると「カッ」という音が鳴る
- 「ボタンをクリックしたければ Control-Option-Space を押せ」という音声ガイダンスが流れる
disabled 属性がついたボタン
- スクリーンリーダーのフォーカスが当たっても音が鳴らない
- 「This item is dimmed.（この要素は見えづらい）」という音声ガイダンスが流れる
- 「ボタンをクリックしたければ〜」という音声ガイダンスは流れない（クリックできない）
aria-disabled="true" 属性がついたボタン
- スクリーンリーダーのフォーカスが当たると「カッ」という音が鳴る
- 「This item is dimmed.（この要素は見えづらい）」という音声ガイダンスが流れる
- 「ボタンをクリックしたければ〜」という音声ガイダンスは流れない（しかしクリックできる）

面白い発見として、使用できる（操作を受け付ける）フォーム要素にフォーカスが当たると VoiceOver は「カッ」という音を鳴らして合図する。一方、disabled でも aria-disabled="true" でも dimmed とアナウンスする。しかし aria-disabled="true" のほうはブラウザ標準のスタイルだと通常のフォーム要素と見た目は同じ。VoiceOver は aria-disabled 属性を認識して disabled っぽい状態であることをアナウンスするが、スクリーンリーダーのユーザーは「カッ」という音の有無でそれが disabled なのか aria-disabled="true" なのか判別できる（dimmed & 「カッ」無し = aria-disabled である、という事前知識が必要だが）。

ということで、参照先の記事で説明されているとおり、「disabled 属性を使うとスクリーンリーダーの利用者が要素の存在に気づけなくなる」という主張は誤りであることがわかった。

......と、参照先の記事で端的に言及済みの内容をわざわざ確認して満足感に浸っていたら、もっと突っ込んだ内容の解説記事もあった（記事内でリンクされていたけど見逃していた）。

qiita.com

StackOverflow にも似たようなのがあった。

stackoverflow.com