はじめに
みなさんは、フォームなので必須項目が入力されてない時、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; を記述しています。
button[aria-disabled="true"] {
cursor: not-allowed;
/*不活性のスタイルを記述する*/
}
⚪︎ クリックイベントが発火しないようにする
aria-disabled属性だけでは、クリックイベントが発火していまうので、イベントは発火しても、処理が行われないようにreturn する
let disabled = true; /* ボタンがdisabledにするかしないかを決めるフラグ */
button.addEventListener('click', (event) => {
if (disabled) { return }
/* ボタンを押した時の処理を書く */
});
まとめ
この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介しました。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。