LoginSignup
185
134

はじめに

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

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

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

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

disableがない時 disableがある時
3つのボタンにフォーカスが当たっているgif動画 3つのボタンの中に1つdisabledのボタンがあり、2つのボタンにフォーカスが当たっているgif動画

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

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)のフォローをお願いします。

185
134
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
185
134