ボタンの非活性化がらみの誤解と目的と手段の階層構造

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

の内容を図解してみた。

この記事に対して、「この記事はアクセシビリティのことを考えていない内容である」といった誤解にもとづいた（と見られる）コメントが付いたが、このような目的と手段の階層構造を脳内にイメージできないことが原因だろう。

また、「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」あるいは「disabled はイケてない。本場アメリカでは aria-disabled がもっぱら使われるようになっている」というのは、単純化しすぎた誤った二分論的言明であり、「目的とされていること（disabled / aria-disabled から見た「ボタンの非活性化」）が、実は手段である」という視点の欠如ではないかと思う。

手段として「ボタンを操作不可にする」ことが必要な目的は他にもあるが、省略

https://scrapbox.io/files/66e1a7b797e295001ca6051f.png

ボタン非活性化にまつわる目的→手段の階層

「入力内容の問題を早めに教えてあげる」ためには、「ボタンを操作不可にする」「ボタンの押下直後にフィードバックする」その他の有効な手段がある。

「ボタンを操作不可にする」、つまり、押下に無反応、色を薄くするためには、「disabled にする」「aria-disabled にする」といった手段が有効であり、

「ボタンの押下直後にフィードバックする」ためには、「input のエラー表示機能を使う」「aria-invalid や aria-describledby 属性を使う」といった手段が有効。

なので、「ボタンを操作不可にする」手段としてのdisabled と aria-disabledだけしか見ないのは不十分。

参考記事

2024年版 HTMLで作るフォームバリデーション