Sparkle Design

送信ボタンの初期状態

送信ボタンの初期状態 カバー

概要

フォームの送信 (サブミット) ボタンは無効化せずに常に有効な状態にします。

フォームの中にはすべてのフィールドが正しく入力されるまで送信ボタンを無効化しておく設計が施されている物があります。しかし、この設計には以下のような問題があります。

  1. 入力の不備に気づくことができない
    • ユーザーが入力を完了しても入力ミスがある場合はボタンの無効状態が維持されます。そのためユーザーはフォームを送信できない理由分からず、混乱を招きます。
  2. ボタンの知覚に支障を及ぼす
    • スクリーンリーダーの利用者は無効化されたボタンにフォーカスできないため、ボタンの存在そのものに気づけない可能性があります。
    • 無効化されたボタンは色のコントラストが低くなるため、視覚的にも気づかれにくくなります。

この問題を解消するために送信ボタンは無効化せずに常に有効な状態にします。

ユーザーがボタンを押下した際に入力に不備がある場合はシステムがエラーメッセージを提示します。この設計によってユーザーはフォームの送信に失敗した理由を理解できるため、エラーメッセージに沿って不備の解消を行うことができます。

参考資料

Form Design Patterns─シンプルでインクルーシブな フォーム制作実践ガイド - ボーンデジタルオンラインブックストア著者:アダム・シルヴァー監訳:土屋一彦定価:本体3,300円 + 税発行・発売:株式会社 ボーンデジタルISBN:978-4-86246-451-4総ページ数:320 ページサイズ:B5判、2色発売日:2019年12月中旬wgn-obs.shop-pro.jp
HTML 属性: disabled - HTML | MDNdisabled は論理属性で、存在する場合、その要素は変更不可、フォーカス不可、フォームへの送信不可となります。ユーザーはそのコントロールやフォームコントロールの子孫を編集したり、フォーカスしたりすることができません。developer.mozilla.org
aria-disabled - ARIA | MDNaria-disabled 状態は、要素は知覚可能であるが無効であり、編集やその他の操作をすることができないことを示します。developer.mozilla.org
aria-describedby - ARIA | MDNaria-describedby はグローバル属性で、その属性が設定されている要素を説明する要素(複数可)を特定します。developer.mozilla.org
小さな気づきや違和感があればお気軽に教えてください。
フィードバック
Chat illustration