The Universal Web

はじめに

Universal Web ガイドラインの20年ぶりの改訂:2005年当時のタイポグラフィのアクセシビリティに関する知見を、高密度ディスプレイ、バリアブルフォント、WCAG 2.2、そして現代のレスポンシブウェブに照らして再検証する。

10 min read

このページはAIの支援を受けて翻訳されました。正文は英語の原文です。

2005年、Universal Web プロジェクトは実践的な問いに答えるべく出発しました。ロービジョンの人々 — そしてその延長線上にいるすべての人 — が実際に読めるように、画面上のテキストはどう組まれるべきか、という問いです。オリジナルのガイドラインは、20世紀のグラフィックデザインの原則と、当時のディスプレイ技術に依拠していました。粗いCRTと初期のLCDパネル、画面用に最適化されたひと握りの書体、そして文字サイズをせいぜい提案としてしか扱わないブラウザーです。

20年後、その研究の土台にあったほぼすべての前提が変わりました。この第2版はすべての知見を再訪し、持ちこたえたものを残し、そうでなかったものを改訂します。

動機は変わっていません。ロービジョンは今も矯正不可能な視覚の障害であり、その多くは緑内障や黄斑変性といった加齢に関連する状態の結果です。人口が高齢化するにつれ、よく組まれた画面上のテキストに頼る読者の数は減るどころか増えていきます。変わったのは、画面での読書がもはや紙の劣化した代替物ではないということです。多くの人にとって、それは唯一の重要な読書環境であり — 適切に設定されていれば、いまやより アクセシブルな環境にもなりうるのです。

2005年から変わったこと

オリジナルのガイドラインは、1インチあたりおよそ96ピクセルで文字をレンダリングする画面のために書かれました。字形が使えるピクセルは、せいぜい十数個でした。そのような条件下では、研究は頑丈なサンセリフ、ゆとりのあるサイズ、防御的なシンプルさを支持しました。4つの発展が再考を迫りました。

第一に、ディスプレイの密度です。高DPIパネル — 一般にCSSピクセルあたり2〜3のデバイスピクセル — は、印刷に迫る精細さで字形をレンダリングします。細いセリフ、微妙なストロークの抑揚、真のイタリックは、2005年にはまったく不可能だった形で画面上に生き残ります。オリジナルの推奨のいくつかは、大多数のユーザーにとってはもはや存在しない — ただし全員にとってではありません — レンダリングの制約を補うためのものでした。

第二に、文字そのものです。バリアブルフォントは、ウエイト、幅、オプティカルサイズ、ときにはグレードを、CSSから制御できる連続的な軸の上に置きました。かつては二者択一だった決定 — レギュラーかボールドか、このファミリーかあのファミリーか — はいまや調整可能であり、文脈に応答できます。ダークモード、小さなサイズ、ユーザーの好みに。

第三に、標準の状況です。Web Content Accessibility Guidelines は2.0、2.1、2.2を経て成熟し、テキストのサイズ変更(1.4.4)、リフロー(1.4.10)、テキストスペーシング(1.4.12)、コントラスト(1.4.3と1.4.11)についてテスト可能な達成基準を与えてくれました。一方、WCAG 3.0ドラフトとその背後にあるAPCAコントラスト研究は、コントラスト、サイズ、ウエイトがどう相互作用するかを再考しています — 2005年のガイドラインには身振りで示すことしかできなかった問いです。

第四に、CSSが大人になりました。ユーザーのデフォルトを尊重するremベースのサイズ指定、clamp()によるフルイドな文字、単位なしの行間、chベースの行長、font-size-adjust、text-wrap、そして prefers-color-scheme や prefers-reduced-motion のようなメディアクエリが、オリジナルのプロジェクトには原則として推奨することしかできなかった配慮のための、直接的で標準に基づいた道具をデザイナーに与えています。

2005年から2026年までの年表:粗いCRTのピクセル、WCAG 2.0の4.5:1比率、ウェブフォント、高DPIディスプレイ、バリアブルフォント、WCAG 2.1のテキストスペーシング、WCAG 2.2、そしてAPCA / WCAG 3ドラフト。

持ちこたえたもの

すべてが改訂を必要としたわけではありません。核心となる主張 — 判読性は文字と単語のレベルで作られ、大多数の読者には見えない選択がロービジョンの読者にとって決定的である — は、むしろ強化されました。大きなエックスハイト、開いたアパーチャ、識別しやすい字形、十分なサイズ、穏やかなウエイト、ゆとりのある字間は、今も屋台骨となる推奨であり続けています。読書と視力に関する研究は引き続きそれらを支持しています。

変わったのは理由づけです。2005年に私たちがサンセリフを推奨したのは、主にセリフのレンダリングがひどかったからです。今日、セリフかサンセリフかという問いは、エックスハイトと文字の識別性に比べればはるかに重要ではありません。14ポイントを推奨したのは、それより小さな文字が粗い画面で崩壊したからです。今日、16pxの下限の論拠は、ピクセルグリッドではなく、ユーザーのデフォルト、ズームの挙動、WCAGへの適合に基づいています。推奨が生き残っている場合、この版はそれに現代的な正当化を与えようと努めています — 根拠が失効したガイドラインは、悪く適用されがちだからです。

この版の構成

構成は、最小の単位から最大のものへというオリジナルの進行に従い、ひとつの追加があります。

第1部「文字」は、個々の字形の判読性を扱います。スタイル、サイズ、ウエイト、傾き、幅、そして字間を、高密度レンダリングとバリアブルフォント技術に合わせて更新しています。

第2部「単語」は、連続したテキストにおける単語の認識に進みます。大文字と小文字、スペーシング、行長、そして読書のメカニズム。眼球運動の研究が、私たちの思い込みの多くを洗練させた領域です。

第3部「ページ」は、この版で新設されました。2005年には、ページレベルの制御は標準化するには粗雑すぎました。今日では、レスポンシブレイアウト、フルイドなタイプスケール、ユーザー設定のメディアクエリ、ダークモード、リフロー要件によって、ページは第一級のアクセシビリティの対象面となり、独立した章立てに値します。

CSSでは

/* The reading defaults every page can start from */
html { font-size: 100%; }   /* honor the reader's browser setting */
body {
  font-size: 1rem;          /* never below the 16px default */
  line-height: 1.5;
}
article { max-width: 65ch; }

推奨事項

  • 2005年のガイドラインは歴史的な根拠を持つが、特定のレンダリング環境に固有のものとして扱うこと。適用する前に、それぞれを現在のディスプレイに照らして検証すること。
  • テスト可能な床としてWCAG 2.2の達成基準に合わせて構築し、コントラストの指針がどこへ向かうのかについては、WCAG 3.0ドラフトとAPCA研究を注視すること。
  • プラットフォームのアクセシビリティ機構 — rem単位、ユーザー設定のメディアクエリ、リフローに優しいレイアウト — を使うこと。スクリプトで配慮を再発明しないこと。
  • 誰のためのものかを忘れないこと。大多数の読者にとってはいまや任意の磨き上げであるものが、ロービジョンの読者にとっては不可欠なインフラであり続けています。

参考文献