まったく読まれないか、1文字ごとに読まれてしまう文字数カウンター

雑貨を扱う小さなショップでは、注文の手続きでギフトメッセージを添えられます。欄に入るのは100文字までで、欄の右下には残りの文字数が「残り100文字」「残り99文字」と、入力に合わせて減っていきます。画面が見える人は、メッセージを入力してから下に目をやり、「残り15文字」を見て、あと一言書けると分かります。

スクリーンリーダーの利用者が同じメッセージを入力しても、聞こえるのは自分が入力した文字だけです。欄に上限があることも、あとどれだけ入るのかも分かりません。100文字に達すると、欄はそれ以上文字を受け付けません。書いていた文の終わりは入らず、その理由も何も伝えられません。残りの文字数を知るには、入力の手を止め、欄を離れて周りを読んで確かめるしかありません。

別の作りのショップでは、文字数の表示がassertiveのライブリージョンになっています。今度はキーを押すたびに「残り14文字」「残り13文字」「残り12文字」と数字が読まれます。スクリーンリーダーによっては、文字のあとに毎回読まれることも、読み始めたところで次のキーに遮られることもあります。どちらの場合も、文を入力するあいだ、ほぼ1文字ごとに数字が聞こえ、何を書いていたのかを見失ってしまいます。

WCAGの定義では、ステータスメッセージとは、コンテキストの変化を伴わない内容の変化のうち、操作の結果、待ち状態、処理の進み具合、エラーのいずれかを伝えるものです。「残り15文字」は、押したキーの結果を伝え、フォーカスを受け取らずに変わります。達成基準4.1.3は、こうしたメッセージを役割やプロパティによって判別できるようにし、フォーカスを動かさずに支援技術が伝えられるようにすることを求めています。

1つ目の修正前の例では、文字数はただの p です。画面上の文言は変わっても、支援技術に変化を読むよう伝えるものがありません。W3CがF103として挙げている失敗例です。2つ目の修正前の例では、文字数の表示に aria-live="assertive" が付いています。これで変化はスクリーンリーダーに伝わりますが、すぐに読むべきメッセージという扱いです。しかもスクリプトは、キーのたびに新しい文字数を書き込みます。Understanding 4.1.3は、重要で急を要するわけでもない内容に role="alert" や aria-live="assertive" を使うことを失敗例に挙げ、ステータスメッセージは作業を不必要に妨げずに伝えるべきだとしています。残りの文字数は定型の知らせで、入力の手が止まるまで待てます。

文字数の上限は、ギフトメッセージ、レビュー、プロフィールの自己紹介、問い合わせフォームによくあります。そして、ページの中で上限を示しているのが、この文字数の表示だけということも少なくありません。

10グループ中2グループに影響

• 全盲 （影響あり）
• 弱視 （影響あり）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響なし）
• 筋力・可動域 （影響なし）
• 認知 （影響なし）
• 光過敏 （影響なし）

• 視覚を使わない スクリーンリーダーの利用者には、自分が入力した文字しか聞こえず、文字数は伝わりません。メッセージが長すぎたことは、何の説明もなく欄が文字を受け付けなくなって初めて分かります。文字数がassertiveの領域にあると、ほぼ1文字ごとに数字が読まれ、書いている言葉が数字に紛れてしまいます。
• 視覚が限られる 入力中の文字を拡大して見ている画面拡大ソフトの利用者には、欄の端にある文字数が目に入らないことがあります。音声を併用していても、何も伝わりません。

スキャンはページを読み込み、マークアップの中に「残り100文字」を見つけます。欄に入力はしないため、表示が変わる様子は見えず、その行が入力した文字数を数えるものだということもHTMLからは分かりません。EaseWebの監査は実際に入力します。文字数の表示がある欄を上限の10文字手前まで埋めてから3文字入力し、ライブリージョンの変化を見ます。3回のキーのたびにassertiveの領域で文字数が書き換わると、問題として報告します。politeの領域でキーごとに書き換わる場合や、文字数の表示は変わったのに、入力中にもその後の待ち時間にも、どのライブリージョンにも何も書き込まれなかった場合は、人がスクリーンリーダーで確かめる項目として挙げます。文字数の表示をアクセシブルにするよう頼まれたAIアシスタントは、見えている文字数の表示に aria-live を polite か assertive で付けることがよくあります。読み上げられるようにはなりますが、キーを押すたびに読まれる、2つ目の修正前の例そのものです。スクリーンリーダーを動かしながら欄に入力して、何がいつ読まれるのかを聞いて、初めて分かります。