はじめに みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに disabled をつけて押せないようにしていませんか? この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介します。 disabled属性をつけない方がいい理由 disabled 属性をつけると、ユーザーがボタンを操作することを防ぎます。 そのため、キーボード(Tabキー等)で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。 disableがない時 disableがある時 ボタンの存在が認知できないため、支援技術(スクリーンリーダ等)で操作しているユーザーにとって、「送信ボタンどこだろう?」と思ってしまったり、「なんで送信ボタンが出てこないんだろう?」と思ってしまい、操作を完了させることができなくなります。 aria-disabl
![【HTML】ボタン要素にdisabled属性をつけるのをやめませんか? - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/84178c7c210e7d4978eb437b4b04cb322d0cb5ce/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fengineer-festa-ogp-background-074608b13b4bbe67c10ada41e7e2d292.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgwJTkwSFRNTCVFMyU4MCU5MSVFMyU4MyU5QyVFMyU4MiVCRiVFMyU4MyVCMyVFOCVBNiU4MSVFNyVCNCVBMCVFMyU4MSVBQmRpc2FibGVkJUU1JUIxJTlFJUU2JTgwJUE3JUUzJTgyJTkyJUUzJTgxJUE0JUUzJTgxJTkxJUUzJTgyJThCJUUzJTgxJUFFJUUzJTgyJTkyJUUzJTgyJTg0JUUzJTgyJTgxJUUzJTgxJUJFJUUzJTgxJTlCJUUzJTgyJTkzJUUzJTgxJThCJUVGJUJDJTlGJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjNGRkZGRkYmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0yMzUxYjRlOTE5NWZkMWM5ZGUzZDQyMjQzNzE5NjE3Yw%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBkZWd1ZGVndTI1MTAmdHh0LWNvbG9yPSUyM0ZGRkZGRiZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWEyY2UzMjI3MzUxNDFiNTcxYzMxNzE0NmQ4NDExODdh%26blend-x%3D120%26blend-y%3D445%26blend-mode%3Dnormal%26txt64%3DaW4gUWlpdGHmoKrlvI_kvJrnpL4%26txt-width%3D972%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523FFFFFF%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D134%26txt-y%3D546%26s%3D57e60f284f0ce1c5c2f5cd5db7b37ae9)