Orangebomb

アクセシブルにするならSlideShareを選ぶべき？SlideShareへのアップロード方法

Tags

Keynoteなどでスライドを作成し、スライドのSNSへアップロードし、シェアする。多くの人が行なっているこの行動、場合によってはスライドの中身にアクセスできないことがあるという事実を知った。そこで、そのようなことが起こらないようにアクセシブルなスライドにするにはどうすればよいのか？という部分に関し調査・検証を行なったので記録する。

アクセシブルとは？

まずは「アクセシブル」という単語について。

アクセシブルデザインは、高齢者・障害のある人々の利便性を配慮しつつ、健常者の利便性も確保することを目的として、従来の設計を高齢者や障害のある人々のニーズに合わせ拡張することによって、製品、サービス、建物などがそのまま利用できる潜在顧客数を最大限に増やすための設計ということができます。これにより、ビジネス拡大の効果を得ることが可能になりますが、ビジネスを最優先させるのではなく、高齢者や障害のある人々の利便性を高めることが主たるねらいです。 アクセシブルデザインは、ISOにおける ガイド71 の議論において、高齢者・障害のある人々が健常者と同様に社会システムにアクセスできる言葉として定義されています。

出典：共用品推進機構 - アクセシブルデザイン関連JIS・基本規格

このように書かれることが多いが、僕は どのような条件であろうと誰しもが同じようにコンテンツにアクセスすることができること という認識をしている。僕にとって「障害者対応」という言葉は本質的ではなく、目が見えなかったとしても、耳が聞こえなかったとしても、テクノロジーを利用すれば健常者と同じようにコンテンツを参照できるのだから、当然そうあるべきである、というもの。（似て非なるもの、というか。やっていることは同じかもしれないが、捉え方の問題）

アクセシビリティと、スライドのアップロードに関する事情

ここからは、スライドとアクセシビリティの関係について。

（１）SpeakerDeckでは情報（スライドの内容）にアクセスできない

以前、スライドをSpeakerDeckにて公開した時に、スクリーンリーダーユーザーである @ma10 さんが以下のようなツイートをなされていた。

驚いていると、 @magi1125 さんからアドバイスのメッセージをいただいた。

  • SpeakerDeckはスライドを画像として表示するのみである
  • テキスト情報として内容にアクセスすることができない

なんてこった…

（２）SlideShareの場合は中身を読みテキストとしてWebページ上に表示される

SpeakerDeckに関しショックを受けたところで、「SlideShareならばその問題が起こらない」という情報も得た。

  • 文字を画像にしない等、適切な方法でSlideShareにアップロードすればスライド内のテキストを抜き出してくれるため、スクリーンリーダーユーザーでも内容を把握することができる
  • スクリーンリーダーで読み上げることが可能＝視覚以外でアクセスが可能

しかし、SpeakerDeckだと起こる困ることは起こらなくても、SlideShareにはSlideShareならではの困ることがあるのであった。 僕はスライド作成にはKeynoteを使っている。困る問題とは、Keynoteバージョン6以降で生成したPDFをSlideShareにアップロードすると、作ったスライド上からテキスト部分がすべて表示されなくなってしまう、という問題だ。実際はそこにあるけどただ映らないのみ。スライド外にテキスト出力はされていた。 今回、どのようにすれば問題なくSlideShareにアップロードすることができるのかを調べた。

Keynoteで作ったスライドをSlideShareにアップロードする手順

そのうちSlideShare側がバグを解消してくれるのでは？という点に関して。KeynoteのスライドをSlideShareにアップロードすると日本語が表示されない問題 - Qiita / 公式の回答 によると、残念ながら前述の文字が消える問題を解決する対応は時間がかかるようで、こちら側が頑張らないといけない… @magi1125 さんがツイートしていた解決策をベースに進める。

この検証では以下のバージョンを使用する。

  • Keynote バージョン7.2（4582）
  • Adobe Acrobut Pro DC バージョン 2017.009.20058

結論から言うと、

カスタムサイズで160/90mm or 160/120mmに設定して「AcrobatでPDF保存」的なのを選ぶ。

いろいろ試行錯誤したもののここがどうしても実現できなかった。 今回行なった手段は、

  • Adobe Acrobat Proを用意（少なくとも2016年8月時点での最新版が必要？）
  • Keynote「ファイル」→「プリント」→ 形式で「Save as Adobe PDF」を選択
  • Adobe PDFの設定は「標準」を選択・保存
  • Adobe Acrobat Proで展開、無用な余白をトリミング・保存
  • SlideShareへアップロード

という流れ。画面を見つつ解説すると

keynoteの画面

まずはKeynoteメニューの「ファイル」→「プリント」。

keynoteメニュー

左下にある「PDF」を「Save as Adobe PDF」に変更する。Adobe PDFの設定は「標準」を選択。

プリント画面

Adobe Acrobat Proで先ほどのファイルを開き、右側の検索窓から「トリミング」と検索（どこにあるかわからなかったので検索した方が早かった）。その後「ページをトリミング」を選択。

Adobe Acrobat Proの画面

トリミング範囲を指定した後、詳細画面が表示される。16:9のスライド場合、「余白の制御」は上下「21ミリ」ほどで綺麗になった。ページ範囲の項目では「すべて」を選択。これで全ページに同じトリミングが適用される。その後保存すると、PDFの完成。

トリミング詳細画面

完成したPDFをSlideShareへアップロードすると、文字も消えておらず無用な余白もない綺麗な状態かつアクセシブルなスライドにできる。 次に、Adobe Acrobut Proが手に入らず、使わないでやる必要がある場合の方法を記載する。

Adobe Acrobut Pro を使わない場合

Adobe Acrobut Proを使わず、SlideShareへスライドをアップロードするにはどうするとよいか？

（１）Keynoteの場合（文字が消えるバグの回避法）

  • Keynoteの書き出しの「イメージ」を選び、すべてのページを画像で書き出した後、全ページにひとつずつ画像をかぶせ、通常のPDFで書き出し、アップロードする
    • 余白問題は解消され、スクリーンリーダーでも読める状態
    • しかし画像だと多少文字がギザる、大きな手間がかかると言うデメリット
    • とてもナンセンスな印象
  • ヒラギノなどOS Xの標準フォント以外のフォントを使う（ KeynoteのスライドをSlideShareにアップロードすると日本語が表示されない問題 より ）
  • 文字が消える事象が起こるKeynote6より前のKeynote5以前を使う？（手に入るかはわからないが…）

（２）Keynote以外の場合（おそらく文字が消えるバグは起こらない）

  • Googleスライド
  • その他スライド作成アプリケーション

などの手段がある。

完璧は難しい。「割り切ること」も重要なこと

今回の件を調べるにあたり、SlideShareにアップロードできたと言っても、「それだけで完全にアクセシブルなのか？」という疑問を持っていた。

  • SlideShareでは自動出力されたテキスト情報は改行や段落がなくなるので認識しにくいと思うが、テキスト情報だけで読む人は、どのように脳内補正している？
  • テキスト情報の内容は重複してもいいのか？（差分表現で、差分箇所以外は同じものを何度も掲載することになる）
  • 図解に関しどのようにテキスト化すればいい？
  • 自分一人ならすごく気にすればこれらを解決できるかもしれないが、人に続いてもらえるようなフレームワーク化とか無理では…

などということについて頭を抱えおり、ちょうどそのころ参加した勉強会 !important #04 -特盛！アクセシビリティスペシャル- でお会いした @magi1125 さんにこのことを相談させていただいた。すると、

  • 「全く読むことができない」という状況から「読めるようになった」それでけでも大きい変化だと割り切ることも大事
  • 「完璧」は難しいこと。そしてスライドの作成者次第な部分が大きすぎる

という回答をいただいた。割り切るという視点が欠けていたため、目が覚めたようだった。

余談１.SlideShareにアップロードしたスライドを削除する方法

テストで文字が消えてしまったスライドを削除しようとしたところ、消すまでにかなり迷った。（バグなのか、「Edit」→「Delete presentation」では消えないことがあった） 最終的には SlideShare ファイルを削除する | LinkedInヘルプ にたどり着くことで解消できた。

  • SlideShare にサインイン
  • 右上のプロフィール写真にマウスをポイントし、「My uploads」を選択
  • 削除するプレゼンテーションの左上のチェックボックスをオンに
  • 「削除」をクリック

とのこと。

余談２.一応ある？SpeakerDeckのスライドをスクリーンリーダーで読む方法

こういう裏技も一応あるようだ。 SSSSLIDE…スライド集約サイト？

所感

アクセシブルにするためにこのような努力が必要である今の状況には不満がある。 Keynoteの文字が消える問題の解決対応がまだ先になりそうなSlideShareも、テキストデータが出力されないためにスクリーンリーダーでは読むことができない状態であるSpeakerDeckも。ただPDFで出力してアップロードさえすればスライドの内容になんの無理もなく誰もがアクセスできるようになる未来を望んでいる。 …と言いつつ、自分の携わっているものがすべてアクセシブルかと言われると違う。もっと頑張らないといけない。もっと勉強と実験を繰り返し、関わるものを可能な限りアクセシブルにしなければ。

そして、この件で相談に乗っていただいた @magi1125 さんには本当に感謝しかありません。ありがとうございます！

【7/20追記】Acrobutでのトリミングなしで済む方法

この記事を公開したところ、@magi1125 さんからフィードバックをいただけた。

カスタムサイズで160/90mm or 160/120mmに設定して「AcrobatでPDF保存」的なのを選ぶ。

いろいろ試行錯誤したもののここがどうしても実現できなかった。

わからなかったこの部分の解決方法を教えていただけた…！圧倒的感謝。（僕は印刷画面UIが苦手っぽい。「ページ属性」という項目の意味が理解できなかった）

Keynoteの以下の「プリント」の設定画面のところで下部にある「詳細を表示」から進む。

プリント画面

ダイアログ中段の 「Keynote」と書かれたセレクトボックスで「ページ属性」を選択。

プリント詳細画面

ダイアログ中段のセレクトボックス

「用紙サイズ」のセレクトボックスで「A4」になっているところを「カスタムサイズを管理…」に変更。

用紙サイズの変更

新しいサイズを設定できるので、左側の 「+」から新規サイズを追加する。 「90mm」「160mm」と指定すればOK。 （4:3のスライドの場合「160mm」「120mm」と指定すればよい）

用紙サイズの変更画面で専用のサイズを指定

こうすれば、Acrobatでトリミングせずとも余白がない状態で出力できる。形式は前述の通り「Save as Adobe PDF」！ そのあとはSlideShareアップロードすればOK。