トピックを検索
スペースを入れて文字の間をあけた項目名や見出し
お問合せフォームが項目名を全角スペースで4文字幅にそろえているため、スクリーンリーダーには「氏 名」が1字ずつ別の語として渡ってしまう
<label for="name">氏 名</label> 問題
スクリーンリーダーの利用者には、字間をあけた項目名や見出しが1字ずつ届き、別の読み方で読まれることもあるため、欄に何を入れるのか分からなくなる
小さな会社のお問合せページに、「お問合せ」という見出しと、「氏名」「住所」「電話番号」の3つの欄があるフォームがあります。作った人は、紙の申込書のように項目名を縦にきれいにそろえたいと考え、2文字の項目名を4文字の「電話番号」と同じ幅にするため、漢字の間に全角スペースを2つずつ入力しました。「氏 名」「住 所」です。見出しも、ゆったり見せるために1字ごとに半角スペースを入れ、「お 問 合 せ」としています。画面上は、狙いどおりに見えます。
スペースは語の区切りになります。スクリーンリーダーに渡るのは「氏名」ではなく「氏」と「名」の2語で、見出しは「お」「問」「合」「せ」の4語です。漢字には読み方がいくつもあることが多く、1字だけのときに音声エンジンが選ぶ読み方が、語の中での読み方と同じとは限りません。W3Cの失敗例F32は、見出し「東 京」がスクリーンリーダーで「ひがし きょう」と読まれる例を挙げています。総務省が2009年から2010年にかけて府省のホームページを調べた際には、「案件名」が「あん けん な」、「入手方法」が「いり て ほう ほう」と、音声読み上げソフトで読まれた例が記録されています。「氏」と「名」が実際にどう読まれるかは、スクリーンリーダーと音声エンジンによって異なり、このガイドでは特定の読み方を示していません。どのスクリーンリーダーにも、一つの語が複数の語として渡ることは同じです。聞く人は、分かれた音から元の語を推測し、この欄に何を入れるのかも推測するしかありません。
WCAG 1.3.2は、内容の順序が意味に影響する場合に、正しい読み上げ順序をコードから判断できることを求めています。語を作る文字の並びは、その最も小さな単位です。失敗例F32が、まさにこの場合を挙げています。語の中の間隔を空白文字で調整すると、語の解釈が変わったり、一つの語としてプログラムで認識されなくなったりするおそれがある、というものです。確認の方法は一つだけで、内容の中に空白文字を含む語があるかどうかです。この例では、2つの項目名と見出しが当てはまります。F32の例には、文字の間の 、上の「東 京」の見出し、縦書きにするために表の見出しセルを br で1字ずつ改行した例も含まれています。
この書き方は、紙の文書の習慣を持ち込んだものと考えられます。ワープロの均等割り付けは、短い項目名を決まった幅に広げるレイアウトの設定で、文字そのものは変わりません。一方、HTMLに入力したスペースはテキストの一部になり、テキストを読むすべてのツールに渡ります。基準を満たす方法は達成方法C8で、CSSの letter-spacing で間隔を描き、テキストは一つの語のままにします。
描かれた見た目ではなくテキストを扱うツールには、どれもスペースが渡ります。ChromeとFirefoxのページ内検索では、「氏名」で検索しても「氏 名」は見つかりません。2018年に公開された、アクセシビリティの情報を発信する個人による比較では、文字の間にスペースを入れた語は、機械翻訳サービスによって訳がばらつきやすいという結果も出ています。
10グループ中3グループに影響
- 全盲 (影響あり)
- 弱視 (影響あり)
- 色覚 (影響なし)
- ろう (影響なし)
- 難聴 (影響なし)
- 発話 (影響なし)
- 手の操作 (影響なし)
- 筋力・可動域 (影響なし)
- 認知 (影響あり)
- 光過敏 (影響なし)
- 視覚を使わない スペースが語を区切るため、「氏 名」はスクリーンリーダーに「氏」と「名」として届きます。1字だけで読まれた漢字は、語の中とは違う読み方になることがあります。点字ディスプレイにも、文字の間の空きがそのまま出ます。
- 言語・認知・学習の能力が限られる 読み上げ機能にも、スペースを含んだ同じテキストが渡るため、語が分かれて読まれることがあり、聞こえる言葉と、画面で強調される語が結び付きません。
- 視覚が限られる 画面拡大鏡の読み上げを使う人にも、スクリーンリーダーと同じく、分かれた語が届きます。
マークアップは正しく書かれています。各欄にラベルがあり、見出しは見出しで、スペースはただの文字です。語の中まで調べるaxeのルールはなく、アクセシブル名を確認しても、どの欄にも名前があります。ソース上の全角スペースはほかの空きと見分けにくいため、「氏 名」はコードレビューもすり抜けます。マークアップを読むAIアシスタントにも、そのスペースがレイアウトのためのものだと分かる手がかりはありません。EaseWebの診断は、まだこの問題を確認していません。日本語のページの見出し、ラベル、表の見出しセル、ボタンなどの短いテキストで、1字ずつの漢字やかながスペースで区切られている箇所を、人が確認する項目として挙げることはできます。姓と名の間のような、語と語の間のスペースは問題ないため、判断は人に任せます。
試してみる
画面のフォームと、各項目名からスクリーンリーダーに渡る語を見比べてみましょう
「入力したスペースを表示」をオンにすると、語の中に入力したスペースに印が付きます。フォームの下には、スクリーンリーダーが区切る位置で分けた見出しと項目名が出ます。続けて修正をそれぞれ適用し、見た目が変わるかどうか、どの項目名も一つの語になっているかを確認してください。
問題あり 修正できますか?
お 問 合 せ
スクリーンリーダーが語を区切る位置(スペース)で分けると:
- お問合せ
- 氏名
- 住所
- 電話番号
修正方法
スペースを消し、字間はCSSであける
<h2>お 問 合 せ</h2><form class="contact"> <label for="name">氏 名</label> <input id="name" name="name" autocomplete="name"> <label for="address">住 所</label> <input id="address" name="address" autocomplete="street-address"> <label for="tel">電話番号</label> <input id="tel" name="tel" type="tel" autocomplete="tel"></form>問題点3点
- 「氏」と「名」、「住」と「所」の間に全角スペースを2つずつ入力し、「電話番号」と同じ幅にしています。
- 見出しは、1字ごとに半角スペースを入れています。
- そのため、スクリーンリーダーには「氏」と「名」、「住」と「所」、「お」「問」「合」「せ」が、それぞれ別の語として渡ります。
スペースを消し、字間をCSSであける
<h2 class="form-title">お問合せ</h2><form class="contact"> <label for="name">氏名</label> <input id="name" name="name" autocomplete="name"> <label for="address">住所</label> <input id="address" name="address" autocomplete="street-address"> <label for="tel">電話番号</label> <input id="tel" name="tel" type="tel" autocomplete="tel"></form>修正の手順3ステップ
- 語の中のスペースを消し、「氏名」「住所」「お問合せ」にします。どれも一つの語としてスクリーンリーダーに渡ります。
- 項目名を
text-align-last: justifyで広げます。グリッドの列は最も長い「電話番号」の幅になるため、「氏名」と「住所」はスペースがあったときと同じようにその幅に広がり、テキストに合わせて保守する幅の指定もいりません。 - 見出しの字間を
letter-spacingであけます。間隔はCSSが描くため、テキストは「お問合せ」のままです。
これで修正前の例は直り、達成方法C8のとおり1.3.2を満たします。見た目も変わりません。ブラウザーが項目名を広げない場合は、次の修正と同じく列の先頭に寄りますが、基準は満たしたままです。
どちらも基準を満たし、どちらもスペースを消すところから始めます。デザインが幅をそろえた項目名やゆったりした見出しを求める場合は、CSSの方法を使います。見た目を保ったまま、テキストは一つの語のままです。デザインが許すなら、語を詰めて書きます。足すものも、ブラウザーごとに確かめるものもなく、短い語を大きく広げると、目で読む人にも一つの語として読み取りにくくなることがあります。letter-spacing を広げすぎると見出しはだれにとっても読みにくくなるため、控えめにしてください。
スペースは、テンプレート以外にも入り込みます。次のそれぞれを検索してください。
- 見出し、ラベル、表の見出しセル、ボタン、リンクで、漢字やかなの間にある半角・全角スペース。
- 文字の間の
。画面上は同じに見え、同じように問題になります。 - 語を縦書きにするために1字ごとに入れた
br。表の見出しセルによくあります。代わりに、セルにwriting-mode: vertical-rlを指定します。 - CMSで編集者が入力したテキストや、ワープロから貼り付けたテキストで、均等割り付けの代わりに入っているスペース。
スペースがすべて問題になるわけではありません。語と語の間のスペースや、姓と名の間のスペースは問題ありません。問題になるのは、一つの語の中のスペースです。
letter-spacing は最後の文字の後ろにも間隔を加えるため、中央ぞろえや行末ぞろえの見出しは少しずれます。同じ大きさの負の margin-inline-end で打ち消してください。値は、文字に合わせて大きくなるよう em で指定します。
text-align-last: justify が効くのはブロックボックスです。この例のグリッドアイテムや、表のセルは当てはまります。文の中に置いたラベルには、display: inline-block と em での幅が必要です。このプロパティは現在の主要なブラウザーが対応していますが、日本語を文字の間で広げるかどうかは、ブラウザーの両端ぞろえの処理しだいです。試したWebKit(WindowsのPlaywrightのWebKit 26.6)では、ChromeとFirefoxと違い、項目名は列の先頭に寄ったままでした。見た目に頼る前に、MacのSafariで確認してください。
テキストではなく名前の側を直す方法、つまり欄に aria-label を付けたり、字間をあけた語を aria-hidden で隠して視覚的に隠した語を並べたりする方法は、手間に見合いません。スクリーンリーダーでページを1行ずつ読めば、ラベルのテキストそのものにも出会い、ページ内検索や翻訳にもスペースが渡ったままです。スペースを消すほうが手間もかかりません。
修正の確認
3項目、マウス不要
確認方法: スクリーンリーダー
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。フォームやその内容を変更した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。対象は、短いフォームとその見出しです。1字だけの漢字をどう読むかは、スクリーンリーダー、その辞書、音声エンジンによって異なり、このガイドではどれも試していません。文字をつなげて一つの語として読むものもあるかもしれません。スペースで列をそろえたテキストも同じように問題になり、見た目と食い違う読み上げ順序で列の順序とあわせて触れています。PDFなどの文書には字間を整える独自の方法があり、別に確認が必要です。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
参考資料
- WCAG Understanding: meaningful-sequence(新しいタブで開きます)
- WCAG Technique F32(新しいタブで開きます)
- waic.jp: F32(新しいタブで開きます)
- WCAG Technique C8(新しいタブで開きます)
- developer.mozilla.org: letter-spacing(新しいタブで開きます)
- developer.mozilla.org: text-align-last(新しいタブで開きます)
- soumu.go.jp: 33207_01(新しいタブで開きます)
- ipa.go.jp: koubo20260622-02.pdf(新しいタブで開きます)
EaseWebのサービス
修正した問題を、次のリリースで再発させない
このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。