サブミット (送信) ボタンをデフォルトで無効にする場合

先の記事「サブミット (送信) ボタンをデフォルトで無効化しない」では、「多くのウェブフォームにおいては、サブミットボタンは常時有効にしておき、入力不備があれば適時インクルーシブな形でインストラクションを提示するなどして、ユーザーが適切に修正できれば十分」という主旨のことを書きました。

一般的なウェブサイトのフォーム (システム側に対して未送信の情報を、ユーザーが入力して、送信するという流れ) であれば基本的には上述のとおりで、敢えてイレギュラーにサブミットボタンを無効化することの妥当性は低いかと思います。ただ例外的なケースもないわけではなく、たとえばウェブアプリケーションの設定画面など、あらかじめシステム側に反映されている情報を変更するようなフォームでは、サブミットボタンがデフォルトで無効になっているほうが、ユーザーにとって状況の認識が容易である可能性があります。

ウェブアプリケーションの設定画面のイメージ。サブミットボタンが無効であれば、フォーム内容は既にシステム側に反映済のものから未編集の状態であり、サブミットボタンが有効であれば、フォーム内容は編集が加えられた状態でシステム側には未反映であることが暗黙的にわかる。
ウェブアプリケーションの設定画面のイメージ。左 : 編集前でサブミットボタンが無効になっている状態。右 : 編集後でサブミットボタンが有効になっている状態。

ユーザビリティテストなどを経て、このようなインタラクション (サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力に応じて有効化する) を採用するのが妥当であるという判断になった場合は、アクセシビリティの観点から、以下を考慮に入れるとよいでしょう。

こうした補足的な説明の提示は、とりわけサブミットボタンの状態 (無効なのか有効なのか) を視認することが難しい視覚障害者にとって有益です。と同時に、このようなインタラクションは一般的なものではないため (アプリケーションによっては、設定画面にサブミットボタンがなく、フォーム内容を変更したら即時システム側に反映されるものもあります)、ユーザーのメンタルモデル構築の一助として、視覚的にも目につきやすくしておくのがよいでしょう。

CodePen で擬似的なデモを作ってみました。

See the Pen サブミットボタンをデフォルトで無効化する例 by @caztcha (@caztcha) on CodePen.

デモでは、フォームの冒頭 (視覚的に目に付きやすく、またスクリーンリーダーでもはじめのほうに読み上げられる) に、『設定を変更すると、ページ末尾の「保存」ボタンが有効になります。』という説明を提示しています。フォーム内容を変更すると、この説明は『設定が変更されました。設定内容を保存するには、ページ末尾の「保存」ボタンを押してください。』に差し替わります。さらに「保存」ボタンを押すと、この説明は『設定が保存されました。』に差し替わり、変更したフォーム内容が送信されたことを明示的にユーザーに伝えます。

この説明部分には aria-live="polite" 属性が記述してあるので、文面が差し替わるたびに、スクリーンリーダーの読み上げフォーカスがフォーム上のどこにあったとしても、適時説明が読み上げられるようになっています。以下のユーザーエージェント (スクリーンリーダーとブラウザの組み合わせ) で確認しましたが、特に問題なく読み上げられます。

NVDA + Firefox および iOS VoiceOver + Safari では、フォーム内容を変更するたびに (説明の文面が差し替わっていなくても)『設定が変更されました。設定内容を保存するには、ページ末尾の「保存」ボタンを押してください。』が読み上げられる現象が見られます。好意的に捉えれば、よいリマインドと言えなくもないですが、無駄に冗長ではあるので、ユーザーエージェント側のアップデートで解消されるとよいなと思います。