グラフや図解の説明テキスト
ウェブコンテンツの中で、視覚的な情報提示としてグラフや図解を用いる場合、アクセシビリティ (特に視覚障害者に対する情報保障) はどのように両立したらよいでしょうか。主宰しているウェブアクセシビリティの勉強会で、質問が寄せられたので、考えてみました。
グラフも図解も「画像」なので、alt 属性で代替テキストを記述すれば...とまずは思うかもしれません。ただし、alt 属性内に要約をコンパクトにまとめられればよいのですが、多くの場合、グラフや図解は情報量が多いため、テキストに起こしてみると記述は説明的で長くなりがちです。また、alt 属性内のテキストはセマンティックに構造化することができず、長いテキストでも平坦な記述 (情報の優先度付けなどのない「べた書き」) にならざるを得ないため、スクリーンリーダー利用者は代替テキストを取り敢えず最初から最後までひととおり音声で読み上げて理解するしかなく、結果として認知負荷が高くなってしまう恐れがあります。
以上を勘案すると、グラフや図解に対する情報保障は、代替テキストのみに依存するのではなく、グラフや図解に併記する本文コンテンツとして、構造化されたテキストを提供するのがよいだろうと考えます。たとえば、データを視覚化したグラフであればデータテーブル要素 (<table>) を、手順や優先度を示すグラフィックであれば見出し要素や番号付き箇条書き要素 (<ol>) を用いて、セマンティックにマークアップした説明テキストを用意するのです。
これらセマンティックな説明テキストは、グラフや図解に隣接する形で配置します。ビジュアルデザインとして見た場合、説明テキストの存在が冗長になってしまう場合は、デフォルトでは説明テキストを折り畳んでおき、ユーザーの任意によってインレイで展開表示できるようにしておく、という形でもよいでしょう。
インレイ (inlay) とは、オーバーレイ (overlay : ページの上に重ねる形で情報を表示すること) と異なり、ページ内に挿入する形で、情報を追加表示する UI パターンです。
なお、説明テキストを折り畳み / 展開させる場合は、WAI-ARIA の「aria-expanded」属性を実装し、説明テキストの表示状況、つまり展開されているのか (aria-expanded="true") 折り畳まれているのか (aria-expanded="false") が、スクリーンリーダー利用者にも音声読み上げで適時伝わるよう、配慮しましょう。