7.14 HTML ページのアクセシビリティを向上させる

HTML 出力文書に, 何らかの視覚的な障害を持つ読者に対するアクセシビリティをもたせることは重要です. たいていの場合, こういった読者は文書を視覚的に読む代わりに, スクリーンリーダ (音声読み上げソフト) といった聞くための特殊なツールを使います. 通常はスクリーンリーダはテキストを読み上げることができるだけで, (ラスタ) 画像を読み上げられません. つまりあなたはスクリーンリーダに十分なテキストでヒントを与える必要があるということです. 良いニュースは, わずかな労力があればあなたの文書のアクセシビリティを格段に向上できるということです. Jonathan Godfrey が R Markdown 文書のアクセシビリティのためのいくつかのヒントを https://r-resources.massey.ac.nz/rmarkdown/ で記事にしています.30 この記事に基づいて, 本書の読者にとっての利便性になるいくつかのヒントを以下に提示します.

  • HTML 文書はしばしば PDF よりアクセシビリティが優れている.

  • 可能ならば HTML 出力文書に Rmd ソース文書を同梱するようにする (例えば7.7節でその方法の1つを実演しています). HTML 文書にアクセシビリティがない場合, 視覚障害者は Rmd ソースから内容を理解できるかもしれませんし, ソースを修正することもできるかもしれません.

  • グラフのタグにテキストで情報を含ませる. 2014年の useR! カンファレンスで, 私は Jonathan からこの問題を個人的に教えてもらいました. web ページ上の画像の alt 属性の大切さを, 私は初めて理解しました.

    この問題を理解するために, まずは web ページの画像が HTML タグ <img /> によって生成されることを知らなければなりません. このタグは src 属性を持ち, 画像ファイルのソースの場所を指定しています. 例えば <img src="foo_figures/image.png" /> のように. 視力のある読者はこの画像を見ることができますが, 視覚障害者には描かれていることを知るのは難しいのです. それはスクリーンリーダは, 特にラスタ画像の場合, 画像を読むことが出来ないためです (SVG のようなベクタ画像は多少ましかもしれませんが). この場合テキストでのヒントを与えると, スクリーンリーダは読み上げることができるので便利です. このテキストでのヒントは画像の代替 (alternate) テキストを意味する alt 属性で与えることできます.

    R Markdown のコードチャンクから生成された画像の場合は, もしチャンクオプション fig.cap (つまり 画像のキャプション, figure caption) が設定されているなら alt 属性はここから生成されます. 代わりに Markdown 構文 ![]() を使って画像を挿入することもできます. 画像パスをパーレン () 内に入力し, alt テキストをブラケット [] 内に入力, 例えば ![テキスト情報](パス/image.png) のように.

    alt テキストは視覚のある読者にとっては HTML ページ上に表示されません. しかし画像にキャプションや代替テキストを与えた場合, rmarkdown::html_document フォーマットはデフォルトでキャプション要素を表示します. もし実際にキャプションを表示させたくないなら, このように fig_caption をオフにすることができます.

    output:
      html_document:
        fig_caption: false

    このケースでは alt 属性はまだ生成されますが, 表示されることはありません.

  • 数学的なコンテンツを書くには画像の代わりに LaTeX 構文を使う (例: $ $, あるいは $$ $$). デフォルトでは, R Markdown は数学的なコンテンツのレンダリングに MathJax ライブラリを使い, 結果としてスクリーンリーダが読み上げられるものになります.

  • チャンクオプション comment = "" を設定してコードチャンクのテキスト出力の行頭の ## を除く (11.12節参照).

我々はアクセシビリティの専門家ではありませんので, 詳細を知りたければ元の記事を読むことをお薦めします.


  1. JooYoung Seo も, 視覚障害を持つ人の手助けになる R パッケージを https://jooyoungseo.com/post/ds4blind/ で紹介しています. これは R Markdown と直接関係しませんが, 視覚障害者がどうグラフを読み取っているのかを学ぶのに役に立つでしょう.↩︎