本文へ移動
デジタル庁
デザインシステムβ版

メニュー

タイポグラフィ（アクセシビリティ）

    タイポグラフィにおけるアクセシビリティ観点での留意点について説明します。

    閲覧者による表示フォントの変更

    • タイポグラフィをどのように設計していたとしても、ウェブサイトの技術的仕様上、ユーザーエージェントによって表示に使うフォントファミリーやフォントサイズは変更されることがあります。たとえば、ディスレクシアの当事者などが、自身の読みやすいフォント（UDフォント等）に変更して表示したり、ロービジョンのユーザーが画面全体の表示あるいはフォントサイズを200%以上に拡大して閲覧したりなどです。
    • テキストサイズが変更されてもページの読みやすさや提供される機能が変わらないようにしてください。レスポンシブデザインを正しく実装しておくことで対応できます（レスポンシブデザインはPCとモバイルデバイス等の画角の異なる環境での表示に対応するためだけでなく、単一のデバイスにおける表示の拡縮にも対応した表示を実現する手法です）。
    • フォントを変更させないことを企図して、文字画像を使ってはなりません。
      • ロゴタイプのように、文字画像であることが必要不可欠な場合を除きます。

    参考情報

    イタリック体を使用する場合の留意事項

    • 文章の長い範囲がイタリック体（または斜体）で表示することは、失読症のような認知障害の当事者にとって閲覧が困難となるため避けてください。
    • 日本語フォントは通常イタリック体の書体をもたないため、イタリック表示は標準のフェイスを傾けただけの斜体を合成して表示します。そのため可読性が優れない表現であり、文章の長さに関わらず、日本語でのイタリック体の使用は最小限にとどめてください。

    テキスト表示に関する留意事項

    • 読み書き障害または視覚障害のある人は、自身が読んでいる文章の位置を把握し続けたり、テキストの行送りを目で追うことが難しいため、長い行のテキストを読むことに困難があります。
    • 認知障害のある人はテキストを目で追うのに困難があるため、行間の小さい文章だと読んでいる位置が分からなくなりがちです。行ボックスの高さをフォントサイズの1.5倍以上にし、また段落と段落の間を行ボックスの高さの1.5倍以上（フォントサイズの2.25倍以上）とするなど、読みやすさに配慮しましょう。
    • タイポグラフィの設計に関わらず、読み書き障害又は視覚の障害のある人のコンテンツ閲覧を考慮し、テキストブロックのグリフ幅は半角80文字（全角40文字）程度を目安とすることが求められています。
      • しかしながら、コンテンツによっては、読みやすさよりも開示する情報の網羅性を優先したほうが望ましい場合があります。そのため、半角80文字（全角40文字）程度の目安を適用すべきかどうかをコンテンツごとに判断する必要があることに留意してください。
      • たとえば「コンポーネント: 緊急時バナー」では、コンポーネントの性質上、必要となる案内を余すことなく提示したほうが良いと考えられ、この目安の制約を受けない構造としています。
      • また、読みやすさを確保するための工夫が複数実装されている場合は、この目安の制約を受けないテキストブロック幅にしても構わないものとします。工夫の例は以下のようなものです。
        • リキッドレイアウトまたはレスポンシブデザインで作り、ユーザーが任意のウィンドウサイズやフォントサイズに変更することができる。
        • 本文に先立って、短い概要を提示している。
        • 予想読了時間または本文の文字数を表示している。
        • ページ内リンク等による目次を提供している。
        • 見出し、段落、箇条書き、挿絵等の適切な使用により、視覚的および意味的に本文の構成が明確に伝わるようにしている。
        • どこまで読んだのかが把握しやすくなっており、2回以上の機会に分けて本文を継続して読むことに支障がないように配慮している。

    参考情報