PDF版 JIS X 8341-3:2016, WCAG 2.0早見表／逆引き表作成裏話 (Web Accessibility Advent Calendar 2017)

2017年12月01日更新 | タグ: アクセシビリティ, 技術情報

Web Accessibility Advent Calendar 2017の12月1日を担当させていただきます、有限会社時代工房の柴田です。

印刷の「ポイント」の使い道

時代工房は、ウェブ制作会社なのですが、印刷物の作成も行なっています。で、印刷会社さんに入稿をするのですが、たくさんの印刷物を入稿していたら、なんといつのまにか印刷会社さんのポイントが随分と溜まっていたのです。

「何か良いポイントの使い道はないか」と仲間で話し合った結果、今回の早見表が生まれることになりました。

僕は、恥ずかしながらどうも物覚えが悪く、原則、ガイドライン、達成基準を覚えられないのです。ので、基本的には我がために作ったのですが、どうせ作るなら、時代工房のお客様で、ウェブサイトの更新担当をしているひとたちのお役に立つものを作れないかということになり、「逆引き」を作ったという次第です。

余談ですが、営業トーク用に語呂として覚えているのが、「4つの原則、12のガイドライン、61の達成基準……達成基準が60だったら綺麗に倍数なんですけどね。」ということばです。達成基準が60に近似値なので、これで数はなんとか覚えられています。

さておき、この早見表。手元に置いておいてずっと使うのだから、頑丈なものにしたいということで、厚紙版とラミネート版どちらをつくろうか、という検討がありました。しばらくうんうん唸っていたのですが、

でべ（尾内）: ポイントはたくさんあるから、両方作ったら？
柴田: 神かっ！？

というわけで、今回は二つとも作ってしまいました。正味、厚紙版は趣味に走りすぎてるかなという気もして、増刷するとしたら、ラミネート版にすべきかしらと思っていますが、これは、現在、プレゼント分がだいたいはけたら、Twitter上でアンケートでもとりたいと思います。

PDF版を作ろう

さておき、紙はできたので、やはりPDF版ということに相成るわけですが、ここで担当者の一人が、「コマシなPDFにしたい」と言いだしました。なるほどな、というわけで、以下ページに「これはコマシではないかというPDF版」を本日アップしました。

PDF版 JIS X 8341-3:2016, WCAG 2.0早見表／逆引き表

コントラスト

最初に取り掛かったのが、コントラストの見直しでした。最初に意識しておけばよかったのですが、今回の印刷版では、オモテ面、「理解可能」の「オレンジ色の背景色に白」のコントラスト比が3:1程度でした。文字の大きさは9ポイント。とても3:1が許される「大きい文字」とは言えません。でも、4.5:1を目指すと、どんどん赤に寄って行ってしまい、現在の「堅牢」との区別がつきにくくなります。

しかし、弊社デザイナ陣によれば、「オレンジと白」で4.5:1を確保するのは難しいらしく、最近デザインするときには、あらかじめ忌避しているのだそうです。

というわけで、おもいきって、配色を変更しました。

もともと、印刷版の「堅牢」は、真っ赤だったので、逆引き表の「非干渉」のような「強い印象」があり、やりすぎかなと思っていたので、今回の配色変更で落ち着いたと思います。

ちなみに印刷物として作成した2017年11月版の4つの色は、WordPress用プラグインjwp-a11yの「4つの原則」で使った配色でした。

「4つの原則」の色

ウェブ上で閲覧する際は大きな文字だったのですが、印刷物を作る時には、小さい文字になるという事例で、ウェブと印刷物などでカラーポリシーをたてる際など、コントラスト厳しめの構成は最初からある程度意識しておいた方がいいかな、と思われました。

勝手に画像化されてしまう文字列

InDesignからPDF（インタラクティブ）を生成したところ、なぜか、以下の部分（達成基準と原則）が、すべて画像化（いわゆるアウトライン文字列）になってしまいました。

達成基準の領域を指し示した図

数時間試行錯誤したのですが、結論的には、早見表の原則ごとのまとまりを表す背景色のベタ部分についていた、「ベベルとエンボス」をとりさると、「勝手に画像化」をとめることができました。

デザイン担当者によれば、文字に係る箇所に効果をかけると、PDF時に文字が勝手に画像化することはよくあるようで、文字列が取得できなかったら、いまごろメソメソと泣き暮らしていることでしたでしょう。

InDesignでの構造化について

InDesignでは、見出しなどの構造化ができます。しかし、この構造化が複雑な入れ子になっていくと、PDF化の際、期待したことと違うことが起こるようでした。

たとえば、InDesignで付与した構造が、PDFでは大きく失われてしまうことがありました。

あえて、HTMLで説明します。

<!-- 一番外のtable -->
<table>
<thead>
	<tr>
		<th><h2>1 知覚可能</h2></th>
	</tr>
</thead>
<tr>
	<td>
		<!-- ひとつ内側のtable -->
		<table>
		<tr>
			<td><h3>1.2 時間依存メディア Time-based Media</h3></td>
		</tr>
		<tr>
			<td>
				<!-- 一番内側のtable -->
				<table>
				<tr>
					<td>1.2.1  音声のみ及び映像のみ(収録済)  A</td>
				</tr>
				<tr>
					<td>1.2.2  キャプション(収録済)  A</td>
				</tr>
				</table>
			</td>
		</tr>
		</table>
	</td>
</tr>
<table>

当初InDesignでは、HTMLで表現すると、上述のような構造を持っていました。

僕たちが頭を悩ませたのは、入れ子になっている「一つ内側のtable」「一番内側のtable」が、なぜかまとめてh2として解釈されてしまうという現象でした。

Acrobat Proのタグのツリー構造を表す画面

このツリー図では、<Figure>という構造の中にひとまとまりで

1.1 テキストによる代替 Text Alternatives 1.1.1 非テキストコンテンツ

と入ってしまっています。結果的には、このFigureの中で個別に付与していた、h3などの構造化が、破棄されていました。

構造が破棄されてしまうことで、InDesignで付与したリンクなどは、どの文字列がどのリンクに対応しているのか、も失われてしまいました。

InDesignで入れ子の構造化を行うと、PDFで一番外の構造だけが有効になってしまうという「仕様」によるものとわかり、デザイナが入れ子の構造を見直すことで、InDesignで付与した構造がなるべく生き残るようにしました。

見出しの付与

次に取り掛かったのが、「見出しの付与」でした。いわゆる「タグ付きPDF」ですね。この早見表は、Adobe InDesignで作っています。InDesignには、段落のプロパティ設定があるので、これでPDF生成時にh1〜h6を付与できます。「早見表」をh1とし、「原則」をh2、「ガイドライン」をh3としました。

でも、ただつけるだけでは、NVDA+FireFoxなどでも見出しとして認識してくれませんでした。

これはのちの調査で、Adobe Readerがインストールされている環境と、そうでない環境で振る舞いが違うことがわかりました。

Adobe Readerをインストールすることで、InDesignで付与した見出しが機能します。

タグ付きPDFの機能を利用するにはタグ付きPDFに対応できる環境を用意する必要があるようです。

「装飾的な図」の設定（Acrobat Pro）

これより下の作業は、InDesignでの作業でなく、InDesignで出力したPDFをAcrobat Proで加工する作業でした。

「A」「AA」などを囲む四角がPDF化の際、あまり意味を持たない要素として、しかし読み上げの対象になる形として残りました。読み上げる時には「パス」と読み上げ、これが頻繁でやや煩わしかったので、代替テキストの設定で「装飾的な図（ウェブで言うところの「空のalt」）」としておきました。

プロパティ（Acrobat Pro）

印刷物にはなく、PDFにあるもののひとつにファイルのプロパティがあります。PDF化するにあたって、プロパティを付与しました。

目次の付与（Acrobat Pro）

Acrobat には構造（ストラクチャ）から目次を生成する機能があるので、目次もつけちゃいました。

お願い

なお、ここまで作ったのですが、弊社環境ではWindows NVDAでは、うまいこと読むのですが、PC Talker+Adobe Readerとnarrator+Adobe Readerでは、全く何も読み上げなくなってしまいました。iOS VoiceOver+Adobe Readerでも、リンクの読み上げなどに不自由がありました。

これら環境をお持ちで、なにかしら「こうするといいよ」というのをご存知の方、教えてもらえると嬉しいです。早見表にフィードバックします。

まとめと次の早見表について

僕たちができる「コマシなPDF」は、時間的制約もあって、今回のような対応になりました。

今回は、僕たち自身ノウハウを育てたいという思いもあって、InDesignの構造からの見直しを行いましたが、柴田個人としては、グラフィックデザイナに、これを要求するのは、少々酷な話であるように思っています。

もちろんInDesignの担当者がここにあるようなノウハウを持つのは良いことだとは思います。

たとえば、PDFでは、tableで組んだ文字列は、「何行何列の何処である」というようなことをあわせて読み上げるため、それなり複雑な読み上げになるようでした。これを入れ子にすると、スクリーンリーダには、それなりに難解な状態になります。

ので、なんとなく、「tableの入れ子は避けて作る」くらいの簡単なノウハウに落とし込めないものかと思っております。

というわけで、早見表の今後の予定なのですが、3つ考えています。

一つが「デザイン業者向け PDF作成ガイドライン」です。

チラシなど作成した後、ウェブサイトにも載せたい、ということはしばしばあります。そのとき、「ここをおさえて作ると、マシなPDFになるよ」という注意点をまとめたペーパーになる予定です。

次が、「映像プロダクション向け動画作成ガイドライン」です。

これもPDF作成ガイドラインと同じく、業者向けにウェブに掲載する動画作成の要点をまとめて提示します。知り合いの映像作成の業者でも「そういうのがあるなら欲しい」という要望ももらいましたので、もしかするとニーズがあるのかなと思っています。

最後が、「業者向けでない PDF作成ガイドライン」です。行政等の担当者がウェブサイトを更新する際、つい、PDFを作って、ポンと置くだけということをやりがちです。むろんHTMLをあげてほしいところですが、「情報ゼロ」の状態より、PDFが上がってる方がなんぼかマシです。そのマシの度合いを少しでも高くすることができたらと思っています。

というわけで、アドベントカレンダー2017、12月1日を終えます。

明日はみるくさんの回（Re: A Responsive Accessible Table）ですね。

ではでは、