残り100文字
``` ```js function countText(left) { return `残り${left}文字`; } gift.addEventListener('input', () => { count.textContent = countText(100 - gift.value.length); }); ``` 文字数は正しく、欄のすぐ下にあります。問題は一つです。 - `p` はライブリージョンではないため、文字数は画面上で変わるだけで読み上げられません。欄がいっぱいになっても、文字が入らなくなった理由は伝わりません。 ## 修正前：assertiveのライブリージョンにある文字数 ```html残り100文字
``` ```js function countText(left) { return `残り${left}文字`; } gift.addEventListener('input', () => { count.textContent = countText(100 - gift.value.length); }); ``` 文字数は読み上げられるようになりましたが、伝え方に問題があります。 - `aria-live="assertive"` は、新しい文字数をすぐに伝えるよう求めます。文字数は急ぎの知らせではありません。 - スクリプトがキーのたびに新しい文字数を書き込むため、ほぼ1文字ごとにメッセージが届きます。 ## 修正後：上限が近いとき、入力が止まってから一度だけ伝える ```html100文字まで入力できます。
``` ```js function countText(left) { return `残り${left}文字`; } // 残り20文字からは、入力が1秒止まったときに一度だけ伝える let pause; gift.addEventListener('input', () => { const left = 100 - gift.value.length; count.textContent = countText(left); clearTimeout(pause); pause = setTimeout(() => { status.textContent = left <= 20 ? countText(left) : ''; }, 1000); }); ``` 1. 上限を欄の上のヒントに書き、`aria-describedby` で欄に結び付けます。利用者が欄に移動すると、入力を始める前に「100文字まで入力できます。」が読まれます。 2. 見えている文字数の表示から `aria-live` を外し、`aria-hidden="true"` を付けます。画面が見える人には今までどおりキーごとに変わって見えますが、キーのたびに読まれることも、ページを読んだときに二重に読まれることもなくなります。 3. `role="status"` の空の `p` を一つ、視覚的に隠して、最初からページに置きます。ここに書き込んだ内容は、スクリーンリーダーが読み上げ中の内容を読み終えてから伝えられます。 4. 残り20文字からは、入力が1秒止まったときに、そこへ文字数を書き込みます。入力しているあいだ文字数は聞こえず、上限の近くで手を止めたときに「残り12文字」と一度だけ聞こえます。上限から離れると領域を空にするため、次に上限へ近づいたときの文字数も、変化として伝わります。 これで2つの修正前の問題はどちらも直り、4.1.3を満たします。文字数は、役割を通じて控えめに、手が止まるたびに一度だけスクリーンリーダーへ伝わります。まったく伝わらないことも、キーのたびに伝わることもありません。 ## 実装の判断 **どれだけ待つか。** この仕組みを備えたデザインシステムは、1秒ほど待っています。GOV.UKの文字数カウントは1秒ごとに確認し、キーが0.5秒以上押されていなければ、スクリーンリーダー向けのメッセージを更新します。米国政府のU.S. Web Design Systemは、最後のキーから1.2秒待ちます。これより短いと、ゆっくり入力する人には語の合間に文字数が聞こえ、長いと、次へ進んだあとで文字数が届きます。 **いつから伝えるか。** 短いメッセージを書く人にとって、1文字目から読まれる文字数は雑音です。GOV.UKのコンポーネントにはしきい値の設定があり、上限の75%など、決めた割合に達してから文字数を表示し、読み上げます。この例では残り20文字から伝えます。欄に移動したときにヒントで上限が読まれるため、上限が近づくまでは文字数を知る必要がありません。 **キーごとに書き換わる、politeの文字数。** 実際には、2つ目の修正前の例より、同じ文字数の表示に `aria-live="polite"` を付けた形のほうをよく見かけます。欄にフォーカスがあるあいだ、そう描画するコンポーネントライブラリーもあります。変化はどれも伝わるため、4.1.3の文言は満たしますが、キーのたびにメッセージを送ることに変わりはなく、ほぼ1文字ごとに文字数を読むスクリーンリーダーもあります。直し方は同じで、隠した領域を一つ置き、入力が止まってから書き込みます。 **途中で切らずに、上限を超えさせる。** `maxlength` があると、ブラウザーは上限で文字を受け付けなくなり、貼り付けた文のはみ出した部分も黙って切り捨てます。GOV.UKのコンポーネントは `maxlength` を使わず、上限を超えても入力できるようにしています。答えを最後まで入力したり貼り付けたりしてから削れるようにするためで、何文字超えているかは文字数の表示で伝えます。その場合も、送信の時点でフォームを止め、上限を超えていることを説明する必要があります。入力中に出すエラーは、[入力の途中で読まれてしまうか、まったく読まれないエラーメッセージ](/ja/learn/inline-validation)で扱っています。 **上限と同じ単位で数える。** `maxlength` と `value.length` はUTF-16のコード単位で数えるため、絵文字は2文字と数えられることがあります。バイト数で制限するサーバーでは、UTF-8で日本語のほとんどの文字が1文字3バイトになります。また、全角を2文字、半角を1文字と数えるサイトもあります。上限を実際に守らせる側と同じ単位で数え、その単位をヒントに書いてください。 **音声入力。** 音声認識ソフトの中には、スクリプトが待っているイベントを出さずに欄の値を変えるものがあります。GOV.UKのコンポーネントは、欄にフォーカスがあるあいだ1秒ごとに値も確かめ、音声で入力した文でも文字数が変わるようにしています。 **修正にならないもの。** 欄の `aria-describedby` で変わり続ける文字数の表示を指すと、欄へ移動したときには読まれますが、入力中には読まれません。聞こえるのは入力を始める前の文字数です。`role="alert"` は、2つ目の修正前の例と同じ問題を抱えます。文字数の表示へフォーカスを移すと、文の途中でカーソルが欄から抜けてしまいます。 ## 修正の確認 1. 入力する前にDOMを確認し、見えている文字数の表示に `aria-hidden="true"` があって `aria-live` がないこと、`role="status"` の空の要素があり、`display: none` で隠れていないこと、欄の `aria-describedby` が上限を伝える文言を指していることを確かめる。 2. スクリーンリーダーを有効にして欄へ移動する。ラベルに続いて「100文字まで入力できます。」が読まれる。 3. 上限から遠いところで、語の合間に手を止めながら文を入力する。文字数については何も読まれない。 4. 残りが20文字を切るまで、いつもの速さで入力して手を止める。文字の合間に文字数は読まれず、手を止めたあとに残りの文字数が一度だけ読まれ、上限に達すると「残り0文字」が一度だけ読まれる。 OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。入力欄のコンポーネント、文字数の表示、上限を変更した際は、再度確認します。 ## 制限 ライブリージョンの動きは、スクリーンリーダーやブラウザーによって異なります。入力を再開すると、まだ読んでいない控えめなメッセージを捨ててしまうものもあります。このパターンは、文字数に決まった上限がある一つの欄を扱っています。語数で制限する場合も、数える単位が変わるだけで同じです。下書きの保存のようなほかのステータスメッセージは、[画面に出ても読み上げられないステータスメッセージ](/ja/learn/status-messages)で扱っています。実際の上限、ヒント、エラーメッセージを含めた実際の欄を、利用者が使うスクリーンリーダーで確認してください。 ## スクリーンリーダーでの動き（EaseWebが実機で確認） `role="status"`: polite のライブリージョンです。変化は、スクリーンリーダーが読み終えるまで待ちます。 | スクリーンリーダー | ブラウザーとOS | 下矢印キー | 連続読み上げ | | --- | --- | --- | --- | | NVDA | Chrome, Windows 11 | 未確認 | 未確認 | | JAWS | Chrome, Windows 11 | 未確認 | 未確認 | | VoiceOver | Safari, iOS | 未確認 | 未確認 | | TalkBack | Chrome, Android | 未確認 | 未確認 | `aria-live="assertive"`: 領域が変わるたびに、すぐに伝えるよう求めます。 | スクリーンリーダー | ブラウザーとOS | 下矢印キー | 連続読み上げ | 入力 | | --- | --- | --- | --- | --- | | NVDA | Chrome, Windows 11 | 読んでいるまとまりが終わってから読む (2026-10) | 未確認 | 未確認 | | JAWS | Chrome, Windows 11 | 読んでいるまとまりが終わってから読む (2026-10) | 未確認 | 未確認 | | VoiceOver | Safari, iOS | 未確認 | 未確認 | 未確認 | | TalkBack | Chrome, Android | 未確認 | 未確認 | 未確認 | `aria-describedby`: ページ内の別のテキスト（ヒントやエラーなど）を、要素の説明にします。 | スクリーンリーダー | ブラウザーとOS | Tabで移動 | 下矢印キー | | --- | --- | --- | --- | | NVDA | Chrome, Windows 11 | 未確認 | 未確認 | | JAWS | Chrome, Windows 11 | 未確認 | 未確認 | | VoiceOver | Safari, iOS | 未確認 | 未確認 | | TalkBack | Chrome, Android | 未確認 | 未確認 | https://easeweb.dev/ja/learn/screen-reader-support --- このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）