# スペースを入れて文字の間をあけた項目名や見出し
Source: https://easeweb.dev/learn/spaced-out-words
Topics: ページの構造 > 読み上げ順序が見た目の順序と一致する (WCAG 1.3.2)
The fix: 語の中に入力したスペースを消します。そのうえで、見た目をCSSで保つ（ゆったり見せたい見出しにはletter-spacing、幅をそろえたい項目名にはtext-align-last: justify）か、語は詰めて書き、項目名はそれぞれの幅のままにします。
Test with: screen reader
References: https://www.w3.org/WAI/WCAG22/Understanding/meaningful-sequence.html https://www.w3.org/WAI/WCAG22/Techniques/failures/F32 https://waic.jp/translations/WCAG-TECHS/F32 https://www.w3.org/WAI/WCAG22/Techniques/css/C8 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/letter-spacing https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-align-last https://www.soumu.go.jp/main_sosiki/hyouka/hyouka_kansi_n/ketsuka/33207_01.html https://www.ipa.go.jp/choutatsu/koubo/2026/rcu1hd000000y12w-att/koubo20260622-02.pdf
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
## 場面
小さな会社のお問合せページに、「お問合せ」という見出しと、「氏名」「住所」「電話番号」の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年に公開された、アクセシビリティの情報を発信する個人による比較では、文字の間にスペースを入れた語は、機械翻訳サービスによって訳がばらつきやすいという結果も出ています。
## 自動チェックとAIの限界
マークアップは正しく書かれています。各欄にラベルがあり、見出しは見出しで、スペースはただの文字です。語の中まで調べるaxeのルールはなく、アクセシブル名を確認しても、どの欄にも名前があります。ソース上の全角スペースはほかの空きと見分けにくいため、「氏 名」はコードレビューもすり抜けます。マークアップを読むAIアシスタントにも、そのスペースがレイアウトのためのものだと分かる手がかりはありません。EaseWebの診断は、まだこの問題を確認していません。日本語のページの見出し、ラベル、表の見出しセル、ボタンなどの短いテキストで、1字ずつの漢字やかながスペースで区切られている箇所を、人が確認する項目として挙げることはできます。姓と名の間のような、語と語の間のスペースは問題ないため、判断は人に任せます。
## 修正前：入力したスペースで字間をあけた項目名と見出し
```html
お 問 合 せ
```
```css
.contact {
display: grid;
grid-template-columns: max-content 1fr;
gap: 12px 16px;
align-items: center;
}
```
- 「氏」と「名」、「住」と「所」の間に全角スペースを2つずつ入力し、「電話番号」と同じ幅にしています。
- 見出しは、1字ごとに半角スペースを入れています。
- そのため、スクリーンリーダーには「氏」と「名」、「住」と「所」、「お」「問」「合」「せ」が、それぞれ別の語として渡ります。
## 修正後：スペースを消し、字間をCSSであける
```html
```
```css
.contact {
display: grid;
grid-template-columns: max-content 1fr;
gap: 12px 16px;
align-items: center;
}
.contact label {
text-align-last: justify;
}
.form-title {
letter-spacing: 0.25em;
}
```
1. 語の中のスペースを消し、「氏名」「住所」「お問合せ」にします。どれも一つの語としてスクリーンリーダーに渡ります。
2. 項目名を `text-align-last: justify` で広げます。グリッドの列は最も長い「電話番号」の幅になるため、「氏名」と「住所」はスペースがあったときと同じようにその幅に広がり、テキストに合わせて保守する幅の指定もいりません。
3. 見出しの字間を `letter-spacing` であけます。間隔はCSSが描くため、テキストは「お問合せ」のままです。
これで修正前の例は直り、達成方法C8のとおり1.3.2を満たします。見た目も変わりません。ブラウザーが項目名を広げない場合は、次の修正と同じく列の先頭に寄りますが、基準は満たしたままです。
## 修正後：スペースを消し、語を詰めて書く
```html
お問合せ
```
```css
.contact {
display: grid;
grid-template-columns: max-content 1fr;
gap: 12px 16px;
align-items: center;
}
```
1. 語の中のスペースを消し、「氏名」「住所」「お問合せ」にします。どれも一つの語としてスクリーンリーダーに渡ります。
2. 項目名はそれぞれの幅のまま、列の先頭に置きます。入力欄は、列によってそろったままです。
これで修正前の例は直り、1.3.2を満たします。CSSを足さない、最小の変更です。見た目は変わり、短い項目名は列の幅いっぱいには広がらず、見出しも通常の字間になります。
## どの方法を選ぶか
どちらも基準を満たし、どちらもスペースを消すところから始めます。デザインが幅をそろえた項目名やゆったりした見出しを求める場合は、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行ずつ読めば、ラベルのテキストそのものにも出会い、ページ内検索や翻訳にもスペースが渡ったままです。スペースを消すほうが手間もかかりません。
## 修正の確認
1. スクリーンリーダーで、見出しとフォームを上から下矢印キーで読み、続けてTabキーで各欄へ移動する。項目名と見出しが、どれも一つの語として、その語の読み方で読まれるか確認する。
2. ブラウザーのページ内検索（Ctrl+F、MacではCommand+F）で、各項目名と見出しをスペースなしで入力して検索し、どれも見つかるか確認する。
3. テンプレートと内容から、一つの語の2文字の間にあるスペース、全角スペース、` `、`br` を検索し、見つかった箇所をそれぞれ確認する。語と語の間のスペースは残し、語の中のスペースは消す。
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。フォームやその内容を変更した際は、再度確認します。
## 制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。対象は、短いフォームとその見出しです。1字だけの漢字をどう読むかは、スクリーンリーダー、その辞書、音声エンジンによって異なり、このガイドではどれも試していません。文字をつなげて一つの語として読むものもあるかもしれません。スペースで列をそろえたテキストも同じように問題になり、[見た目と食い違う読み上げ順序](/ja/learn/reading-order)で列の順序とあわせて触れています。PDFなどの文書には字間を整える独自の方法があり、別に確認が必要です。
---
このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）