グラフィック小説をオンラインで公開していますか？
私の雇用主は毎年ライティングコンテストを開催しています。毎年、各カテゴリの上位3つの結果をWebサイトに公開しています。大きな問題ではない。今年、グラフィック小説のカテゴリが追加されました。
これをサイトに公開するための標準およびベストプラクティスは何ですか？ PDFはアクセシビリティにとってひどいものになると思います。私の直感は、それをスキャンしてJPGを作成することです。テキストを段落に転写するのがベストでしょうか、それとも代替テキストのままにしておくのがベストでしょうか？
任意の助けをいただければ幸いです。
PDATE：私の最終的な解決策は、以下の答えの断片を持っていると思います。
- 表示とダウンロードの両方のオプション
- ダウンロードにより、印刷品質を求めている人のためにPDFが起動します
- Viewは、ヘッダーが企業のブランディングだけに削除された新しいウィンドウ/タブを選択します。
- ビューには現在のページのフルページJPGがあり、前後に移動するために切り替わります。
- ビューには、プレーンテキスト、ページ上のシーンの段落ベースの説明も含まれます。このテキストは、CSSを使用するブラウザーでは非表示になります。
- ビュー画像には、画像が何であるか（IEのタイトルとページ）を定義する代替テキストがあります。
これはすべてのベースをカバーするものの、投稿するのに比較的苦痛はありません。
しばらく前に、Googleの非常にクレイジーなグラフィック小説+ canvasの実験を見ました。すべてのテキストはプレーンテキスト（優れたアクセス可能性）でしたが、すべての画像ははっきりと見ることができました。私はそれを見つけることができないようですが、 私が学んだ20の事柄 は私が意味することを示しています。
私はそれがあなたがやりたいことに対してやり過ぎだと思うので、私はこれをします：
<img src="page1.jpg" alt="Page 1" width="800" height="1000" />
<div class="hidden">
<h1>Panel 1</h1>
<p>Name1: Lorem ipsum....</p>
<p>Name2: Lorem ipsum....</p>
<strong>WOOSH</strong><!-- Sound Effect -->
<h1>Panel 2</h1>
<p>Name1: <em>Lorem ipsum....</em><!-- Emphasis on words -->
<!-- And so on -->
</div>
そして、私はdivを次のようにスタイルします：
.hidden { text-indent: -9999em; }
このようにして、見る人に見えるように画像がはっきりと見えるようになり、スクリーンリーダーが読み上げるためのプレーンテキストになります。コミックの転写をaltタグに入れることもできますが、私のやり方では、転写にもっと意味的な意味を入れることができます。
また、text-indentを切り替えるJavascriptを追加して、見にくい人が見たい場合に表示できるようにすることもできます。
HTML5とcanvasを使用して、「 Never Mind The Bullets 」を確認する必要があります。それがどれほど利用しやすいかはわかりませんが、いくつかのアイデアが得られるかもしれません。ただし、HTML5のアプローチではIE8以下は除外されることに注意してください（IE9でも問題ありません）。あなたの聴衆によっては、それは初心者ではないかもしれません。
HTMLには、「長い説明」のURLを指す longdesc 属性があります。たくさんのaltタグではなく、それを使ってみませんか？
おっと、それは大変なことです。アクセシビリティの良いグラフィック小説のようなものを提示するのは本当に難しいです。画像はPDFよりもはるかに優れていますが、あなたはそれについて正しいです。また、ページ全体はもちろん、各ペインの説明全体を代替テキストとして配置することはお勧めしません。最良の方法は、トランスクリプトを使用して段落を追加し、画像が何であるかを示すインジケータとしてaltを使用することだと思います（alt="graphic novel x, page y"）。
たぶんそれを声に出して読み、それをオーディオファイルとして提供するのはアイデアでしょうか？
HTML5の新しい要素を選択してみませんか？
アクセシビリティについては、多くの 小さなスクリプト （Remy Sharpによって作成されたもののように、 http://whatwg.org の例のセクションで入手可能）またはライブラリを使用できます。 （ modernizr ）。
今私の解決策：jpegをすべてスキャンし、 figure element with figcaption を使用して、すべての画像をimgタグとして追加し、アクセス可能な状態に保ちます。もちろん、代替テキストを使用します。 alt属性の使用に関するHTML5セクション を読んでください。これがアクセシビリティにどのように役立つか、いくつかの素晴らしい例があります。
編集
本当にアクセスしやすいレベルを探している人のために、HTML5の新しい要素、CSS @ font-face、非表示にするバックパディングテキストなど、信頼できるすべての新しいリソースを削除しましょう。生のPOSH（Plain Old Semantic HTML）に取りかかりましょう。
私は次の極端な生のソリューションに行きます：jpegを作成し、alt属性を使用して、HTML5ガイドと同じように、必要なだけすべてを記述しますが、強化された、つまり非常に非常に説明的なテキスト（ alt属性のサイズに制限はありません）。
<img src='novel15/image24.jpg' alt='As Mr. Smith enters the room, he sees his brother with a knife stabbed in the chest and, in with a horror face scream out loud: "Nooooooooooooooo!"'>
1つの詳細に注意してください。テキストをレンダリングするときのJPGはひどい場合があります。 very高品質でエクスポートするようにグラフィックソフトウェアを設定する必要があります。もしそうなら、OKルートです。 PDFはクラッシュします/実際には多くのブラウザ/マシンでロードするのに時間がかかります。しかし、それが唯一の選択肢である場合があります。コンテンツ、視聴者に依存します... HTML 5で見られる問題はまだ完全には採用されていないようです...高度なフラッシュソリューションも利用できます（PDFに回答しました）フラッシュフリップブックの質問はこちら）
JPGルートに行く場合は、irfanview.com（Ksで小さなjpgを作成することもできます）をお勧めします。デスクトップイメージビューアーとして優れた無料ユーティリティだけでなく、バッチ操作とフィルターを備えたバッチコンバーターもあります。これはJPGルートに不可欠です。
編集：あなたは「テキストとして残す」オプションについて話します。プログラマーの助けが必要な場合は、テキストデータと画像を処理して、フォーマットされたhtmlを出力するソリューションを探してください。それだけです。 htmlをエクスポートする、このような無料のユーティリティがいくつかあると思います。それはjpgテキストの問題を取り除きます（しかし、すべてのjpgルートに行く場合でも、実際には、大きなjpgは肥大化したpdfまたは他のソリューションよりもロードにかかることが少なく、クラッシュしにくいでしょう...）
それは考えさせる質問であり、あなたの答えはかなり多様です。最良の答えを選択することはかなり主観的ですが、議論と答えの違いは誰にとっても役に立つでしょう。
とはいえ、ここにアイデアがあります...
ここに私の要件の解釈があります：
- 既存のサイトの構造、特にページングパラダイムに適合させる
- ストーリーの実際のテキストをテキストとしてブラウザーに提示します（「アクセシビリティ」）。これにより、検索エンジンによるページの外部インデックス作成や、サイト検索（ある場合）、オンページSEOなどの他の機能も有効になります。
- 芸術的整合性を維持：アーティストが手書きしたとおりに各セル内にテキストを表示します。
- 可能であれば、ページに一緒に描画されたすべてのセルを提示します。 [小さなセルは「セル」と呼ばれていますか？私はアートワークのような漫画本を思い描いていますが、それは何か違うかもしれません。]
これらのことを考えると、最良のアプローチはユーザーに2つの「フレーム」の素材を提示することだと思います（必要に応じてiFrameを使用できますが、必ずしも必要ではありません）。 HTMLフレームの使用を提案しているわけではありません。
- コンテンツの最初の「フレーム」：単一の画像としてのページ全体の縮小ビュー。読み取り用ではなく、完全な構成の表示とナビゲーションの補助の両方に使用されます本の。
- コンテンツの2番目の「フレーム」：各コミックセルの大きな画像と、そのセルの画像の一部であるテキストを伴うテキスト。ユーザーにテキストを非表示にするオプションを提供しますが、デフォルトとしてテキストを表示します。
ユーザーは、おそらく右向きの三角形をクリックしてセルをページングし、左向きの三角形のセルに戻ることができます。
次の2つのサムネイルもお勧めします。次のページの画像のさらに小さなビュー（より多くのセルを含む）と、前のページの画像の同様に小さなビューです。これにより、ユーザーはセルごとにクリックするだけでなく、ブックの実際のページに移動できます。
また、サイトの残りの要素を隠すことも検討する価値があると思います。これをユーザーがクリックできるオプション（テキストを非表示にするなど）にしたり、本を開いたときに通常のサイトUIを非表示にしたりして、グラフィックノベルをオンラインで最大限に体験することができます。サイトのロゴ/ボタンを提供することで、サイトのUIを切り替えることもできます[サイトの残り：SHOW |隠す]。
このアプローチを提案する理由は次のとおりです。
- ドキュメントやファイル（PDF、DjVuなど）の組み込みを避けます。
- 「アクセシビリティ」を提供しますが、アクセシビリティの目的だけでなく、コンテンツのテキストをページに表示します。これは明らかに検索などに適しています。
- 全ページと各セルの拡大図を表示して、ユーザーにできる限り芸術的な雰囲気を与えます。
- サイトの残りのUIを非表示にすると、読者は小説に没頭し、Webサイトを閲覧する感覚を失います。 IMOこれは、芸術的整合性の維持に役立ちます。
- HTML5や潜在的な読者の数を制限するテクノロジーは必要ありません。
- 小説の内容を
altテキストの中に入れないでください。