diff --git a/publishing/ja/html/images-icons.html b/publishing/ja/html/images-icons.html new file mode 100644 index 00000000..77f49020 --- /dev/null +++ b/publishing/ja/html/images-icons.html @@ -0,0 +1,147 @@ + + + + + アイコン + + + + + + + +
+
+

要約

+

アイコンの目的を識別できるように、アイコンに明確かつ一貫したラベルを付けるようにします。

+
+
+

テクニック

+ +
+
+

例

+
+
+

例 1 — 一般的なサイドバーの識別

+
+ 
<aside
+    id="warn-001"
+    class="warning">
+   <img src="bomb.png" alt="Warning"/>
+   <p>The following experiment may cause
+      bodily harm if … </p>
+</aside>
+
+…
+
+<aside
+    id="warn-002"
+    class="warning">
+   <img src="bomb.png" alt="Warning"/>
+   <p>Risk of explosion increases as the
+    coefficient … </p>
+</aside>
+
+ +
+
+

例2 — 十分なコントラスト

+
+

次の例は、十分な背景コントラストを持つアイコンを示しています。

+

+

+Image Description + +

次の例は、背景のコントラストが不十分な同じアイコンを示しています。

+

+

+Image Description + +
+ +
+
+

例 3 — フォントアイコン

+

次の例では、私的使用領域のコードポイントを使用して、架空の「Icons」フォント ファミリーから電子メール アイコンをレンダリングします。

+
+

CSS

+ 
.icon { font-family: 'Icons' !important; }
+.email { background-color: #ffffff; }
+.email:before { content: "\f8ee"; }
+

HTML

+ 
<p>
+   <span
+    class="icon email"
+    role="img"
+    aria-label="Email the publisher"></span>
+</p>
+
+ +
+
+

例4 — 十分なサイズ

+
+ +

次の例は、WCAG 2.1 で要求される 44 x 44 ピクセルの AAA 最小ターゲット サイズを示しています。

+

+Image Description + +

次の例は、WCAG 2.2 で要求される 24 x 24 ピクセルの AA 最小ターゲット サイズを示しています。

+

+画像の説明 +
+
+
+

解説

+ +

電子出版物では、アイコンは Webほど一般的ではありませんが、珍しいものではありません。アイコンは、教科書やその他のノンフィクション作品にあるさまざまな種類のサイドバーなど、出版物内の重要な項目を識別するためによく使用されます。また、テキストの代わりに、画像の拡張説明があることを示すためにもよく使用されます。そしてもちろん、インタラクティブ コンテンツのコントロールとしてもよく使用されます。

+ +

アイコンをアクセシブルにするには、一般的に画像と同じ要件に従いますが、アイコンに固有の追加要件もいくつかあります。これらの中でも重要なのは、ネーミングの一貫性です。ラベルを提供するだけでは十分ではありません。ユーザーは、アイコンの意味と目的が出版物全体で一貫していることを期待するようになるからです。たとえば、拡張説明へのリンクに使用されるアイコンには、ある場所では「図 1 の拡張説明」というラベルを付け、次の場所では「図 2 の詳細を読む」というラベルを付けるべきではありません。図の番号は変わるため、ラベルは同一にはなりませんが、言い回しは一貫している必要があります。

+ +

アイコンが明確に区別できることも重要です。アイコンとその背景のコントラスト比が 3:1 であることで、ユーザーはアイコンが使用されている場所とそれが表すものの両方を認識できるようになります。同様に、画像がクリックなどの入力アクションのターゲットを表す場合、アイコンの長さと高さは少なくとも 24 ピクセルが必要です。特に WCAG の要件ではありませんが、アイコンは、できるだけ幅広いユーザーが拡大しなくても判読できるようにサイズを設定する必要があります。アイコンに複雑な画像を使用しないことも推奨されます。目の見えるユーザーでも意味を理解するのに苦労する可能性があるためです。

+ +

フォントアイコンは、画像アイコンとは少し異なります。フォントアイコンは、製作者が Unicode の私的使用領域（つまり、どの文字にも割り当てられていない特別なコードポイントで、製作者がそれらのコードポイントのアイコンを定義するフォントを提供できます）を使用することに依存しています。このアプローチの問題は、私的使用領域のコードポイントがユーザーエージェントと支援技術に認識されないため、アイコンの意味を通知する方法がないことです。この問題を回避するために、製作者は ARIA ロール "img" を添付し、アイコンが挿入される場所にラベルを付けることができます（上記の例 3を参照）。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/images-selection.html b/publishing/ja/html/images-selection.html new file mode 100644 index 00000000..df1f16e8 --- /dev/null +++ b/publishing/ja/html/images-selection.html @@ -0,0 +1,177 @@ + + + + + 画像の選択（Image Selection） + + + + + + + +
+
+

要約

+ +

picture要素とimg要素の画像選択機能を使用して、さまざまなデバイスに最適化された画像を提供します。

+
+ +
+

テクニック

+ +
+ +
+

例

+ +
+
+
例 1 — フォールバック画像を追加する
+
+ 
<picture>
+   <source
+        srcset="covers/9781449328030.avif"
+        type="image/avif"/>
+   <img
+        src="covers/9781449328030.jpg"
+        alt="Accessible EPUB 3 - First Edition"/> 
+</picture>
+
+ +
+
+
例 2 — 白黒ディスプレイに最適化された画像を追加する
+
+ 
<picture>
+   <source
+        srcset="covers/9781449328030_bw.jpg"
+        media="(monochrome)"/>
+   <img
+        src="covers/9781449328030_color.jpg"
+        alt="Accessible EPUB 3 - First Edition"/>
+</picture>
+
+ +
+
+
例3 — 異なるディスプレイ解像度に対応した画像を提供する
+
+ 
<img
+     srcset="covers/9781449328030_small.jpg 1x,
+             covers/9781449328030_large.jpg 2x"
+     src="covers/9781449328030_small.jpg"
+     alt="Accessible EPUB 3 - First Edition"/>
+
+
+ +
+

よくある質問

+
+
どの要素を使うかは重要ですか？
+
+

いいえ。picture 要素は表示要素ではありません。この要素は、子要素であるimgタグに他の画像を関連付ける機能を提供するだけです。選択した画像の実際のレンダリングはimg要素によって行われるため、使用するタグによってレンダリングが変わることはありません。

+

picture要素の利点の１つは、出版者がより複雑な選択基準を定義できることです。picture要素が良く使われるのは、その複数の子要素source要素によって選択基準の読み取りが容易になるためです。

+
+
+
+ +
+

解説

+ +

代替画像を提供することは、より一般的なユーザビリティの問題ですが、ユーザーのディスプレイに最適化された画像を提供することで、アクセシビリティにとって多くの副次的なメリットがあります。

+ +

たとえば、カラー ディスプレイ用に最適化された表紙画像は、モノクロ ディスプレイのデバイスでレンダリングすると判読できない場合があります。同様に、画面解像度に合わせて適切なサイズで最適化された画像を提供することで、視力の弱いユーザーを支援することができます。最適化された画像は、すべてのデバイスの表示能力に合わせて単一の画像を使用せざるを得ないことで発生するピクセル化の問題を回避するのに役立ちます。

+ +

次のセクションでは、 picture要素とimg要素の主な機能について簡単に説明します。これらの要素の詳細については、 「関連リンク」セクションのリソースを参照してください。

+ +
+

+picture要素

+ +

picture要素はimg要素のラッパー（包摂要素）であり、追加の画像をそのタグに関連付けることができます。したがって、 picture要素には常に子img要素が必要です。

+ +

新しいpicture要素が認識されない場合でも、子のimg要素により、画像を表示できます。また、 img要素は、代替テキストや、必要に応じて拡張説明も提供できます。

+ +

表示される画像に関係なく、同じ代替テキストと説明が使用されるため、セット内の画像の違いは表示特性のみである必要があります（つまり、画像内の情報が異なってはなりません）。

+ +

ユーザーエージェントが表示できる代替画像は、子要素sourceで指定されます (例1と2を参照)。

+ +

各source要素で指定された画像の特性は、次の属性を使用して定義されます。

+ +
+
srcset
+
+

この属性が指定するのは、使用する画像への 1 つ以上の URL のリストです。

+

各画像 URL の後に幅記述子が続く場合もあります。

+ 
srcset="covers/small.jpg 480w, covers/large.jpg 960w"
+

またはピクセル密度の宣言が続きます。

+ 
srcset="covers/low_res.jpg 1x, covers/hi_res.jpg 2x"
+

幅記述子は、画像の幅をユーザー エージェントに伝え、ビューポートに最適に収まるかどうかを判断できるようにします。幅記述子を指定する場合は、 sizes属性も設定する必要があります。

+

ピクセル密度はディスプレイの解像度を指します。標準解像度の画面は 1 倍、Retina ディスプレイは 2 倍（ピクセル密度が 2 倍）、より新しい画面解像度は 3 倍や 4 倍の解像度にも達しています。

+

src属性は、picture要素のsource子要素では無効であることに注意してください。画像オプションが 1 つしかない場合でも、 srcsetで指定する必要があります。複数の画像を指定する場合は、 sizes属性を設定する必要があります。

+
+ +
type
+
+

画像のメディアタイプ。

+ 
type="image/jpeg"
+

source要素が異なるメディアタイプの複数の画像を参照する場合は、属性を設定しないでください。

+
+ +
media
+
+

画像を使用する条件を指定するメディアクエリー。

+ 
media="(monochrome)"
+
+ +
sizes
+
+

sizes属性は、画像の表示幅を指定します。各幅（最後の幅を除く）には、画像を使用する条件を指定するメディアクエリーを含めることができます。他の条件が適用されない場合は、最後に指定されたサイズがデフォルトになります。

+

たとえば、次の宣言では、最大画面幅が 480 ピクセルの場合、画像は画面幅全体を占めます。それより大きい場合は、画像は画面幅の半分だけを占めます。

+ 
sizes="(max-device-width: 480px) 100vw,
+        50vw"
+

ユーザーエージェントは、デバイスに適用される幅を決定し、その情報を使用してsrcset属性から使用する最も適切な画像を計算します。

+
+
+
+ +
+

+img要素

+ +

img要素はpicture要素と似ていますが、より基本的なオプション セットを提供します。つまり、 srcsetとsizes属性のみが許可されます。これらの属性はまったく同じように機能するため、詳細についてはpicture要素のセクションの定義を参照してください。

+

img要素は、 picture要素内で使用されるかどうかに関係なく、常にデフォルトの画像を含むsrc属性を指定する必要があります。この画像は、ユーザー エージェントがデバイスに適した画像を見つけられない場合、他のオプションが指定されていない場合、またはユーザー エージェントが画像の選択をサポートしていない場合に表示されます。

+
+
+ +
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/images-text-based.html b/publishing/ja/html/images-text-based.html new file mode 100644 index 00000000..276aab85 --- /dev/null +++ b/publishing/ja/html/images-text-based.html @@ -0,0 +1,194 @@ + + + + + テキストベースの画像（Text-based Images） + + + + + + +
+
+

要約

+ +

テキストベースの画像を識別して説明することで、その中に含まれるテキストを支援技術が無視したり読み上げようとしたりしないようにします。

+
+ +
+

テクニック

+ + +
+ +
+

例

+ +
+
+
例 1 — 代替テキスト付きの ASCII 描画
+

aria-label属性は代替テキストの説明を提供します。この属性は、 img要素でのみ許可されるalt属性と同じ目的を果たします。

+
+ 
<pre
+    role="img"
+    aria-label="Winnie the Pooh with Hunny pot">
+    _
+ __( )_
+(      (o____
+ |          |
+ |      (__/
+   \     /   ___
+   /     \  \___/
+ /    ^    /     \
+|   |  |__|_HUNNY |
+|    \______)____/
+ \         /
+   \     /_
+    |  ( __)
+    (____)
+</pre>
+
+ +
+
+
例 2 — 代替テキスト付きの絵文字
+
+ 
<span role="img" aria-label="shrug">¯\_(ツ)_/¯<span>
+
+ +
+
+
例 3 — 編集テキスト
+
+ 
<p>In the case of
+   <span
+         class="redacted"
+         role="img"
+         aria-label="redacted text">_____<span>
+   it is clear that the crime of
+   <span
+         class="redacted"
+         role="img"
+         aria-label="redacted text">_____<span>
+   …
+<p>
+
+ +
+
+
例 4 — 説明付きのASCII描画
+

aria-describedby属性は、ASCII 画像の説明を提供するために使用されます。

+
+ 
<pre
+    role="img"
+    aria-label="Skeleton in graveyard"
+    aria-describedby="skeleton-desc">
+           _..--""---.
+          /           ".
+          `            l
+          |'._  ,._ l/"\
+          |  _J<__/.v._/
+           \( ,~._,,,,-)
+            `-\' \`,,j|
+               \_,____J
+          .--.__)--(__.--.
+         /  `-----..--'. j
+         '.- '`--` `--' \\
+        //  '`---'`  `-' \\
+       //   '`----'`.-.-' \\
+     _//     `--- -'   \' | \________
+    |  |         ) (      `.__.---- -'\
+     \7          \`-(               74\\\
+     ||       _  /`-(               l|//7__
+     |l    ('  `-)-/_.--.          f''` -.-"|
+     |\     l\_  `-'    .'         |     |  |
+     llJ   _ _)J--._.-('           |     |  l
+     |||( ( '_)_  .l   ". _    ..__I     |  L
+     ^\\\||`'   "   '"-. " )''`'---'     L.-'`-.._
+          \ |           ) /.              ``'`-.._``-.
+          l l          / / |                      |''|
+           " \        / /   "-..__                |  |
+           | |       / /          1       ,- t-...J_.'
+           | |      / /           |       |  |
+           J  \  /"  (            l       |  |
+           | ().'`-()/            |       |  |
+          _.-"_.____/             l       l.-l
+      _.-"_.+"|                  /        \.  \
+/"\.-"_.-"  | |                 /          \   \
+\_   "      | |                1            | `'|
+  |ll       | |                |            i   |
+  \\\       |-\               \j ..          L,,'. `/
+ __\\\     ( .-\           .--'    ``--../..'      '-..
+   `'''`----`\\\\ .....--'''
+              \\\\                           -nabis  ''
+
+</pre>
+<p id="skeleton-desc" hidden="">
+   A skeleton is posing next to a grave marker …
+</p>
+
+
+ +
+

よくある質問

+ +
+
空欄を埋めるフィールドはテキストベースの画像ですか?
+
+

はい、回答を記入する場所を示すために下線を使用するのは、テキストベースの画像の一種です。これらのフィールドが識別されていない場合、通常、回答が必要であることや回答の長さがユーザーにはわかりません。

+

フィールドの代替テキストを使用して、予想される入力内容を説明できます。

+

たとえば、自由形式の入力フィールドは次のように表現できます。

+ 
<p>The US capital
+   <span role="img" aria-label="answer field">__________<span>
+   is located on the Potomac River.</p>
+

特定の文字数を期待するフィールドは次のように表現できます。

+
<p>The quick brown 
+   <span role="img" aria-label="answer field - 3 letters">_ _ _<span>
+   jumped over the lazy dog.</p>
+

理想的には、出版社はテキスト入力にネイティブ HTML フォーム フィールドを使用すべきですが、デジタル版で印刷版を正確に複製する必要がある場合に、これが常に可能であるとは限りません。

+
+
+
+ +
+

解説

+ +

「ASCII アート」という名前は、一般的にテキストベースの画像を表すために使用されますが、そのようなアートワークが ASCII セットの印刷可能な文字のみで構成されているわけではありません。最新のコンピューターで Unicode がサポートされているということは、Unicode プレーンのすべての印刷可能な文字が使用可能になっていることを意味します。

+ +

テキストベースの画像の要件は、ラスター画像やベクター画像とほぼ同じですが、実装が若干異なります。重要な違いの 1 つは、テキストベースの画像は、デフォルトでは周囲のテキストと区別できないことです（つまり、JPEG や SVG のように、別の形式ではなく、固有のタグもありません）。

+ +

一連の文字がテキストベースの画像を表すことを識別するには、画像の周囲のタグに、値が「 img 」である ARIA role属性を追加します（例 1を参照）。テキストベースの画像は、レイアウトを維持するためにpreタグで囲まれることがよくありますが、たとえば、1 行の画像はspanタグで囲まれることがあります。

+ +

テキストベースの画像をロールで識別しない場合、支援技術は画像に含まれるテキストを読み上げようとします。句読点で構成される画像の場合、ユーザーには何も読み上げられない可能性があります（一時停止のみが聞こえる場合があります）。英数字を含む画像の場合、文字が読み上げられるときにユーザーには意味不明な内容が聞こえる場合があります。

+ +

画像が特定されると、要件は他の画像の場合と同様になります。代替テキストは通常必須ですが、 img elementsでのみ許可されるため、 alt属性で指定することはできません。テキストベースの画像の場合、 aria-labelまたはaria-labelledby属性を使用して代替テキストを指定できます（例 1を参照）。

+ +

複雑な画像の場合、 aria-describedbyまたはaria-details属性を使用して説明を提供できます（例 4を参照）。画像の説明の詳細については、画像の説明ページを参照してください。

+ +

テキストベースの画像のコントラストの問題を考慮することも重要です。WCAG では画像に十分なコントラストがあることは厳密には要求されていませんが（画像に実際の文字が含まれている場合を除く）、テキスト文字を使用すると、画像の作成に使用されたテキストと画像が表示される背景とのコントラストを、製作者が制御できます。十分なコントラストを使用することで、読者が画像を認識できるようになります。

+
+ +
+

関連リンク

+ + +
+
+ + diff --git a/publishing/ja/html/images-text.html b/publishing/ja/html/images-text.html new file mode 100644 index 00000000..63df187b --- /dev/null +++ b/publishing/ja/html/images-text.html @@ -0,0 +1,86 @@ + + + + + 文字画像（Images of Text） + + + + + + + +
+
+

要約

+

可能な限り文字画像の使用は避けますが、使用が避けられない場合は、そのテキストを認識可能で支援技術で利用できるようにしてください。

+
+ +
+

テクニック

+ +
+ +
+

例

+ +
+
+
例 — 画像の見出し
+

alt属性は画像内のテキストを提供します。

+
+ 
<h2><img src="images/xl-hd.jpg" alt="Canto XL"/></h2>
+
+ +
+
+
例 — 画像入力ボタン
+

input要素のalt属性は、画像ボタンのテキストのラベルを提供します。

+
+ 
<input
+    type="image"
+    name="submit"
+    src="enter.jpg"
+    alt="Enter to Win!"/>
+
+
+ +
+

解説

+ +

出版物では、プレゼンテーションを確実にするためにテキストの画像が使用されることがあります。たとえば、著者が埋め込むことができない特殊なフォントが見出しに必要になったり、テキストが画像でしか再現できない方法で様式化されていたりする場合があります。

+ +

ベストプラクティスとしては、可能な限り CSS を使用してテキストのスタイルを設定することです。これにより、ユーザーは自分のニーズに合わせてフォントのプロパティを変更できます。また、ユーザーがハイコントラストの読書モードなどのテーマを適用したときに、画像テキストによって効果が損なわれることもなくなります。

+ +

テキスト画像を使用する必要がある場合は、 alt属性で画像の全テキストを提供します。

+ +

テキスト画像を使用しても、テキストが WCAG のコントラスト要件を満たさなくてよくなるわけではないことに注意してください。達成基準 1.4.3を満たすには、前景色と背景色が 4.5 : 1 の最小コントラスト要件を満たす必要があります。

+
+ +
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/index.html b/publishing/ja/html/index.html new file mode 100644 index 00000000..f2446582 --- /dev/null +++ b/publishing/ja/html/index.html @@ -0,0 +1,22 @@ + + + + + HTML（エイチ ティー エム エル） + + + + + + + +
+
+ + diff --git a/publishing/ja/html/indexes.html b/publishing/ja/html/indexes.html new file mode 100644 index 00000000..9bed7aac --- /dev/null +++ b/publishing/ja/html/indexes.html @@ -0,0 +1,182 @@ + + + + + 索引（Indexes） + + + + + + + +
+
+

要約

+ +

セクションとリストを使用して索引を構成し、各項目へのアクセスを簡素化します。

+
+ +
+

テクニック

+ + +
+ +
+

例

+ +
+
+

例1 — 明確な見出しのある索引

+
+ + 
<nav role="doc-index">
+   <h1>Subject Index</h1>
+   
+   <section>
+     <h2>A</h2>
+     
+     <ul>
+       <li>
+         Apples, <a href="#page01">1</a>, 
+         <a href="#page27">27</a>
+       </li>
+       …
+     </ul>
+   </section>
+   
+   …
+</nav>
+
+ +
+
+

例 2 — 暗黙的な見出しのある索引

+

索引エントリーのセットが視覚的なスペースによってのみ区切られている場合は、 aria-label属性を使用して支援技術用の見出しを提供します。

+
+ + 
<nav role="doc-index">
+   <h1>Index</h1>
+   
+   <section aria-label="A">
+     <ul>
+       <li>
+         Apples, <a href="#page01">1</a>, 
+         <a href="#page27">27</a>
+       </li>
+       …
+     </ul>
+   </section>
+   
+   <section aria-label="B">
+     <ul>
+       <li>
+         Blueberries, <a href="#page01">1</a>, 
+         <a href="#page27">27</a>
+       </li>
+       …
+     </ul>
+   </section>
+   
+   …
+</nav>
+
+ +
+
+

例3 — ヘッダー付き索引

+

header要素を使用して、索引エントリーのリストの前に予備情報をグループ化します。

+
+ + 
<nav role="doc-index">
+   <header>
+      <h1>Index</h1>
+      
+      <p>This is an index to the main text …</p>
+	
+      <p>Alphabetization is word-by-word: …</p>
+   </header>
+   
+   …
+</nav>
+
+
+ +
+

よくある質問

+ +
+
EPUB インデックス仕様に従う必要がありますか？
+
+

epub:typeセマンティクスの使用は必須ではありませんが、この文書の構造化原則に従うことが推奨され、アクセシビリティに最も役立つ原則はこのページで繰り返し説明されています。これらのセマンティクスは出版社の内部ワークフローには役立つかもしれませんが、現時点ではリーディングシステムの索引を強化するものではなく、 epub:typeセマンティクスはアクセシビリティを提供しません。

+ +

現時点では仕様の採用が限られているため、仕様のパッケージ ドキュメント識別要件に従う必要はありません。

+
+ +
索引にはnav要素とsection要素のどちらを使用すればよいですか?
+
+

どちらも技術的には許容されますが、 nav要素を優先するべきです。索引は、目次と似て非なるナビゲーション補助機能で、コンテンツの重要な領域へのリンクのリストです。

+
+ +
複数のページにまたがるトピックにリンクするにはどうすればよいですか?
+
+

トピックにページ範囲が含まれている場合は、範囲全体にタグを付け、最初のページにリンクします。

+ + 
<a href="c02.xhtml#pg49" aria-label="49 to 51">49–51</a>
+ +

最初のページと最後のページにリンクしたり、範囲を分割して個々のページにリンクしたりすることは避けてください。索引エントリーの意味は十分に確立されているため、範囲を一連のページにすると、特に句読点を読み上げない支援技術を使用している場合は、議論の範囲について読者を混乱させる可能性があります。

+ +

ユーザーが範囲の終わりに到達したことを判断できるように、テキストにページ区切りマーカーを含めるようにしてください。

+
+
+
+ +
+

解説

+ +

索引のアルファベット順および数字順に関連するエントリー間のナビゲーションを容易にするには、ネストされたsection要素を使用します。多くの索引には、エントリーセット間の見出しとして数字または文字が含まれていますが、これらが存在しないか必要でない場合は、囲んでいるセクションのaria-label属性に数字または文字を含めて、支援技術によって読み上げられるようにします。また、明示的または暗黙的な見出しがないと、支援技術ではセクション間を移動する機能が提供されないことがよくあります（純粋にスタイル要素として扱われます）。

+ +

各セクションのエントリーは、順序なしリストを使用して構造化します。エントリーのアルファベット順の順序は重要ではないためです（たとえば、索引は、情報を失うことなく逆順に並べ替えることができます）。リストを使用すると、支援技術のユーザーは、段落や同様のマークアップを使用した場合のように、一度に 1 つずつ移動する必要がなくなり、リスト項目をジャンプして前後に行き来できます。

+ +

リストを使用すると、ナビゲーションが簡単になるだけでなく、リスト内の位置が通知されるため、ユーザーは必要に応じて後で同じ場所にすばやく戻ることができます。

+ +

電子出版物を参照するための最適な方法はまだ進化していますが、多くの出版物では静的なページ区切りマーカーが使用されています。これらは印刷版ソースと一致したものでなければならないわけではなく、索引からの安定した参照を確保するために、純粋にデジタル作品のみにも追加できます。

+
+ +
+

関連リンク

+ + +
+
+ + diff --git a/publishing/ja/metadata/schema.org/accessibilityFeature/MathML.html b/publishing/ja/metadata/schema.org/accessibilityFeature/MathML.html new file mode 100644 index 00000000..36b69dfc --- /dev/null +++ b/publishing/ja/metadata/schema.org/accessibilityFeature/MathML.html @@ -0,0 +1,101 @@ + + + + + MathML + + + + + + + +
+
+

定義

+ +

数式と式が [MathML] でエンコードされていることを識別します。

+
+ +
+

例

+ +
+
+
例 1 — EPUB 3
+
+ 
<meta property="schema:accessibilityFeature">
+   MathML
+</meta>
+
+ +
+
+
例 2 — EPUB 2
+
+ 
<meta name="schema:accessibilityFeature"
+      content="MathML"/>
+
+ +
+
+
例3 — オーディオブック
+
+ 
"accessibilityFeature": ["MathML"]
+
+
+ +
+

解説

+ +

MathML値は、数式のエンコードに MathML マークアップ言語が使用されていることを示すために使用されます。EPUB などの Web ベースの形式では、ますます多くのリーディングシステムやブラウザーで表示できるように、コンテンツをエンコードするために Presentation MathML が使用されます。

+ +

Presentaion MathML には、Content MathML でのみ利用可能な重要な意味情報が欠けていることがよくありますが、支援技術にサポートされており、ユーザーはより簡単にナビゲートしてコンテンツを理解できます。

+ +

フォールバックの説明が提供される場合、 MathML値は、多くの場合、 describedMath 値とペアになります。

+ +

詳細については、 MathML ナレッジベース ページを参照してください。

+ +
+
+

円の定義のための MathML 方程式。

+
+ 
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+   <mrow>
+      <msup>
+         <mi>x</mi>
+         <mn>2</mn>
+      </msup>
+      <mo>+</mo>
+      <msup>
+         <mi>y</mi>
+         <mn>2</mn>
+      </msup>
+      <mo>=</mo>
+      <msup>
+         <mi>r</mi>
+         <mn>2</mn>
+      </msup>
+   </mrow>
+</math>
+
+
+ +
+

関連リンク

+ + +
+
+ + diff --git a/publishing/ja/metadata/schema.org/accessibilityFeature/none.html b/publishing/ja/metadata/schema.org/accessibilityFeature/none.html new file mode 100644 index 00000000..a0c96b5f --- /dev/null +++ b/publishing/ja/metadata/schema.org/accessibilityFeature/none.html @@ -0,0 +1,73 @@ + + + + + none（アクセシビリティ機能なし） + + + + + + + +
+
+

定義

+ +

リソースにアクセシビリティ機能が含まれていないことを示します。

+
+ +
+

例

+ +
+
+
例 1 — EPUB 3
+
+ 
<meta property="schema:accessibilityFeature">
+   none
+</meta>
+
+ +
+
+
例 2 — EPUB 2
+
+ 
<meta name="schema:accessibilityFeature"
+      content="none"/>
+
+ +
+
+
例3 — オーディオブック
+
+ 
"accessibilityFeature": ["none"]
+
+
+ +
+

解説

+ +

none値は、出版物にアクセシビリティ機能が含まれていないことを示すために使用されます。

+ +

この値は、出版物にアクセシビリティ機能が含まれていないかどうか、またはアクセシビリティ機能があるかの確認がされていないかどうかについて曖昧さがないようにするために存在します。

+
+ +
+

関連リンク

+ + +
+
+ + diff --git a/publishing/ja/metadata/schema.org/accessibilityHazard.html b/publishing/ja/metadata/schema.org/accessibilityHazard.html new file mode 100644 index 00000000..5ad7ebc0 --- /dev/null +++ b/publishing/ja/metadata/schema.org/accessibilityHazard.html @@ -0,0 +1,166 @@ + + + + + accessibilityHazard（アクセシビリティ上の危険性） + + + + + + + +
+
+

定義

+ +

記述されたリソースの特性が、一部のユーザーにとって生理的に危険である。WCAG 2.2 ガイドライン 2.3に関連。

+
+ +
+

例

+ +
+
+
例 1 — EPUB 3
+
+ 
<meta property="schema:accessibilityHazard">flashing</meta>
+<meta property="schema:accessibilityHazard">motionSimulation</meta>
+
+ +
+
+
例 2 — EPUB 2
+
+ 
<meta name="schema:accessibilityHazard" content="flashing"/>
+<meta name="schema:accessibilityHazard" content="motionSimulation"/>
+
+ +
+
+
例3 — オーディオブック
+
+ 
"accessibilityHazard": ["flashing", "motionSimulation"]
+
+ +
+
+
例4 — RDFaを使用したHTML
+
+ 
<p><strong>Warning</strong>: <span
+property="accessibilityHazard">flashing</span> 
+in this video may cause seizures in some 
+individuals.</p>
+
+ +
+
+
例5 — マイクロデータを含むHTML
+
+ 
<p><strong>Warning</strong>: <span
+itemprop="accessibilityHazard">flashing</span> 
+in this video may cause seizures in some 
+individuals.</p>
+
+
+ +
+

値

+ +

以下の値は、潜在的な危険性（または危険性の欠如）を特定し、そのような敏感なユーザーが事前に何を予期すべきかを知るために使用されます。

+ +
+

注記

+

使用するメタデータ形式（JSON-LD など）がリストをサポートしていない場合、機能ごとに個別のプロパティ宣言を使用します。スペース、カンマ、その他の区切り文字を使用して値を 1 つのプロパティに結合しないでください。

+
+ +
+

flasing （閃光）

+ +

flashing値は、出版物に 1 秒間に 3 回以上閃光するコンテンツがあること、または閃光が一般閃光閾値及び赤色閃光閾値を下回っていることを示すために使用されます。

+ +

これらの閃光の危険性は、光に敏感なユーザーに頭痛や発作を引き起こす可能性があります。この値を設定するだけでなく、出版物にはそのようなコンテンツが配置されている場所に警告を含める必要があります。

+ +

ビデオは閃光の危険（ストロボ効果など）の原因としてよく認識されていますが、閃光のリスクをもたらす可能性のあるコンテンツの種類は多数あります（アニメーション グラフィック、スクリプト化されたゲームや画像など）。

+
+ +
+

noFlashingHazard（閃光の危険性なし）

+ +

noFlashingHazard値はflashingの反対で、発行者が出版物の閃光の危険性をチェックし、存在しないことを確認したことを示すために使用されます。

+ +

この値は、閃光の欠如が危険であることを示すものではありません。

+
+ +
+

none （アクセシビリティ上の危険性なし）

+ +

none値は、コンテンツがユーザーにとって既知の危険をもたらさないことを発行者が確信している場合に使用されます。

+ +

この値は通常、動的コンテンツやマルチメディア コンテンツがない（つまり、出版物がテキストや静的画像のみで構成されている）場合にのみ使用されます。

+
+ +
+

motionSimulation

+ +

motionSimulation値は、動きをシミュレートするコンテンツがあることを示すために使用されます。

+ +

モーション シミュレーションは、一部のユーザーに頭痛や吐き気を引き起こす可能性があります。この値を設定するだけでなく、このようなコンテンツが配置されている場所には警告を記載する必要があります。

+ +

モーション シミュレーションは、一人称視点のビデオやゲーム、3D エクスペリエンスやアニメーションなど、さまざまなメディアで使われています。

+
+ +
+

noMotionSimulationHazard

+ +

noMotionSimulationHazard値はmotionSimulationの反対で、発行者が出版物のモーション シミュレーション ハザードを確認し、危険性が存在しないことを確認するために使用されます。

+ +

この値は、モーションシミュレーションの欠如が危険であることを示すものではありません。

+
+ +
+

sound

+ +

sound値は、一部のユーザーに発作を引き起こす可能性のある聴覚コンテンツが出版物に含まれていることを示すために使用されます。このような発作の原因は、鳴り響く音やブザー音、突然の大きな音、特定の言葉や音楽など多岐にわたります。

+ +

十分な注意を払うために、出版物に聴覚コンテンツが含まれている場合はこのプロパティを設定する必要があり、ユーザーはコンテンツを再生するかどうかを常に決定する必要があります（つまり、聴覚コンテンツは自動再生されるべきではありません）。

+
+ +
+

noSoundHazard （音の危険性なし）

+ +

noSoundHazard値はsoundの反対で、発行者が出版物の音声による危険性をチェックし音声上の危険性が存在しないことを確認しするために使用されます。

+ +

この値は、音声がないことが危険であることを示すものではありません。

+
+ +
+

unknown（不明）

+ +

unknown値は、発行者がまだ出​​版物の危険性をチェックしていないか、一部のコンテンツが危険をもたらすかどうか不明であることを示すために使用されます。

+ +

この値は、アクセシビリティ レビューが完了する前に出版物をリリースする必要がある場合にのみ、一時的なプレースホルダーとして使用してください。

+
+
+ +
+

関連リンク

+ + +
+
+ + diff --git a/publishing/ja/sync-media/highlight.html b/publishing/ja/sync-media/highlight.html new file mode 100644 index 00000000..1a458a1d --- /dev/null +++ b/publishing/ja/sync-media/highlight.html @@ -0,0 +1,97 @@ + + + + + ハイライト（Highlighting） + + + + + + + +
+
+

要約

+ +

再生中のテキストのハイライトが、テキストの読み取りの邪魔にならないように気をつけます。

+
+ +
+

テクニック

+ + +
+ +
+

例

+ +
+
+
例 1 — 背景のハイライトの定義（EPUB 3）
+
+ + 
.-epub-overlay-active {
+   background-color: rgb(255,255,220);
+}
+
+ +
+
+
例 2 — コントラストを向上させるためにデフォルトの色を割り当てる（EPUB 3）
+
+ + 
.-epub-overlay-active {
+   color: rgb(0,0,0);
+   background-color: rgb(255,255,0);
+}
+ +
+
+ +
+

よくある質問

+ +
+
背景の陰影のみを適用できますか?
+
+

いいえ、アクティブなテキストに任意の CSS プロパティを適用できますが、選択した内容が出版物のアクセシビリティに影響する可能性があることに注意してください。

+

また、メディアも考慮してください。フォント サイズを大きくすると、アクティブなテキストが目立ちやすくなるように思えるかもしれませんが、実際の結果では、EPUB のページ上でテキストが飛び回ってしまう可能性があります。たとえば、1 つの段落がフォーカスを失うと、そのテキストサイズは縮小され、次の段落は拡大されるため、レイアウトが「移動」します。また、ページが最初にレンダリングされたときに表示されていたテキストが、新しいハイライトが適用されるとビューポートから押し出される場合もあります。

+
+
+
+ +
+

解説

+ +

再生中にテキストが同期されている場合、どの部分がナレーションされているかがより明確になるようにスタイルを設定することもできます。

+ +
+

EPUB 3

+ +

EPUB 3 では、特別なmedia:active-classプロパティを使用して、パッケージ ドキュメント メタデータ内のアクティブ要素に適用する CSS クラスを定義できます。

+ + 
<meta property="media:active-class">
+-epub-overlay-active
+</meta>
+ +

この場合、リーディングシステムは、添付されたすべてのCSSファイルで-epub-overlay-activeというクラスをチェックし、再生中に同期された各要素に定義されているスタイルを適用します。

+ +
+

注記

+

CSS クラスに使用する名前は重要ではありませんが、わかりやすくするために、クラスの目的を示す名前を付けることをお勧めします。

+
+
+
+
+ + diff --git a/publishing/ja/sync-media/lists.html b/publishing/ja/sync-media/lists.html new file mode 100644 index 00000000..89956f1a --- /dev/null +++ b/publishing/ja/sync-media/lists.html @@ -0,0 +1,143 @@ + + + + + リスト（Lists） + + + + + + + +
+
+

要約

+ +

メディア同期形式の書籍内のリスト構造を識別して、同期メディアの再生中のナビゲーションをより良いものにします。

+
+ +
+

テクニック

+ + +
+ +
+

例

+ +
例１ — 順序付きリストと順序なしリストの比較
<ul>
+<li>…</li>
+<li>
+  <p>…</p>
+  <p>…</p>
+<li>
+<li>
+  <ol>
+	 <li>…</li>
+  </ol>
+<li>
+</ul>
<seq epub:type="list">
+<par epub:type="list-item">…</par>
+<seq epub:type="list-item">
+  <par>…</par>
+  <par>…</par>
+</seq>
+<seq epub:type="list-item">
+  <seq epub:type="list">
+	 <par epub:type="list-item">…</par>
+  </seq>
+</seq>
+</seq>
-->
+ +
+
例2 — 定義リストの比較
+ + 
<dl>
+<dt>…</dt>
+<dd>…</dd>
+
+<dt>…</dt>
+<dt>…</dt>
+<dd>…</dd>
+<dd>
+  <p>…</p>
+  <p>…</p>
+<dd>
+</dl>
+ 
<seq epub:type="list">
+<seq epub:type="list-item">
+  <par>…</par>
+  <par>…</par>
+</seq>
+<seq epub:type="list-item">
+  <par>…</par>
+  <par>…</par>
+  <par>…</par>
+  <par>…</par>
+  <par>…</par>
+</seq>
+</seq>
+
+
+ +
+

解説

+ +

リストのナビゲーションを容易にするために、メディア オーバーレイ ドキュメントは、再生モードを中断することなくユーザーがリストを検出し、回避したり読み飛ばしたりできるようにマークアップする必要があります。

+ +

オーバーレイ内のリストの基本的なマークアップはリストの種類に関係なく同じですが、HTML5 には対応する必要がある２つの異なる種類のリストが含まれています。

+ +
+

順序付きリストと順序なしリスト

+ +

HTML のolおよびulリスト要素はそれぞれ項目のセットを表し、次のように同様のマークアップをします。

+ +
    +
  • 1 つのseq要素でリスト内のすべての項目を囲みます。このseqには、プロパティlistを指定するepub:type属性が必要です。
    • +
  • 複雑なリスト項目（２つ以上の同期ポイントを含むもの）も、 seq要素を使用して識別する必要があります。これらのseq要素には、プロパティlist-itemを指定するepub:type属性が必要です。リスト項目にサブリストや表などの複雑な構造が含まれている場合は、回避やスキップが可能になるように、それらの構造を適切にマークアップする必要があります。
    • +
  • 単一の同期ポイントのみを含む単純なリスト項目は、プロパティlist itemを指定するepub:type属性を持つpar要素を使用して表すことができます。
    • +
+
+ +
+

定義リスト

+ +

HTML 定義リスト（ dl要素）は、1 つ以上の名前（ dt要素）を 1 つ以上の値（ dd要素）に関連付けます。オーバーレイ ドキュメントでこれらのリストを作成するときは、次のマークアップ ルールに従う必要があります。

+ +
    +
  • 1 つのseq要素でリスト内のすべての用語と定義を囲む必要があります。このseqには、順序付きリストと順序なしリストと同じプロパティlistを指定するepub:type属性が必要です。
    • +
  • +seq要素は、関連するdtとddペアをすべて囲み、プロパティlist-itemを指定するepub:type属性を含める必要があります。
    • +
+
+
+ +
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/sync-media/overlays.html b/publishing/ja/sync-media/overlays.html new file mode 100644 index 00000000..c79cb9f9 --- /dev/null +++ b/publishing/ja/sync-media/overlays.html @@ -0,0 +1,208 @@ + + + + + メディアオーバーレイ（Media Overlays） + + + + + + + + +
+
+

概要

+ +

EPUB 3 では、メディアオーバーレイと呼ばれるメディアの同期の実装が定義されています。この仕様では、テキストのレンダリングと音声の再生を同期するためのSMIL文法のプロファイルが定義されています。

+ +

メディアオーバーレイ ドキュメントは、次の要素を使用して構築されています。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
要素使用
smil +smil要素は、各メディアオーバーレイのルート要素であり、オプションのheadと必須のbody要素が含まれます。
head +head要素には、オプションのmetadata要素にメタデータを含めることができますが、EPUB 3 仕様ではメタデータは必須ではありません。
metadata +metadata要素は、外部の名前空間からのメタデータをオーバーレイに含めることができる拡張要素です。
body +body要素は、含まれるseqとpar要素の順序によって再生を定義します。
seq +seq要素は、オーバーレイを構造化するために使用されます。ユーザーが読み飛ばし、または回避したいセクション、表、リストなどの複雑な構造を表すために使用されます。
par +par要素は、子のtextやaudio要素内の同期ポイントを定義します。
text +text要素は、視覚的なレンダリングを同期するコンテンツ ドキュメントと要素を識別します。
audio +audio要素で、音声ファイルを指定します。オプションで再生の開始点と終了点を指定します。
+ +

出版物を同期するには、出版物内の各コンテンツ ドキュメントに独自のオーバーレイが関連付けられている必要があります。オーバーレイは、オーバーレイを定義するitemの ID を持つmedia-overlay属性を使用して、パッケージ ドキュメント マニフェスト内のコンテンツ ドキュメントに関連付けられます。

+ +
+ +
+

例

+ +
+
例 1 — 基本的なオーバーレイ ドキュメント
+ +

次の例は、見出しと 2 つの段落のみで構成される章のオーバーレイ ドキュメントを示しています。

+ + 
<smil xmlns="http://www.w3.org/ns/SMIL"
+	  xmlns:epub="http://www.idpf.org/2007/ops"
+	  version="3.0">
+   <body>
+	  <seq
+		   epub:textref="chapter_001.xhtml"
+		   epub:type="bodymatter chapter">
+	  
+		 <par>
+			<text src="chapter_001.xhtml#c01h01"/>
+			<audio
+				   src="audio/c01.mp4"
+				   clipBegin="0:00:00.000" 
+				   clipEnd="0:00:05.250"/>
+		 </par>
+		 
+		 <par>
+			<text src="chapter_001.xhtml#c01p0001"/>
+			<audio
+				   src="audio/c01.mp4"
+				   clipBegin="0:00:05.250"
+				   clipEnd="0:00:58.100"/>
+		 </par>
+		 
+		 <par>
+			<text src="chapter_001.xhtml#c01p0002"/>
+			<audio
+				   src="audio/c01.mp4"
+				   clipBegin="0:00:58.100"
+				   clipEnd="0:02:04.000"/>
+		 </par>
+	  </seq>
+   </body>
+</smil>
+
+ +
+
例 2 — 章のドキュメントをオーバーレイにリンクする
+ + 
<item id="xchapter_001"
+	  href="chapter_001.xhtml"
+	  media-type="application/xhtml+xml"
+	  media-overlay="chapter_001_overlay"/>
+
+<item id="chapter_001_overlay"
+	  href="chapter_001_overlay.smil"
+	  media-type="application/smil+xml"/>
+
+
+ +
+

サンプル

+ +

EPUB サンプル プロジェクトには、メディア オーバーレイを実装する次の出版物が含まれています。

+ + +
+ +
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/sync-media/tables.html b/publishing/ja/sync-media/tables.html new file mode 100644 index 00000000..5643cb53 --- /dev/null +++ b/publishing/ja/sync-media/tables.html @@ -0,0 +1,105 @@ + + + + + 表（Tables） + + + + + + + +
+
+

要約

+ +

同期メディア形式の書籍内の表構造を識別して、同期メディアの再生中のナビゲーションをより良いものにします。

+
+ +
+

テクニック

+ + +
+ +
+

例

+ +
+

例 1 — XHTML 表 マークアップと、オーバーレイ 表 マークアップの比較

+ 
<table>
+   <tr>
+	  <td>
+		 <p>…</p>
+		 <p>…</p>
+	  </td>
+	  <td>…</td>
+	  <td>
+		 <ul>
+			<li>…</lt>
+		 </ul>
+	  </td>
+   </tr>
+</table>
+ + 
<seq epub:type="table">
+   <seq epub:type="table-row">
+	  <seq epub:type="table-cell">
+		 <par>…</par>
+		 <par>…</par>
+	  </seq>
+	  <par epub:type="table-cell">…</par>
+	  <seq epub:type="table-cell">
+		 <seq epub:type="list">
+			<par epub:type="list-item">…</par>
+		 </seq>
+	  </seq>
+   </seq>
+</seq>
+
+
+ +
+

解説

+ +

XHTMLの表が、支援技術を使用するユーザーがナビゲートできるマークアップ構造を提供するのと同様に、メディア オーバーレイ ドキュメントも再生を容易にするためにマークアップを通じて同等の読み飛ばし（skippability）と回避（escapability）の機能を提供する必要があります。

+ +

この構造は、マークアップ内の対応する行とセルを表すseq要素を使用してオーバーレイに階層化できます。表マークアップをオーバーレイ マークアップに変換する一般的なプロセスは次のとおりです。

+ + +
+ +
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/wcag/dragging-movements.html b/publishing/ja/wcag/dragging-movements.html new file mode 100644 index 00000000..16f9e6b2 --- /dev/null +++ b/publishing/ja/wcag/dragging-movements.html @@ -0,0 +1,85 @@ + + + + + ドラッグ動作 + + + + + + +
+
+

概要

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バージョン：WCAG 2.2以上
セクション番号：2.5.7
レベル：AA
適用対象： +
    +
  • インタラクティブなコンテンツ
    • +
+
要件： +

操作にドラッグ動作を用いる全ての機能は、ドラッグが不可欠でない限り、ドラッグなしのシングルポインタで完遂できる。

+
ガイダンス： + +
達成方法：WCAG 2.2の達成基準に対応する達成方法はまだ利用できません。
+
+
+

目的

+ +

この達成基準の目的は、すべてのユーザーがドラッグ アンド ドロップ操作を行うために必要な器用さを備えているわけではないため、ユーザーがドラッグ アンド ドロップ操作を実行する必要がないようにすることです。

+
+ +
+

要件の満たし方

+ +

インタラクティブなコンテンツでドラッグ アンド ドロップ操作を使用する場合、コンテンツ製作者はポインター デバイスを使用して、この操作を実行するための代替方法を提供する必要があります。たとえば、ユーザーがオブジェクトをクリックしてアクティブにし、ボタンをクリックしてオブジェクトを移動できるようにします。

+
+
+

追加情報

+ +

ナレッジベースでは、現在、アクセシブルな入力モダリティの作成について含まれておりません。詳細については、WCAG ガイダンス ドキュメントを参照してください。

+
+
+ + diff --git a/publishing/ja/wcag/error-identification.html b/publishing/ja/wcag/error-identification.html new file mode 100644 index 00000000..0af43a54 --- /dev/null +++ b/publishing/ja/wcag/error-identification.html @@ -0,0 +1,101 @@ + + + + + エラーの特定 + + + + + + +
+
+

概要

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バージョン：WCAG 2.0以上
セクション番号：3.3.1
レベル：A
適用対象： +
    +
  • フォーム入力
    • +
+
要件： +

入力エラーが自動的に検出された場合は、エラーとなっている箇所が特定され、そのエラーが利用者にテキストで説明される。

+
ガイダンス： + +
達成方法： + +
+
+
+

目的

+ +

この達成基準の目的は、すべてのユーザーが入力エラーを見つけて理解できるようにすることです。

+
+
+

要件の満たし方

+ +

コンテンツ製作者は、無効な情報を含むフォーム フィールドが明確に識別され、簡単に見つけられるようにする必要があります。これは多くの場合、無効なフィールドのスタイル設定、ラベル付け、識別に加えて、フォームの先頭に問題の一覧を提供し、各問題にユーザーをリンクすることで実現されます。

+ +

コンテンツ製作者は入力の問題を説明する必要もあります。問題の解決方法のに関する提案の提供は、達成基準 3.3.3で取り上げられています。

+
+
+

追加情報

+ +

ナレッジベースの次のページには、コンテンツを出版する際にこの達成基準を満たす方法が記載されています。

+ + +
+
+ + diff --git a/publishing/ja/wcag/error-prevention-all.html b/publishing/ja/wcag/error-prevention-all.html new file mode 100644 index 00000000..3ba7a576 --- /dev/null +++ b/publishing/ja/wcag/error-prevention-all.html @@ -0,0 +1,105 @@ + + + + + エラー回避（全て） + + + + + + +
+
+

概要

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バージョン：WCAG 2.0以上
セクション番号：3.3.6
レベル：AAA
適用対象： +
    +
  • フォーム
    • +
+
要件： +

利用者に情報の送信を要求するウェブページでは、次に挙げる事項のうち、少なくとも一つを満たしている

+ +
+
取消
+
+

送信を取り消すことができる。

+
+ +
チェック
+
+

利用者が入力したデータの入力エラーがチェックされ、利用者には修正する機会が提供される。

+
+ +
確認
+
+

送信を完了する前に、利用者が情報の見直し、確認及び修正をするメカニズムが利用できる。

+
+
+
ガイダンス： + +
達成方法：WCAG には現在、この達成基準の達成方法は含まれていません。
+
+
+

目的

+ +

この達成基準の目的は、データを保存するサーバーに送信する前に、ユーザーがデータのエラーを修正したり、データを見直したりする機会を確保することです。あるいは、送信を取り消す機能をユーザーに提供する必要があります。

+
+
+

要件の満たし方

+ +

この達成基準は、外部サーバーに送信され保存されるすべてのフォーム データに適用される点を除いて、実質的には達成基準 3.3.4と同じです。

+
+
+

追加情報

+ +

ナレッジベースの次のページには、コンテンツを出版する際にこの達成基準を満たす方法が記載されています。

+ + +
+
+ + diff --git a/publishing/ja/wcag/error-prevention-legal-financial-data.html b/publishing/ja/wcag/error-prevention-legal-financial-data.html new file mode 100644 index 00000000..e97e4734 --- /dev/null +++ b/publishing/ja/wcag/error-prevention-legal-financial-data.html @@ -0,0 +1,119 @@ + + + + + エラー回避（法的、金融及びデータ） + + + + + + +
+
+

概要

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バージョン：WCAG 2.0以上
セクション番号：3.3.4
レベル：AA
適用対象： +
    +
  • フォーム
    • +
+
要件： +

利用者にとって法律行為もしくは金融取引が生じる、利用者が制御可能なデータストレージシステム上のデータを変更若しくは削除する、又は利用者が試験の解答を送信するウェブページでは、次に示す事項のうち、少なくとも一つを満たしている。

+ +
+
取消
+
+

送信を取り消すことができる。

+
+ +
チェック
+
+

利用者が入力したデータの入力エラーがチェックされ、利用者には修正する機会が提供される。

+
+ +
確認
+
+

送信を完了する前に、利用者が情報の見直し、確認及び修正をするメカニズムが利用できる。

+
+
+
ガイダンス： + +
達成方法： + +
+
+
+

目的

+ +

この達成基準の目的は、データを保存するサーバーに送信する前に、ユーザーがデータのエラーを修正したり、データを見直したりする機会を確保することです。あるいは、送信を取り消す機能をユーザーに提供する必要があります。

+
+
+

要件の満たし方

+ +

デジタル出版物では通常、法的データや財務データは収集されないため、この達成基準はほとんどの場合、テストにのみ適用されます。

+ +

デジタル教科書には、リモート サーバー（例：学校のコース ポータルなど）に提出されるテストが含まれている場合があります。このような場合、コンテンツ製作者は入力を検証し、送信前にユーザーがエラーを修正できるようにするか、ユーザーに入力を確認するための変更を提供する必要があります。理想的には、両方のオプションが提供されることです。

+ +

提出を取り消すことが、この基準を満たす唯一の方法である場合は、出版物以外の代替手段を見つけることが推奨されます。たとえば、ユーザーは、テストを完了するために与えられた期間が終了するまで、コース ポータルから提出を取り消すことができるかもしれません。

+ +

達成基準は、データがリモート サーバーに転送され、保存される場合にのみ適用されることに注意してください。デジタル出版物内でのみ実行されるクイズやその他の埋め込みテストは、これらの要件の対象ではありません。

+
+
+

追加情報

+ +

ナレッジベースの次のページには、コンテンツを出版する際にこの達成基準を満たす方法が記載されています。

+ + +
+
+ + diff --git a/publishing/ja/wcag/error-suggestion.html b/publishing/ja/wcag/error-suggestion.html new file mode 100644 index 00000000..83f02fc6 --- /dev/null +++ b/publishing/ja/wcag/error-suggestion.html @@ -0,0 +1,99 @@ + + + + + エラー修正の提案 + + + + + + +
+
+

概要

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バージョン：WCAG 2.0以上
セクション番号：3.3.3
レベル：AA
適用対象： +
    +
  • フォーム入力
    • +
+
要件： +

入力エラーが自動的に検出され、修正方法を提案できる場合、その提案が利用者に提示される。ただし、セキュリティ又はコンテンツの目的を損なう場合は除く。

+
ガイダンス： + +
達成方法： + +
+
+
+

目的

+ +

この達成基準の目的は、ユーザーが入力エラーを修正する方法を理解できるようにすることです。

+
+
+

要件の満たし方

+ +

コンテンツ製作者は、可能な限り、入力エラーを修正する方法についてのガイダンスを提供する必要があります。たとえば、入力フィールドに許容される値の範囲が限られている場合は、その範囲をリストアップまたは説明することができます。または、ユーザーがフィールドに長すぎる回答を入力した場合は、入力されたテキストの量だけでなく、サイズ制限も記載することができます。

+
+
+

追加情報

+ +

ナレッジベースの次のページには、コンテンツを出版する際にこの達成基準を満たす方法が記載されています。

+ + +
+
+ + diff --git a/publishing/ja/wcag/extended-audio-description-prerecorded.html b/publishing/ja/wcag/extended-audio-description-prerecorded.html new file mode 100644 index 00000000..99863611 --- /dev/null +++ b/publishing/ja/wcag/extended-audio-description-prerecorded.html @@ -0,0 +1,91 @@ + + + + + 拡張音声解説（収録済み） + + + + + + +
+
+

概要

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バージョン：WCAG 2.0以上
セクション番号：1.2.7
レベル：AAA
適用対象：音声付き映像
要件： +

前景音の合間の時間が、音声解説で映像の意味を伝達するのに不十分な場合、同期したメディアに含まれている全ての収録済みの映像コンテンツに対して、拡張音声解説が提供されている。

+
ガイダンス： + +
達成方法： + +
+
+
+

目的

+ +

この達成基準の目的は、全盲または視覚障害のあるユーザーが、拡張音声解説トラックを通じて、映像の非視覚コンテンツ（例：個人の動作、場面の変化など）にアクセスできるようにすることです。

+
+
+

要件の満たし方

+ +

この達成基準を満たす方法は、拡張音声解説の使用を必要とする点を除いて、 1.2.5と同様です。拡張音声解説トラックは、必要に応じて再生を一時停止し、音声トラックの自然な切れ目の間に詳細な説明を可能にするという点で、標準の音声解説トラックとは異なります。

+ +

この達成基準は、再生を一時停止せずに読者に必要なすべての情報を提供できる場合（つまり、標準的な音声解説トラックを通じて）には適用されません。

+ +
+

注記

+

電子書籍フォーマットでは通常、拡張音声解説の使用をサポートしていないため、ほとんどの場合、この要件を満たすことは現実的ではありません。

+
+
+
+

追加情報

+ +

出版フォーマットでの実装が不十分であるため、ナレッジベースには現在、拡張音声解説に関する情報は含まれていません。詳細についてはWCAG ガイダンス ドキュメントを参照してください。

+
+
+ +