【HTML】ボタン要素にdisabled属性をつけるのをやめませんか？

はじめに

みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに disabled をつけて押せないようにしていませんか？

この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介します。

disabled属性をつけない方がいい理由

disabled 属性をつけると、ユーザーがボタンを操作することを防ぎます。
そのため、キーボード（Tabキー等）で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。

disableがない時	disableがある時

ボタンの存在が認知できないため、支援技術（スクリーンリーダ等）で操作しているユーザーにとって、「送信ボタンどこだろう？」と思ってしまったり、「なんで送信ボタンが出てこないんだろう？」と思ってしまい、操作を完了させることができなくなります。

aria-disabled 属性を使って作ろう！

上記のように、disabled 属性をつけるとボタンの存在が認知できないので、disabled 属性をつけるのは良くないですが、「特定の条件の時にボタンを押せるようにする」という挙動を作りたいという時はあると思います。

そのような時は、aria-disabled 属性を使って作りましょう。

サンプル

See the Pen disabledとaria-disabled by でぐぅー | Qiita (@sp_degu) on CodePen.

ポイント

⚪︎ aria-disabled を使って、不活性を表現します。
hoverした時に、ボタンが押せないように cursor: not-allowed; を記述しています。

sample.css

button[aria-disabled="true"] {
  cursor: not-allowed;
  /*不活性のスタイルを記述する*/
}

⚪︎ クリックイベントが発火しないようにする
aria-disabled属性だけでは、クリックイベントが発火していまうので、イベントは発火しても、処理が行われないようにreturn する

sample.js

let disabled = true; /* ボタンがdisabledにするかしないかを決めるフラグ */

button.addEventListener('click', (event) => {
  if (disabled) { return }
  /* ボタンを押した時の処理を書く */
});

まとめ

この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介しました。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。