なぜ行き詰まるのか
ボタンは形と慣習で押せることを示します（Norman, 1999）。無効ボタンは理由を言わずにその信号を消し、隠れたアフォーダンス（Gaver, 1991）となります（Friedman, 2021）。アフォーダンスも参照。
有効のまま理由を伝える
何が問題か明示するフォームは完了率が高いです（Seckler et al., 2014）。押したら不足欄へ移動しインライン検証を表示します（Flaherty, 2024）。固定下部ボタンの近くに短い案内も有効です。
無効が正しい場面
決済中の二重送信防止などです。状態を明確に区別し（Gordon, 2025）、「処理中…」と理由を示します。WCAG 2.2は1.4.3で例外としますが、薄すぎると見えません。aria-disabledも検討します。
よくある質問
- 無効ボタンは常に悪い？
- いいえ、理由を示せば二重送信防止などに適します。
- disabledとaria-disabledの違いは？
- 後者はフォーカスを保ち、読み上げで理由を伝えられます。
出典確認日：2026-10-27
参考文献
- Friedman, V. (2021, August). Frustrating design patterns: Disabled buttons. Smashing Magazine. 無効ボタンの問題と代替案です。
- Gordon, K. (2025, April 25). Button states: Communicate interaction. Nielsen Norman Group. ボタン状態の区別の仕方です。
- Flaherty, K. (2024, January 17). Indicators, validations, and notifications: Pick the correct communication option. Nielsen Norman Group. 表示と検証メッセージの使い分けです。
- Seckler, M., Heinz, S., Bargas-Avila, J. A., Opwis, K., & Tuch, A. N. (2014). Designing usable web forms: Empirical evaluation of web form improvement guidelines. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1275–1284). ACM. 明確なエラー案内が完了を助けます。
- Norman, D. A. (1999). Affordance, conventions, and design. Interactions, 6(3), 38–43. 知覚されたアフォーダンスの論考です。
- Gaver, W. W. (1991). Technology affordances. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 79–84). ACM. 隠れた・偽のアフォーダンスの古典です。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 1.4.3の例外と3.3.1です。