アクセシビリティと大文字：英語の ALL CAPS が読みにくい理由
英語をすべて大文字で書くのは、2 語程度のラベルなら問題ありませんが、それより長いテキストには向きません。大文字が長く続くと読むのに時間がかかりますし、通常の大文字・小文字の使い分けが伝えている情報も失われます（「US」は国名なのか、「us」（私たち）なのか）。さらに、スクリーンリーダーはほとんどの場合大文字を無視するので、込めたはずの強調は消え、ところどころで短い単語が 1 文字ずつ読み上げられてしまいます。アクセシブルな方法は、テキストを通常の大文字・小文字で書き、デザイン上どうしても大文字にしたい箇所だけ CSS で大文字にすることです。ただし、それでも万全ではありません。
すべて大文字の文が長く続くと読みにくい理由
すべて大文字の文と小文字の文の読みやすさは、1 世紀近くにわたって比較されてきました。Kevin Larson が Microsoft のために書いた記事「The Science of Word Recognition」（単語認識の科学）は、1938 年の Woodworth までさかのぼる研究をまとめています。それによると、同じ文章でも、大文字で組んだものより小文字のもののほうが 5〜10% 速く読み終えられました。
よく知られている説明は「単語の形」（word shape）です。小文字の単語はアセンダーやディセンダー（小文字の上下に突き出る部分）のおかげで独特の輪郭を持つのに対し、大文字はどの単語も長方形にしてしまう、という説です。Larson は、この説を裏付ける証拠はないと論じています。人は文字から単語を認識しているのであって、小文字が有利なのは主に、ふだんから読み慣れているからだというのです。実際、大文字をたくさん読ませられた人は、大文字を読むのも速くなります。
これは有益な訂正ですが、サイトにある大文字だけの段落が救われるわけではありません。読み手はそうした練習を積んでいませんし、その負担は、もともと読むことに苦労している人に最も重くのしかかります。MDN の text-transform のページは、大文字のテキストが大量に続く場合について「may be difficult for people with cognitive concerns such as Dyslexia to read」（ディスレクシアなど認知面に困難を抱える人には読みにくい場合がある）と注意を促しています。GOV.UK のスタイルガイドは、例そのもので要点を示しています。「DO NOT USE BLOCK CAPITALS FOR LARGE AMOUNTS OF TEXT AS IT'S QUITE HARD TO READ.」（大量のテキストにブロック体の大文字を使わないこと。かなり読みにくいため）
大文字は情報を捨ててしまう
大文字と小文字が混ざっているのは飾りではありません。大文字は、その単語が名前なのか、略語なのか、文の始まりなのかを教えてくれます。次の文を読んで、どれだけ推測しなければならないかに注目してください。
PLEASE CONTACT US ABOUT POLISH ORDERS IN MARCH. NASA SAYS HI.US はアメリカ合衆国でしょうか、それとも us（私たち）でしょうか。POLISH はポーランドの顧客のことでしょうか、それとも家具用のつや出し剤でしょうか。MARCH は 3 月でしょうか、それともデモ行進でしょうか。いったん大文字で入力されたテキストからは、ソフトウェアも答えを取り戻せません。この行を当サイトの文字ケース変換ツールの「文の先頭大文字」（センテンスケース）で変換すると、「Please contact us about polish orders in march. Nasa says hi.」になります。すべてを小文字にしてから各文の先頭を大文字にするだけで、ツールにわかるのはそこまでだからです。名前は手作業で戻す必要があります。
スクリーンリーダーはすべて大文字のテキストをどう扱うか
ほとんどの場合、何もしません。スクリーンリーダーは単語を読み上げるだけで、大文字か小文字かには触れません。2022 年、アクセシビリティコンサルタントの Adrian Roselli が、すべて大文字の法律文を JAWS、NVDA、Narrator、Orca、VoiceOver、TalkBack の標準設定で試したところ、テキストが大文字であることを聞き手に伝えたものは 1 つもありませんでした。NVDA の音程の変更や「say cap」のようなオプションは、テキストを 1 文字ずつ移動しながら読むためのもので、文章の読み上げ向けではありません。
ここから 2 つのことが言えます。
- 意味を込めた大文字が伝わらない。「ここは重要」ということを大文字で表している場合（警告、契約条項、叫んでいる言葉など）、聞き手には普通のテキストとして聞こえます。点字の読者は例外です。点字には大文字符があるからです。
- 短い単語が 1 文字ずつ読まれることがある。音声エンジンは、大文字の並びが略語かどうかを推測します。Roselli は、大文字で書くとスクリーンリーダーが 1 文字ずつ読み上げることが多い単語として「AM」「ADD」「IT」を挙げており、「CONTACT US」が「contact U.S.」と読み上げられたという報告も現場の担当者から寄せられています。
どの単語が 1 文字ずつ読まれるかは、スクリーンリーダー、音声、ユーザーの設定、ときにはブラウザーによって変わり、バージョンによっても違います。確実には予測できないのです。これこそが、重要な言葉をそもそも大文字で書かないようにする最大の理由です。
文字間隔をスペースでごまかさない
字間を広く空けた大文字はよく使われるデザインですが、S A L E のように入力するのは、その見た目を出す方法として最悪です。スクリーンリーダーは文字を 1 つずつ別々に読み上げますし、WCAG は「using white space characters to control spacing within a word」（単語内の間隔を空白文字で調整すること）を失敗例として挙げています（F32）。次の例のように、CSS の letter-spacing を使いましょう。
大文字を入力せず CSS の text-transform: uppercase を使う
ボタンやタブ、小さな見出しを大文字で見せたいときは、テキストは通常の大文字・小文字で書き、見た目を CSS で変えましょう。
<button class="caps">Add to basket</button>
.caps {
text-transform: uppercase;
letter-spacing: 0.06em; /* capitals need a little extra room */
}HTML 内のテキストは「Add to basket」のままなので、次のような利点があります。
- デザイン変更が簡単。あとで大文字をやめたくなっても、CSS を 1 行変えるだけで済みます。すべてのラベルや翻訳ファイルを探し回る必要はありません。
- テキストをほかの場所でもそのまま使える。フィードやエクスポートなど、スタイルシートが届かない場所にも、正しい大文字・小文字の単語が渡ります。
- 言語ごとの処理をブラウザーに任せられる。ブラウザーは
lang属性をもとに言語ごとのルールを適用します。MDN の text-transform のリファレンスにその一覧があります。たとえばギリシャ語の母音はすべて大文字にするとアクセント記号が外れ、トルコ語ではiがİに対応します。CSS なら、保存されているギリシャ語はアクセント記号を保ったままですが、大文字で入力してしまうと、アクセント記号は永久に失われます。
ただし、過信は禁物です。ブラウザーが変換後のテキストを支援技術に渡すことがあるからです。今も未解決の2016 年に報告された WebKit のバグでは、大文字のスタイルを当てた「Add to Cart」ボタンを VoiceOver が「A D D to cart」と読み上げる現象が報告されており、Chrome の VoiceOver でも同じことが起きると開発者が報告しています。また、CSS で付けた大文字も、目で読む人にとってはやはり大文字なので、長く続けば読みにくさは変わりません。text-transform は少数の単語を大文字にするための正しい方法であって、段落を大文字にしてよいという許可ではありません。
大文字を使ってよい場面と、代わりに使うもの
大文字が禁止されているわけではありません。WCAG には大文字を禁じる達成基準はなく、短ければほとんど問題になりません。私たちなら、次の用途には大文字を残します。
- NASA、HTML、BBC のような本物の略語や頭字語。
- 短いラベル、タブ、見出しの上に置く小さな「アイブロウ」の行。私たちの目安は 3 語以下で、大文字は CSS で適用します。
- 「New」のようなバッジの 1 語。ただし、それが特別な言葉として聞こえなくても困らない場合に限ります。
それ以外の場合は、スタイルを変えても、読み上げられても失われない方法を選びましょう。
- 強調：
<strong>を使い、太さやサイズでスタイルを付けます。ただ、ほとんどのスクリーンリーダーは標準設定では太字も伝えないので、重要な部分は言葉そのものに込めましょう。「この操作は元に戻せません」のひと言は、どんな書式よりも多くを伝えます。 - 警告：短く平易な見出し（「アカウントを削除すると、すべてのファイルが削除されます」）なら、大文字のかたまりが果たそうとしていた役割をこなせますし、しかも読み上げられます。
- 法律文：米国の契約書では、保証の免責条項を大文字で書くことがよくあります。Uniform Commercial Code（統一商事法典）が、それを「conspicuous」（目立つ）ものにするよう求めているためです。ただし、その定義では、文書の本文に大文字は必須ではなく、より大きな文字、対照的な書体・フォント・色、テキストを区別する記号でも条件を満たします。規約を変更する前には起草担当者に確認してください。とはいえ、大文字だけが唯一の方法ではありません。
Unicode の「スモールキャピタル」は大文字ではない
当サイトのおしゃれなテキストジェネレーターには「スモールキャピタル」というスタイルがあります。これが何を出力するのか、正直にお伝えしておきます。「Sale on now」と入力すると「sᴀʟᴇ ᴏɴ ɴᴏᴡ」になります。これは文字を小さく描いたものではなく、主に音声記号から借りてきた別の文字です。スモールキャピタル版がない文字もあり、そのため「s」は普通の小文字の s のまま残り、「q」はオゴネク付きの o である「ǫ」になります。
ソフトウェアから見ると、これらは元の文字とは無関係な記号です。そのため、スペルチェッカーにはエラーとして指摘されやすく、普通の単語で検索しても見つからないことがあります。見た目の似た文字の扱いはスクリーンリーダーによってまちまちで、同様の「偽の太字」の文字をテストしたときには、単語をまるごと飛ばしてしまうスクリーンリーダーもありました。そのテストについてはスクリーンリーダー向けの書き方のガイドで順を追って説明しています。こうしたスタイルは普通のテキストに添える飾りとして使い、誰かが聞き取る必要のある言葉には決して使わないでください。
大文字のクイックチェックリスト
- テキストは通常の大文字・小文字で入力し、大文字は
text-transformで適用する。 - 大文字は数語にとどめる。段落には決して使わない。
- 大文字には少し
letter-spacingを加え、スペースで代用しない。 - 意味は書式ではなく言葉に込める。
- 公開前に、主要なボタンやラベルを VoiceOver と NVDA で聞いて確かめる。
- 重要な箇所には、Unicode のそっくり文字を使わない。
略語から法律文書の見出しまで、英語の文章で大文字が本当にふさわしい場面については、大文字を使うべきときのガイドをご覧ください。
