-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #153 from daisy/gitlocalize-32249
finalized japanese translation files
- Loading branch information
Showing
14 changed files
with
1,434 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>HTMLレイアウト</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <meta name="description" content="Overview of HTML-based EPUB fixed layout publications."> | ||
| <script> | ||
| var page_info = { | ||
| 'category': 'Fixed Layouts', | ||
| 'appliesTo': ['EPUB3'] | ||
| };</script> | ||
| <script src="/js/init.js"></script> | ||
| </head> | ||
| <body> | ||
| <main> | ||
| <section id="overview"> | ||
| <h3>概要</h3> | ||
| <p>固定レイアウトの出版物は、HTMLドキュメントを使ってテキストと画像を組み合わせて作成できます。各ドキュメントには、コンテンツが配置されるキャンバスである固定の高さと幅が割り当てられます。CSS を使用して、この表示領域内でコンテンツ要素を絶対的に配置したり、寸法に合う画像をページに埋め込んだりします。</p> | ||
| <p>固定レイアウトにHTMLを使用する利点は、各ページのテキストコンテンツが支援技術で利用できる点です。画像の場合は、HTMLにもともとあるアクセシビリティ技術である代替テキストや拡張説明が利用できます。</p> | ||
| </section> | ||
| <section id="epub"> | ||
| <h3>EPUB</h3> | ||
| <p>Web上で固定レイアウトを作成することは可能ですが、ブラウザでは自然にサポートされません。ブラウザはデザインどおりにページをレンダリングしますが、レンダリングをサポートするための最適化は行いません。</p> | ||
| <p>出版におけるこの問題を解決するために、EPUB3では、リーディングシステムが各固定レイアウトページに適切な表示領域と特性を作成できるように支援するメタデータが導入されました。</p> | ||
| <p>EPUB出版物は、固定レイアウトのXHTMLページで完全に構成される場合も、リフロー型の出版物内にいくつかの固定レイアウトページが散在しているだけの場合もあります（たとえば、地図は、リフロー型の出版物に固定レイアウトを用いて組み込まれる場合があります）。</p> | ||
| <p><a href="svg.html">SVGの固定レイアウトページ</a>とXHTMLの固定レイアウトページ、あるいは、<a href="img.html">画像を直接EPUBの読み取り順序で並べて</a>混在できます。</p> | ||
| <div class="note" role="note" aria-labelledby="create-note"> | ||
| <p id="create-note" class="label">注記</p> | ||
| <p>固定レイアウトの出版物の作成方法の詳細については、<a href="index.html#creation">固定レイアウトの概要ページ</a>を参照してください。</p> | ||
| </div> | ||
| </section> | ||
| <section id="a11y"> | ||
| <h3>アクセシビリティ</h3> | ||
| <p>リフロー型の出版物のアクセシビリティ対応をするのと同じ手法を、アクセシビリティを最大限に高めた固定レイアウトのHTMLページの作成にも利用できます。主な手法としては以下のものがあります。</p> | ||
| <ul> | ||
| <li> | ||
| <a href="../html/order.html">論理的な読み順</a>の確保 — コンテンツの順序は、ユーザーがページ上で論理的に読む順序と一致しなければなりません。画面上の位置を調整するには、CSSを使用します。</li> | ||
| <li>コンテンツを複数のページに分割しない — <a href="spreads.html">ページスプレッド</a>をアクセシビリティ対応にする方法はいくつかありますが、サイドバーなどの補足情報が複数のページに分割されると、論理的な読み順を維持するのが難しくなります。</li> | ||
| <li>構造マークアップの使用 — コンテンツが意味のある形でマークアップされ、支援技術でナビゲートできるようにします。たとえば、<a href="../html/tables.html">見出し</a>や<a href="../html/tables.html">表</a>はマークアップを使用します。スタイル設定でそのように見えるようにはしないでください。</li> | ||
| <li>意味のある<a href="../html/images-desc.html">画像</a>をすべて説明する — 出版物を理解するために必要な情報を含むすべての画像は、代替テキストや拡張説明を使用して説明しなければなりません。背景画像は多くの場合、キャラクターのやり取りのコンテキストを提供するため、シーン設定がないと会話が意味をなさない場合があります。</li> | ||
| <li>テキストの画像を使わない — 背景画像の上にテキストを重ねると、支援技術がアクセスしやすくなります。</li> | ||
| <li> | ||
| <a href="https://www.w3.org/TR/WCAG2/#contrast-minimum">テキストのコントラスト</a>の確保 — 固定レイアウトでは画像の上にテキストを重ねることが多いため、テキストが背景から視覚的に区別できるようにすることが重要です。</li> | ||
| </ul> | ||
| <p>上記のような手法に従ったとしても、リーディングシステムではしばしばコンテンツ製作者によるレイアウトが維持されるため、ユーザーによる文書の見た目の変更ができず（たとえば、フォントサイズを大きくしたり、テキストの色を変更したりする機能が無効になるなど）、固定レイアウトによってアクセシビリティが制限される問題が生じます。その結果、固定レイアウトの出版物をアクセシビリティ対応にするために最大限の努力を払っても、一部のユーザーには読めないままになる可能性があります。</p> | ||
| </section> | ||
| </main> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Spine内の画像</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <meta name="description" content="Overview of issues using images in the EPUB spine for fixed layouts."> | ||
| <script> | ||
| var page_info = { | ||
| 'category': 'Fixed Layouts', | ||
| 'appliesTo': ['EPUB3'] | ||
| };</script> | ||
| <script src="/js/init.js"></script> | ||
| <style> | ||
| pre { | ||
| font-size: 1.4rem; | ||
| }</style> | ||
| </head> | ||
| <body> | ||
| <main> | ||
| <section id="overview"> | ||
| <h3>概要</h3> | ||
| <p>固定レイアウトのEPUB出版物を作成する非公式な方法として、<a href="https://www.w3.org/TR/epub/#sec-spine-elem">パッケージドキュメントのspine</a>に画像（SVGを除く）を直接組み込む方法があります。ただし、フォールバックなしではspineに画像を組み込めないため、一般的にはこの方法で固定レイアウトページを作成することはありません。ほとんどの場合、<a href="html.html">XHTML</a>または<a href="svg.html">SVGの</a>固定レイアウトページに画像を埋め込む方がシンプルです。</p> | ||
| <p>spineに画像を使用すると、固定レイアウトのメタデータは設定されず、バリデーションエラーが発生します（例えば、必要とされる寸法はXHTMLとSVGでのみ規定できます）。リーディングシステムが出版物をレンダリングしない原因となる場合もあるでしょう。</p> | ||
| <p>関連する問題として、この方法では固定レイアウトのメタデータを指定できないため、ページの表示をほとんど制御できません。また、<a href="#a11y">アクセシビリティの問題</a>も深刻です。</p> | ||
| </section> | ||
| <section id="ceration"> | ||
| <h3>製作</h3> | ||
| <p>spine内に画像を配置することは、spine内にXHTMLまたはSVGドキュメントを配置することと変わりません。manifest内で画像が宣言されている場所を参照するには、 <code>itemref</code>要素を使用します。</p> | ||
| <pre id="ex-01" class="prettyprint linenums"><code><package …> | ||
| … | ||
| <manifest> | ||
| <item id="pg01" src="pg01.jpg" media-type="image/jpeg"/> | ||
| … | ||
| </manifest> | ||
| <spine> | ||
| <itemref ref="pg01"/> | ||
| … | ||
| </spine> | ||
| </package></code></pre> | ||
| <p>ただし、前述の例を<a href="../validation/epubcheck.html">EPUBCheck</a>で検証すると、spineでJPEGがサポートされていないため、エラーが発生します。</p> | ||
| <p>出版物のエラーをなくすには、manifestエントリでXHTMLまたはSVGドキュメントへのフォールバックを指定しなければなりません。</p> | ||
| <pre id="ex-02" class="prettyprint linenums"><code><manifest> | ||
| <item id="pg01" src="pg01.jpg" media-type="image/jpeg" <strong>fallback="pg01-fb"</strong>/> | ||
| <item id="pg01-fb" src="pg01.xhtml" media-type="application/xhtml+xml"/> | ||
| … | ||
| </manifest></code></pre> | ||
| <p>リーディングシステムがspineの画像をサポートしていない場合には、これで代わりにフォールバックのXHTMLページをレンダリングできるようになります。</p> | ||
| </section> | ||
| <section id="a11y"> | ||
| <h3>アクセシビリティ</h3> | ||
| <p>spineの画像は、固定レイアウトを作成する方法としては最もアクセシブルでないものです。</p> | ||
| <p>画像の代替テキストや拡張説明は、フォールバックを通じて提供しない限り、提供できません。そのため、リーディングシステムが画像のレンダリングをサポートしている場合、ユーザーが代替テキストにアクセスする方法はありません（つまり、ユーザーには通常、フォールバックを表示するオプションは提供されず、リーディングシステムが自動的に何を表示するか選択します）。結果として、支援技術のユーザーが出版物を読むときに何も読み上げられません。</p> | ||
| <p>また、ユーザーが代替手段にアクセスできるという保証がなければ、代替手段がWCAGに準拠しているとしても、WCAGに準拠していると主張することは<strong>できません</strong>。</p> | ||
| <p>固定レイアウトページごとにバックアップを作成するコストを回避するために、出版物がリーディングシステムでサポートされていないことを伝える一つのフォールバックドキュメントを使用する場合があります。この方法は、基本的に、テキスト代替を提供しないのと同じくらい読者にとって役に立ちません。</p> | ||
| <p>同様に、固定レイアウトページとコンテンツのテキストシリアライズの間に一対一の相関関係がない場合があります。この場合、読者を混乱させることなく各ページにフォールバックを設定することはできません (たとえば、一連のページが同じテキストシリアライズにフォールバックする場合、リーディングシステムはページをめくるたびに同じテキストをレンダリングし続けてしまいます)。</p> | ||
| <p><a href="https://www.w3.org/TR/epub-multi-rend/">マルチレンディション</a>の使用は、代替シリアライズの必要性の解決を意図していましたが、仕様に対するサポートは事実上ありません。</p> | ||
| <p>以上の理由により、常に<a href="html.html">XHTML</a>あるいは<a href="svg.html">SVG</a>による固定レイアウトページを推奨します。</p> | ||
| </section> | ||
| <section id="refs"> | ||
| <h3>関連リンク</h3> | ||
| <ul> | ||
| <li>EPUB 3 — <a href="https://www.w3.org/TR/epub/#sec-spine-elem"><code>spine</code>要素</a> | ||
| </li> | ||
| <li>EPUB 3 —<a href="https://www.w3.org/TR/epub/#sec-manifest-fallbacks">manifest フォールバック</a> | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| </main> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>画像</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <meta name="description" content="Overview of issues using images for fixed layout pages."> | ||
| <script> | ||
| var page_info = { | ||
| 'category': 'Fixed Layouts', | ||
| 'appliesTo': ['EPUB3'] | ||
| };</script> | ||
| <script src="/js/init.js"></script> | ||
| </head> | ||
| <body> | ||
| <main> | ||
| <section id="desc"> | ||
| <h3>概要</h3> | ||
| <p>固定レイアウトの出版物では多くの場合、画像が不可欠です。固定レイアウトの出版物は、漫画のように完全に画像で構成されている場合もあれば、児童書のように物語の背景として画像が使用される場合もあります。</p> | ||
| <p>したがって、背景が認識できなかったり、画像を処理するのが難しい可能性のあるユーザーが、画像で伝えられる情報を利用できるようにすることが、固定レイアウトを可能な限りアクセシブルにするための優先事項です。</p> | ||
| <p>画像が出版物の内容理解に必要な情報を含んでいる場合は代替テキストや拡張説明を提供するという、<a href="../html/images-desc.html">すべての画像の基本的な要件</a>は、固定レイアウトにも適用されます。たとえば、どのキャラクターが何を言っているかというコンテキストが、画像上の配置によってのみ伝わる場合、テキストデータが画像にオーバーレイされていれば読者は物語のセリフを追えるでしょう。</p> | ||
| <p>ページ上にはユーザーがアクセスする説明を配置できる追加の領域が無いので、画像を説明し、コンテキストを提供する方法をひねり出さなければならないのが、固定レイアウトにおける課題です。</p> | ||
| </section> | ||
| <section id="svg"> | ||
| <h3>SVG</h3> | ||
| <p>SVGには、画像を説明するための二つの要素があります。</p> | ||
| <ul> | ||
| <li> | ||
| <code>title</code> — HTMLの<code>alt</code>属性に相当します。SVG画像全体とその中の個々のコンポーネントに代替テキストを提供するのに使用します。</li> | ||
| <li> | ||
| <code>desc</code> — SVG画像全体とその中の個々のコンポーネントの拡張説明を提供するのに使用します。</li> | ||
| </ul> | ||
| <p>出版物が<a href="svg.html">固定レイアウトのSVGページ</a>で作成されている場合、これらの二つの要素を使ってコンテンツを説明できます。SVGはまだ十分にサポートされていないため、支援技術のサポートを改善するためにARIA属性（ <code>role</code>および<code>aria-describedby</code> ）が追加されています。</p> | ||
| <pre class="prettyprint linenums"><code><svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" … | ||
| <strong>role="group" aria-describedby="svgtitle svgdesc"</strong>> | ||
| <title id="svgtitle">The Hydrologic Cycle</title> | ||
| <desc id="svgdesc">The continuous cycle by which water …</desc> | ||
| … | ||
| </svg></code></pre> | ||
| <div class="note" role="note" aria-labelledby="svg-role"> | ||
| <p id="svg-role" class="label">注記</p> | ||
| <p>この画像にはユーザーが操作できる追加のテキストコンテンツ（非表示）が含まれているため、<code>group</code>ロールが画像に付与されています。画像が完全にグラフィカルである場合は、代わりに<code>img</code>ロールを使用します。</p> | ||
| </div> | ||
| <p><code>title</code>と<code>desc</code>要素は、大きな画像のコンポーネントに注釈を付ける場合にも使用できます。</p> | ||
| <pre class="prettyprint linenums"><code><g fill="lightgray" stroke="gray" role="img" aria-describedby="gtitle"> | ||
| <title id="gtitle">Rain clouds</title> | ||
| … | ||
| </g></code></pre> | ||
| <p>これらの要素を使用してSVG画像に注釈を付けた場合の問題は、通常そのコンテンツが支援技術のユーザーに対してのみ利用可能になるという点です。</p> | ||
| <p>より高度なアプローチとしては、スクリプトやアニメーションを使用して説明を表示するリンクまたはボタンを設ける方法があります（例：ポップアウトのように説明を開く）。ただし、EPUB 3.2まではアニメーションなどが完全に制限されていたため、EPUBリーディングシステムのこのようなアプローチに対するサポートは制限されるかもしれません。</p> | ||
| </section> | ||
| <section id="html"> | ||
| <h3>HTML</h3> | ||
| <p>画像がHTML固定レイアウトページに埋め込まれている場合には、アクセシブルな説明を付与する方法がもっと沢山あります。SVG固定レイアウトの場合と同様に、説明を組み込むための画面スペースが限られているという制限が主たる考慮事項です。</p> | ||
| <p>そのため、説明は通常、さまざまなHTML、ARIA、CSSテクニックを使用して非表示にします。説明は、隠したり、クリッピングしたり、不透明度を設定したり、画像の下に重ねたりできます。<a href="../html/hidden.html">非表示コンテンツに関するナレッジベースページ</a>では、これらの可能性についてさらに詳しく説明しています。</p> | ||
| <p>EPUBのXHTMLコンテンツドキュメントでのスクリプトのサポートは、一般的にSVGで利用できるものよりはるかに優れているので、より幅広いユーザーが説明を表示するのに利用できる信頼性が高い方法があります。たとえば、画像をクリックまたはタップするとその説明を表示できます。<a href="http://idpf.github.io/epub3-samples/30/samples.html#the-voyage-of-life-tol">Voyage of Life サンプルEPUB</a>には、この手法の実験的な例が含まれています。</p> | ||
| <p>リフロー型の出版物とは異なり、固定レイアウトでページの背景画像を設定するのにCSSの<code class="property">background-image</code>プロパティが使用できます。ただし、この方法では、すべてのユーザーに対してアクセスできる説明を提供するのが難しいため（つまり、多くの場合、非表示の支援技術に対する説明のみを提供することになります）、この方法は、できるだけ純粋にプレゼンテーション用の背景に限定することをお勧めします。</p> | ||
| </section> | ||
| </main> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>固定レイアウト（Fixed Layout）</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <meta name="description" content="Index of fixed layout-related topics for producing accessible digital publications."> | ||
| <script> | ||
| var page_info = { | ||
| 'category': 'Fixed Layouts', | ||
| 'isIndex': true, | ||
| 'root_id': 'fxl' | ||
| }; | ||
| </script> | ||
| <script src="/js/init.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <main> | ||
| </main> | ||
| </body> | ||
| </html> |
Oops, something went wrong.