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

前回は、文字の色やフォームの形状といった視覚での識別のみに依存して入力フォームの情報を伝えることの、Webアクセシビリティ的な問題点についてお伝えしました。引き続き今回も、入力フォームをよりアクセシブルにするための方法を紹介していきます。

筆者は入力フォームを利用する場合、入力項目を最後まですべて確認するのではなく、項目が読まれる順番に処理をしていきます。これは、スクリーン・リーダーや音声ブラウザでは画面全体の構成を把握することが困難なためです。もちろん、時間をかけて入力フォーム全体を読み上げるという方法もありますが、あまり効率のよい方法とはいえません。

そこで問題になるのが、入力項目の後に入力例が読まれる場合です。たとえば、電話番号を記入する箇所で、「電話番号」と読まれるとします。そのあと入力欄のテキストボックスに「03-1234-5678」のように項目を記述し、さらに読み進めていくと、「例： 0312345678（ハイフン不要）」と書かれているケースがあります。

この場合に、もし先に記したようにハイフンをつけて電話番号を記述すると、データの送信時にエラーとなる可能性があるため、テキストボックスに戻って情報を修正しなければなりません。

こうした入力例はテキストボックスの前に読み上げられるように配置すると、音声読み上げ環境の利用者にとってより利用しやすいものになります。ただ、注意しなければならないのは、たとえ画面上では入力例がテキストボックスよりも前に配置されていたとしても、音声読み上げ環境では必ずしもその順番どおりに読み上げられるとは限らないという点です。

音声ブラウザやスクリーン・リーダーは、情報を(X)HTMLのソースが記述されている順番に読み上げます。入力例をテキストボックスよりも前に読ませたい場合には、ソース上でもそのように記述しなければなりません。

次に、入力フォームで頻繁に遭遇する問題点として、項目選択時に利用するコンボボックスについてご紹介します。

住所の記入などに用いられる都道府県選択のためのコンボボックスは、選択肢として並ぶ都道府県名の順番がWebサイトによってまちまちであり、Webアクセシビリティ的に問題を抱える代表例といえます。あるサイトでは50音順に並んでいれば、別のサイトでは「北海道」から始まり「沖縄」で終わるような、地図の順に並んでいたりします。

もちろん、どの記述方法が正しいという答えはありませんが、音声読み上げ環境では自分が目的とする地域を選ぶまでに時間がかかります。

また、入力フォームの中には、ページの内容が更新されているにも関わらず、ページタイトルがいつも同じまま固定されているようなものがあります。記入を済ませて情報を送信したあと、エラーが出ているにもかかわらず、入力した情報を送信する前と同じタイトルのままでエラー情報を表示させるようなケースです。

もちろんページ本文にはエラーメッセージが表示されているので、そこまで読み進めれば情報を得ることはできます。しかし、スクリーン・リーダーや音声ブラウザは、まず最初にページタイトルを読み上げるため、音声読み上げ環境の利用者にとってはページタイトルを適切に変更して情報を伝えてもらうほうが、効率よくページを閲覧できます。

ところで、このページタイトルを適切に変更するという事項は、入力フォームだけに限られた問題ではありません。Webコンテンツに関するJIS規格、JIS X 8341-3では、5.2Eとして以下のように述べられています。

これは前述のとおり、スクリーン・リーダーや音声ブラウザの多くが、ページにアクセスした際、ページタイトルから情報を読み始めるためで、利用者はページタイトルを聞くことで、それが自分の目的としているページかを判断することが多いからです。また、ページタイトルを適切に設定することは、特定のページをブックマークに保存する際にも役立ちます。

前回から2回に渡り、音声読み上げ環境下で問題となる入力フォームの例とその改善案を解説して述べてきましたが、Webサイトで情報のフィードバックを行う際にも、さまざまな留意点があることをおわかりいただけたかと思います。

入力フォームはコンテンツ提供者と利用者間のコミュニケーションを可能にする大切な手段ですから、利用者が快適に情報発信を行えるようなフォームを制作していただければと思います。

次回は「画像認証」という言葉でも知られている「CAPTCHA」（キャプチャ）についてWebアクセシビリティの観点からお伝えしていきます。