第12回　入力フォームの問題点と解決法 前編

これまでの連載では、Webサイトでの情報の発信をアクセシブルにする方法を中心に述べてきましたが、今回は利用者と情報発信者間のコミュニケーションを可能にする入力フォームのアクセシビリティについて考えていきます。

入力フォームは、ショッピングサイトでの商品購入やメールマガジンの読者登録など、Webサイトのあらゆる場面で利用者からコンテンツ提供者へのフィードバック手段として用いられています。この記事を連載しているMdN Interactiveでの読者登録画面にも入力フォームが利用されています。

入力フォームについてWebアクセシビリティの観点で考えていく際、最初に問題となるのが「入力必須の項目」と「入力が任意の項目」を、どのように表現するかということです。

ページ内に「赤字は必須項目です」と記述するような、色だけに依存して入力必須の項目を表現しているWebサイトも少なくありませんが、Webコンテンツに関するJIS規格、JIS X 8341-3では、5.5Aとして以下のように述べられております。

このことからもおわかりいただけるとおり、「赤字は必須項目です」のように、入力必須の項目を色のちがいだけで区別させて情報提供することは、Webアクセシビリティ的に問題があります。筆者のような音声読み上げ環境の利用者には、どの項目が赤い字で記述された入力必須の項目かが理解できない場合があるからです。

このようなフォームを止むを得ず使用しなければならないとき、筆者はすべての項目に情報を入力します。入力必須の項目に未記入があり、何度もエラー画面が出ることを回避するためです。しかし、その情報が必要であるかどうかに関わらず、安易に自分の個人情報を提供することになるため、これはあまりよい解決策だとはいえません。

それでは、入力フォームの必須項目と任意項目は、どのように表現すればいいのでしょうか？

現在一般的に用いられている方法は、入力必須項目に「*」をつけて表現する方法です。しかし、この方法では、記号を通常読み飛ばしてしまう音声読み上げ環境の利用者の一部には、情報を伝えることができません。

そこで、入力必須項目を「必須」という文言とともに表示させるという方法がとられています。このように、入力必須項目を色の変化とともにテキスト情報で表現することで、音声読み上げ環境の利用者にも、どの項目の入力が必須なのかがわかるようになります。

筆者はしばしばこの連載の中で、読み上げが「わずらわしい」といった表現をすることがあります。入力フォームの必須項目の情報を聞くたびに「必須」や「*」と何度も読まれることも例外ではありません。

ここで少し見方を変えてみると、Webサイトで用いられている入力フォームの多くは、入力が任意の項目よりも必須の項目の方が多いのではないでしょうか？　そこで、入力フォーム内の入力が必須の項目ではなく、任意の項目を「任意」や「オプション」のように表現することで、音声読み上げ環境の利用者は何度も「*」や「必須」などの説明を聞かなくてすむのではないでしょうか。これによって、入力フォーム内での作業効率が上がると考えられます。

入力フォームは、スクリーン・リーダーや音声ブラウザの利用者にとって操作が難しいページのひとつです。どのような項目を入力しなければならないのか、またどの項目が必須なのかなど、注意深く読み進めないと内容を把握しづらいからです。次回も、引き続き入力フォームの問題点について述べていきます。