長い URL 及びテキスト文字列をリフローできるようにする

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

この達成方法は、カスケーディングスタイルシート / HTML 技術に適用される。

これは達成基準 1.4.10: リフロー (十分な達成方法) に関連する達成方法である。

解説

例えばコンテンツとして表示される URL など、空白のない長い文字の集合は、ページがズームされたときにリフローがなされない可能性がある。この達成方法の目的は、320 CSS ピクセルに相当する幅において横スクロールバーを、又は 256 CSS ピクセルに相当する高さにおいて縦スクロールバーを導入することなく、URL を表示することである。これは、CSS の手法を用いることによって、使用可能なビューポート領域に適応する形で行われる。
注: ユーザビリティ及びアクセシビリティの観点では、長いURLではなく、人が読解可能なテキストリンクを使用する方がより良い。

デフォルトでは、ほとんどのブラウザは長い URL を下記の文字で折り返す:

これだけでは、長い URL がビューポートをオーバーフローしないようにするには不十分な場合がある。

事例

例 1: 長い URL を折り返す

以下の CSS を使用することで、長い URL は適切な箇所 (ハイフンやスペースなど) 及び単語内で、オーバーフローを起こさずに改行される。

使用される CSS 宣言の一覧とその理由:

  • overflow-wrap: break-word: 単語を区切り、領域内に収まるようにする。
  • word-wrap: break-word: 単語を区切り、領域内に収まるようにする。(Microsoft のみ) 
    a {overflow-wrap: break-word;}
注記

* (ワイルドカード) セレクタを用いた場合のこの宣言は、IE 及び Edge のみサポートしている。

    * { word-wrap: break-word;}

動作例

検証

手順

320 ピクセルよりも幅の広い文字列について、以下を確認する:

  1. 400% ズームが可能なユーザエージェントでウェブページを表示し、ビューポートの寸法 (CSSピクセル単位) を幅 1280、高さ 1024 に設定する。
  2. 400% までズームインさせる。
  3. 水平方向に読まれるコンテンツにおいて、横スクロールしなくても全てのコンテンツや機能が利用可能であることを確認する。
  4. 垂直方向に読まれるコンテンツにおいて、縦スクロールしなくても全てのコンテンツや機能が利用可能であることを確認する。
注記

ブラウザが 400% までズームできない場合は、ブラウザ幅を比例して小さくすることによって検証できる。例えば、300% ズームの場合、ビューポートの寸法は 960 ピクセル幅にすべきである。

期待される結果

3. 及び 4. の結果が真である。