PDFのアクセシビリティ対応:入門編

アクセシビリティ・エンジニア 小出

この記事はミツエーリンクスアドベントカレンダー2019 - Qiitaの17日目の記事です。

Webサイトにはアクセシビリティ対応が必要である、ということが浸透するにつれて、サイトに掲載されているPDFをアクセシブルにするにはどうしたらよいでしょうか?というお問い合わせをいただくことが増えてきました。

そこで「WebサイトにおけるPDFとは何か」をあらためて考えつつ、PDFのアクセシビリティ対応について、基本的な内容を簡単に説明したいと思います。

PDFとは

そもそも、PDFとは何を伝えるためのフォーマットでしょうか。
画像であればPNGやSVG、音声であればMP3やAAC、動画であればAVIやMP4などのように、サイトで表現したいコンテンツにはそれぞれ適切なフォーマットが存在します。

PDF(Portable Document Format)は、電子文書のためのフォーマットです。
OSやアプリケーションに依存せずに、ドキュメントを作成したアプリケーションと同一の表示を再現できます(同一性の維持)。

例えばWindowsのMicrosoft Wordで作成されたdocxファイルをMacのApache OpenOfficeで開くと、Windowsとは異なるビジュアルで表示されることがあります。
一方、WindowsのMicrosoft Wordで作成されたPDFファイルは、MacのPDFビューアで開いても表示を再現することができます。
紙の文書のように、テキストだけでなく、レイアウトやデザインのようなビジュアルの同一性も保たれるのがPDFの強みのひとつです。

WebサイトにおけるPDF

前述したように、PDFは文書のテキスト情報以外にも、レイアウトやデザインといったビジュアルに関する情報を持っています。レイアウトやデザインについては、常にPDFというコンテンツホルダーの用意した状態のみでの表示設定である、と言い換えることができるでしょう。

一方、アクセシブルなWebとしては、ユーザーが自身の環境に合わせてフレキシブルに情報にアクセスできるようにすることが求められます。
ユーザーによっては、テキストのフォントの種類を変更したり、色やテキストの行間・文字間隔を変更して、見やすい状態で表示できるよう設定をカスタマイズする必要があります。
PDFでのみ情報が提供されている場合、ユーザーはこうしたカスタマイズができません。
また、PDFの設定によっては、支援技術がPDFの持つデータにアクセスできない場合もあります。

故に、コンテンツオーナーあるいはコンテンツホルダーに、あらためて考えてみていただきたいと思います。

サイトに掲載するPDF文書の情報は、PDFのフォーマットでないと伝えられないものでしょうか?

例えば、紙の文書通りに紙面上部から10cm、紙面左部から2cmの位置にHGS創英角ポップ体フォント、赤い色で「イベント概要」が再現されていないと、イベントの基本情報(テーマ、開催日時、場所など)はユーザーに伝わらなくなってしまうのでしょうか。

すべてがそうではない、と思います。
内容によって、紙面のビジュアルのままでなくてはならないものと、ビジュアルが異なってもユーザーに情報を伝えることができるものに分けられるのではないでしょうか。
ビジュアルがPDFと同一でなくても伝えるべき情報が損なわれないならば、PDFというフォーマットにこだわる必要はなくなります。例えば、PDFと同等の情報をWebページに掲載し、PDFはWebページの情報を補足する従の情報として掲載する、といった方法が取れることになります。

必ずしも、PDFそのものにアクセシビリティ対応を行う必要がないケースがあるのです。

アクセシブルなPDFを作成するには

サイトやコンテンツの構成上WebページにPDFの情報をすべて載せられない、あるいは掲載しているけれどもPDFが主のコンテンツとして重要な要素であるなど、さまざまな要件でやはりPDFにアクセシビリティ対応が必要とされる場合ももちろんあります。

アクセシブルなPDFとはどんなものでしょうか。

アクセシブルなPDFとは?

PDFのアクセシビリティ対応に際して、PDF用の達成基準があるわけではありません。Webと同様にWCAG の達成基準に即するように行われます。

PDF の達成方法

Webページでの対応(作業内容)とPDFの対応(作業内容)の差異がある場合は、次のマッピングを参照して対応します。

WCAG と PDF/UA のマッピング

アクセシブルPDF対応

アクセシブルな PDF の作成で紹介されているように、

  • コンテンツの情報が正しく論理構造化されている(タグ付きPDF)
  • 情報構造に即したナビゲーション機能が用意されている
  • PDF内の画像などの非テキストコンテンツが適切な代替テキストを持つ
  • セキュリティ設定など、支援技術がコンテンツにアクセスできるようになっている

などが必要な対応です。
新規でPDFを作成する場合は、原稿を作成する文書作成アプリケーションで、画像の代替コンテンツをあらかじめ設定しておいたり、見出しレベル(アウトライン)を適切に設定し、その設定内容が反映されるようにPDFを出力します。

障碍のある方が Word 文書にアクセスできるようにする - Office サポート

既存のPDFに対しては、PDFの編集が可能なアプリケーション(Adobe Acrobat Pro)を利用して、タグを付けたりコンテンツの読み上げ順を調整するなどの対応を行います。

アクセシビリティ対応の PDF の作成および検証(Acrobat Pro)

しかし、文書作成アプリケーションで設定した項目すべてがPDFへ反映されるわけではありません。現時点(2019年12月時点)では限定的なため、出力したPDFに対して、さらにアクセシビリティ対応を行う必要があるのが現実です。

一般的に、文書作成アプリケーションでタグ付き文書を作成する方が、Acrobat でタグを追加するよりも良い結果が得られます。

とAdobeの公式サイト(文書作成アプリケーションでのタグ付き PDF の作成)にも記載されているように、作成後のPDFを調整することによって別の問題が生じることが多いので、極力避けたいのですが...。
ここはPDFを生成するツール側の進化を強くお願いしたいところです。

参考リンク

既存のPDFをアクセシブルにする

既存PDFのアクセシブル対応では実際にどのような作業が行われるのでしょうか。

タグが付いていないPDFにタグを付与するケースをご紹介します。

Adobe Acrobat Pro タグパネルとサンプルPDFのスクリーンショット

タグがないPDFを、Adobe Acrobat Proで開き、タグパネルを確認している図です。
タグパネルには「利用可能なタグはありません」と表示されます。

メニューバーから
表示>ツール>アクセシビリティ
を選択し、「読み上げ順序」をクリックすると、「読み上げ順序」ウィンドウが開きます。

見出し、本文、画像(ここでは写真は装飾として扱います)にあたる部分を範囲選択し、「読み上げ順序」パネルでそれぞれに相当するタグをクリックします。
「ミツエーカンファレンス2019「改善DAY」開催報告」を範囲選択した場合、こちらは見出し要素(<h1>)に相当しますので、「見出し1」をクリックします。すると、タグパネルに「<H1>」タグが表示され、問題なくタグが追加されたことがわかります。

Adobe Acrobat Proでタグを付与した際の画面のスクリーンショット

図中、赤枠で囲んだ箇所に、四角で囲まれた数字が見えます。タグを付与すると読み上げ順も振られますが、自動のため、正しい順序で振られない場合があります。

読み上げ順序は「順序」パネルで調整します。

読み上げ順序の修正箇所を赤枠で囲んだ図

このように、PDFの中の情報構造を修正していくことになります。
なんらかのツールで一括して修正する方法は前述のようにリスクが高いことと、タグや読み上げ順の調整を行った際、ビジュアルに意図しない影響を与えることがあるため、確認しながら作業をすすめます。

作業が終わったあとは、Adobe Acrobat Proのアクセシビリティチェックツールなどで問題がないか、またスクリーン・リーダーで実際に読み上げを行うなどのチェックを行います。

参考リンク

最後に

駆け足で紹介しましたが、いかがでしたでしょうか。

PDFというコンテンツをきっかけに、Webサイトでユーザーに伝えたい情報は何か、PDFに限らず、どのような形で情報をユーザーに伝えるのがもっとも適切なのかについてとらえなおしていただくひとつの機会になれば幸いです。