アクセシビリティ対応フォントスタック（ディスレクシア・ロービジョン向け）

アクセシブルフォントスタック

タイポグラフィのアクセシビリティはカラーコントラストだけではありません。フォント選択、フォールバック順序、CSSプロパティのすべてが、視覚的または認知的障害を持つ人々がコンテンツをどれだけ簡単に読めるかに影響します。

宣言

font-family: "Atkinson Hyperlegible", "Lexie Readable",
  Verdana, Tahoma, "Trebuchet MS", Arial, sans-serif;

なぜこれらのフォントなのか？

フォント	アクセシブルな理由
Atkinson Hyperlegible	点字協会が設計；文字の違いを強調（例：1、l、Iが明確に区別可能）
Lexie Readable	ディスレクシア用に最適化されたオープンソースフォント
Verdana	Webセーフ、大きなx-height、広い字間、小さいサイズで高い可読性
Tahoma	Verdanaに似ているがやや詰まった字間、UI要素に適切
Trebuchet MS	特徴的な文字形状のヒューマニストデザイン
Arial	ユニバーサルフォールバック

アクセシビリティのためのCSS強化

フォントスタックに加えて、以下のプロパティを適用します：

body {
  font-family: "Atkinson Hyperlegible", Verdana, sans-serif;
  font-size: 1rem;         /* 最小16px */
  line-height: 1.7;        /* WCAGは1.5以上を推奨 */
  letter-spacing: 0.05em;  /* わずかな字間が可読性を助ける */
  word-spacing: 0.1em;     /* 単語境界の検出を助ける */
  max-width: 70ch;         /* 行長を制限 */
}

WCAG 2.2テキストスペーシング要件

WCAG成功基準1.4.12では、ユーザーが以下をオーバーライドできることを要求しています：

• 行間をフォントサイズの1.5倍以上に
• 段落間隔をフォントサイズの2倍以上に
• 字間を0.12em以上に
• 単語間隔を0.16em以上に

フォントサイズの最小値

本文テキストを16px（1rem）以下に設定しないでください。ロービジョンのユーザーの多くはブラウザズームに依存しています。