ページエンコーディング

HTMLのhead要素内の最初のタグで、ページの文字エンコーディングを宣言します。

<meta charset="utf-8">

このタグを変更したり削除したりしないでください。

ページタイトル

最初に設定する必要がある項目はページタイトルです。 <title>...</title>タグの間に新しいタイトルを入力します。

ページ本文にページタイトルを挿入しないでください。 titleタグに入力したタイトルは、レンダリングされたページに自動的に挿入されます。

ビューポートメタデータ

ナレッジベースがモバイルデバイス上で正しく拡大縮小されるようにするには、ページタイトルの後にビューポート宣言を続けます。

<meta name="viewport" content="width=device-width, initial-scale=1">

ページのエンコーディングと同様に、このタグを変更したり削除したりしないでください。

ページの説明

唯一、メタタグの中で記入が必須なのがページ説明です。

<meta name="description" content="">

content属性にこのページの目的について簡単な説明を入力してください。このタグは検索エンジンの最適化に使用されます。

ページ情報

次のステップは、ページのコンテキスト情報を設定することです。ページヘッダーで次のスクリプトタグを捜します。

<script>
var page_info = {
   'category': '...',
   'appliesTo': ['EPUB3']
};
</script>

categoryフィールドは、ページを作成するディレクトリを大文字で指定しなければなりません。たとえば、html ディレクトリに新しいページを追加する場合は、フィールドを次のように設定します。

'category': 'HTML',

新たなページのために新たなサブディレクトリを作成するならば、その値を配列の形で指定します。例えば、html/dpub-ariaのディレクトリにページを設けるならば、次のように指定します。

'category': ['html', 'dpub-aria'],

配列の順序はディレクトリの順序と一致する必要があります (つまり、親が兄弟より前)。ページが動的に生成される場合、このフィールドはヘッダーにパンくずリストを提供します (他の用途もあります)。

appliesToフィールドは、このページに適用される出版技術を識別する値の配列です。現在、このフィールドで使用できる値は三つだけです。

• EPUB3
• EPUB2
• Audiobooks

EPUB2と3の両方で有効な手法の場合、フィールドは次のようになります。

'appliesTo': ['EPUB3', 'EPUB2'],

技術は関連性順にリストしてください (例: EPUB3は標準の最新バージョンであるため、EPUB2の前にリストします)。

追加のテクノロジーが必要な場合は、追加をリクエストしてください。

要約

要約のセクションでは、ページの重要なポイントを簡単にまとめる必要があります。たとえば、注意すべき重要な問題は何なのか、どのような技術に従う必要があるのかなどです。概要は、ユーザーにできるだけ簡潔に重要なポイントを伝えることを目的としているため、一文または二文以内に収める必要があります。

以下に説明する「解説」のセクションでは、問題と解決策について詳しく説明します。

技術

技術セクションでは、ページで取り上げられている問題を解決または回避するための一般的な対策を列挙します。

各リスト項目では、簡単な言葉で実践方法を説明し、該当する場合は、末尾の括弧内に関連する WCAG達成基準へのリンクを記載します。

ユーザーが従うことができる特定のWCAGの技術がある場合は、それらをサブリストに加えます。

たとえば、代替テキストの付加について説明する技術は、次のように構成します。

<li>
   <p>Provide alternative text in the <code>alt</code> attribute
      if the image is not described in the surrounding text.
      <span class="wcag-level">[<a
         href="https://www.w3.org/TR/WCAG2/#non-text-content">WCAG
           1.1.1</a>]</span></p>
   <ul>
      <li><a
              href="https://www.w3.org/WAI/WCAG22/Techniques/html/H37">Using
              alt attributes on img elements</a></li>
      …
   </ul>
</li>

例

各ページでは、マークアップまたは機能を実際に実装する方法の例を少なくとも一つユーザーに提供する必要があります。

例は、HTMLfigureタグを使用して構造化されています。

最初の子要素は、 figcaptionでなければなりません。この要素はさらに、タイトルと説明に分割されます。タイトルは、 class属性値がlabelであるdiv要素内に配置されます。説明は、タイトルの後の一つ以上の段落に記述されます。

次の例は、サンプルキャプションの典型的な構造を示しています。

<figcaption>
   <div class="label">Example 1 — Complex Images</div>
   <p>This example uses the details element to …</p>
</figcaption>

この例のマークアップは、 pre要素とcode要素のペアの内側に記述されます。

<pre id="ex-01-src" class="prettyprint linenums"><code>…</code></pre>

id属性とclass属性が必須であることに注意してください。これらは、生成された例に構文のハイライトと行番号を追加するために使用されます。

よくある質問

よくある質問（FAQ）のセクションでは、よく発生する特定の問題を質疑応答形式で取り上げます。このアプローチは、長い説明を読むよりもユーザーにとってずっと理解しやすいでしょう。また、問題の一般的な説明に負担をかけずに、とても限定的な問題にも対処できます。

FAQは、HTML定義リスト（dl要素）を使用して構造化します。質問ごとにdt要素を使用し、回答ごとにdd要素を使用します。

解説

解説のセクションでは、ユーザーが知っておく必要のある実践と問題について詳しく説明します。

解説については、できるだけ詳細に、できるだけ簡単な言葉で説明する以外に、特別な要件はありません。ナレッジベースの読者は、必ずしも技術の専門家ではありません。

情報を整理するのに役立つ場合は、説明をサブセクションに分割できます。

関連リンク

関連リンクのセクションには、関連する標準へのリンクが含まれており、ユーザーは詳細情報をすばやく検索できます。

たとえば、EPUB 構造、HTML 要素、または ARIA 属性がページから参照されている場合は、参照が本文にリンクされている場合でも、このセクションでそれらの定義へのリンクを提供します。

その他のセクション

追加のセクションが必要な場合は、解説の後、最後の関連リンクセクションの前に追加する必要があります。