Skip to content

Commit

Permalink
Merge pull request #99 from daisy/gitlocalize-30018
Browse files Browse the repository at this point in the history 
8 files translated into japanese
  • Loading branch information
@mattgarrish
mattgarrish authored Jun 19, 2024
2 parents 2229419 + f24cd20 commit 18cd86e
Show file tree
Hide file tree
Showing 7 changed files with 506 additions and 0 deletions.
22 changes: 22 additions & 0 deletions publishing/ja/conformance/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アクセシビリティ適合</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Table of contents for the accessibility conformance section.">
<script>
var page_info = {
'category': 'Conformance',
'isIndex': true,
'root_id': 'conformance'
};
</script>
<script src="/js/init.js"></script>
</head>

<body>
<main>
</main>
</body>
</html>
153 changes: 153 additions & 0 deletions publishing/ja/html/asides.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アサイド（補足説明）</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Guidelines for accessibly structuring content.">
<script>
var page_info = {
'category': 'HTML',
'appliesTo': ['Audiobooks*','EPUB3']
};
</script>
<script src="/js/init.js"></script>
</head>

<body>
<main>
<section id="summary">
<h3>要約</h3>

<p>補助的なコンテンツを<code>aside</code>要素でマークすると、支援技術がそれを主要な文脈と区別できるようになり、ユーザーはその内容をスキップできるようになります。</p>

<div class="note" role="note" aria-labelledby="support-note">
<p id="support-note" class="label">注</p>
<p><code>aside</code>要素のデフォルトの性質が今後変更されます。 <code>section</code>要素内にある、アクセシブルな名前がついていない<code>asides</code> は、補完的なランドマーク（目印）とは見なされなくなります。代わりに、汎用要素（つまり、 <code>div</code>要素と同じ）と見なされます。</p>
<p>この変更が実際に実装された時点で、このページは更新されます。当面の間、このページのガイダンスは現在のベストプラクティスとして有効です。</p>
</div>
</section>

<section id="tech">
<h3>テクニック</h3>

<ul>
<li>
<p>サイドバーなどの補助的な素材には<code>aside</code>要素を使用します。[[WCAG-1.3.1]]</p>
</li>
<li>
<p>各アサイドに見出しを含めます [[WCAG-1.3.1]]</p>
</li>
</ul>
</section>

<section id="ex">
<h3>例</h3>

<figure id="ex-01">
<figcaption>
<div class="label">例 1 — サイドバー</div>
<p>サイドバーの見出しは、それを含むセクションより 1 レベル下にあります。</p>
</figcaption>
<pre id="ex-01-src" class="prettyprint linenums"><code>&lt;section …&gt;
&lt;h2 id="s02"&gt;Section 2: The War of 1812&lt;/h2&gt;
…
&lt;aside aria-labelledby="sb01"&gt;
&lt;h3 id="sb01"&gt;Timeline of Events&lt;/h3&gt;
…
&lt;/aside&gt;
…
&lt;/section&gt;</code></pre>
</figure>
</section>

<figure id="ex-02">
<figcaption>
<div class="label">例 2 — 脚注</div>
<p><code>doc-footnote</code>ロールは、 <code>aside</code>にアクセシブルな名前が必要ないことを意味します。</p>
</figcaption>
<pre id="ex-02-src" class="prettyprint linenums"><code>&lt;aside
role="doc-footnote"
id="fn01"&gt;
&lt;p&gt;[1] …&lt;/p&gt;
&lt;/aside&gt;</code></pre>
</figure>

<section id="faq">
<h3>よくある質問</h3>

<dl>
<dt id="faq-001">サイドバーにロールの定義が必要ないのはなぜですか?</dt>
<dd>
<p><code>aside</code>要素は、HTML 仕様定義に従って、サイドバーを定義します。</p>

<blockquote>
<p><code>aside</code>要素は、コンテンツに間接的に関連するコンテンツで構成されるページのセクションを表します。このようなセクションは、印刷されたタイポグラフィではサイドバー付きの文章として表されることがよくあります。</p>
</blockquote>

<p>これにロールの定義を追加してもアクセシビリティは向上しません。</p>
</dd>

<dt id="faq-002">アサイド（補足説明）にはどの見出しレベルを使用すればよいですか?</dt>
<dd>
<p>マークアップ内の補足コンテンツの位置は主要な文脈と同じように固定されていませんが（つまり、コンテンツをどこに配置するのが最適かは多くの場合選択の問題です）、補足コンテンツは常にセクションに属します。そのため、補足コンテンツは、それを含む<code>section</code>のサブセクションとして扱われる必要があります。したがって、 <code>aside</code>内の最初の見出しレベルは、それを含むセクションより常に 1 レベル低くする必要があります。</p>

<p>たとえば、章に<code>h2</code>タグの見出しがある場合、その章内のサイドバーの見出しは<code>h3</code>で始まる必要があります。これにより、支援技術のユーザーが見出しレベルで移動するときに、コンテンツのサブセクションを論理的に見つけられるようになります。このようなシナリオでは、サイドバーに<code>h1</code>見出しがあるとはユーザーは予想しません。これは、サイドバーが上位レベルのコンテンツ セクションになってしまうためです。</p>

<p>出版者が見出し番号の一貫性を維持できない場合は、ユーザーが予測できる別の方法を見つける必要があります。たとえば、すべてのサイドバーに<code>h6</code>を使用するなどです。ただし、この場合、出版者は、たとえば電子書籍の使用方法のセクションで、この規則についてユーザーに説明する必要があります。</p>

<p>見出しの番号の空白や一貫性のない番号は、技術的には WCAG 要件に違反しているわけではありませんが、見出しごとに移動する必要があるユーザーにとっては、読みやすいとは言えません。</p>
</dd>

<dt id="faq-003">サイドバーにはアクセシブルな名前が必要ですか?</dt>
<dd>
<p>ドキュメント内にいくつあるかによって異なります。</p>

<p>ドキュメントにロールのない<code>aside</code>要素が 1 つだけある場合は、アクセシブルな名前は必要ありません。</p>

<p>ただし、複数ある場合は、それらを区別するためのアクセシブルな名前がないと、ユーザーは順番に移動しない限り、どれがどれであるかを判断できません。</p>

<p>（このルールは、ランドマークのロールに適用されるアクセシブルな名前を追加する際のルールと同じであることに留意してください。）</p>
</dd>

<dt id="faq-004">
<code>aside</code>と<code>article</code>どちらを使うべきでしょうか?</dt>
<dd>
<p><code>aside</code>要素は、コンテンツが主要な文脈を説明または拡張する場合に最適です。サイドバー、用語集、および同様の説明コンテンツに最も適しています。</p>

<p><code>article</code>要素は、コンテンツがドキュメントまたは出版物の他のコンテンツから独立している場合に最適です。たとえば、科学雑誌では、共通のテーマがあっても、各記事は他の記事から独立しています。</p>
</dd>

<dt id="faq-005">すべてのロールにアクセシブルな名前が必要ではないのはなぜですか?</dt>
<dd>
<p><code>aside</code>に、 <code>doc-footnote</code>や<code>doc-pullquote</code>などのロールが指定された場合、要素の性質はデフォルトの補足的ランドマークから変更されます。これらのロールが適用されると、 <code>aside</code>はもはや補足的ランドマークとして認識されなくなるため、アクセシブルな名前は必要なくなります。</p>
<p>ロールを使用する場合は、その定義を参照して、アクセシブルな名前が必要かどうかを判断します。</p>
</dd>
</dl>
</section>

<section id="desc">
<h3>解説</h3>

<p><code>aside</code>要素は、作成者がサイドバーなどの補助的なコンテンツを識別できるようにするために HTML5 で導入されました。支援技術のユーザーが<code>aside</code>に遭遇すると、そのコンテンツは通常「補足的」なものとして紹介され、主要な文脈の一部ではないことを認識できるようにします。</p>

<p>この要素が導入される前は、背景色と境界線が、補助的なコンテンツを主要な文脈と区別する唯一の方法であることがよくありました。ただし、これらの方法は支援技術には不透明であるため、サイドバーに見出しがないと文脈が突然変わる理由がわかりにくく、見出しがある場合でも主要なコンテンツの新しいセクションが始まるかどうかが必ずしも明確ではありませんでした。</p>

<p><code>aside</code>要素を使用すると、ユーザーは読んでいるときにコンテンツをスキップできるだけでなく、補完的なランドマークとして、セクションを終えた後にコンテンツを簡単に見つけて戻ることもできます。この機能を最も効果的にするには、各サイドバーにアクセシブルな名前を付ける必要があります。そうしないと、ユーザーはサイドバーを区別できなくなります。</p>
</section>

<section id="refs">
<h3>関連リンク</h3>

<ul>
<li>MDN — <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside">&lt;aside&gt;: アサイド要素</a>
</li>
<li>HTML — <a href="https://html.spec.whatwg.org/multipage/sections.html#the-aside-element"><code>aside</code>要素</a>
</li>
<li>HTML —<a href="https://html.spec.whatwg.org/multipage/sections.html#headings-and-sections">見出しとセクション</a>
</li>
</ul>
</section>
</main>
</body>
</html>
146 changes: 146 additions & 0 deletions publishing/ja/html/figures.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>図表（Figure）</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Guidelines for the accessible inclusion of figures.">
<script>
var page_info = {
'category': ['HTML'],
'appliesTo': ['Audiobooks*','EPUB3']
};
</script>
<script src="/js/init.js"></script>
</head>
<body>
<main>
<section id="summary">
<h3>要約</h3>

<p>図表にはその目的を示すキャプションが含まれているようにします。</p>
</section>

<section id="tech">
<h3>テクニック</h3>

<ul>
<li>キャプションを付けます。[[WCAG-1.3.1]]</li>
</ul>
</section>

<section id="ex">
<h3>例</h3>

<figure id="ex-01">
<figcaption>
<div class="label">例 1 — キャプションと説明付きの画像</div>
</figcaption>
<pre id="ex-01-src" class="prettyprint linenums"><code>&lt;figure&gt;
&lt;img src="images/blob.jpeg" alt="the blob"
aria-describedby="img01-desc"/&gt;
&lt;figcaption&gt;
Figure 3.7 — The blob is digesting Steve
McQueen in this unreleased ending to the
classic movie.
&lt;aside class="hidden" id="img01-desc"&gt;
&lt;p&gt;
In the photo, Steve McQueen can be seen
floating within the gelatinous body of
the blob as it moves down main street …
&lt;/p&gt;
&lt;/aside&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
</figure>

<figure id="ex-02">
<figcaption>
<div class="label">例 2 — 説明リンク付きの画像</div>
</figcaption>
<pre id="ex-02-src" class="prettyprint linenums"><code>&lt;figure&gt;
&lt;p&gt;&lt;a href="blob-desc.xhtml"&gt;Description&lt;/a&gt;&lt;/p&gt;
&lt;img src="images/blob.jpeg" alt="the blob"/&gt;
&lt;figcaption&gt;
Figure 3.7 — The blob is digesting Steve
McQueen in this unreleased ending to the
classic movie.
&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
</figure>

<figure id="ex-03">
<figcaption>
<div class="label">例 3 — figcaption を使用した説明付きの表</div>
</figcaption>
<p>図表に表が含まれている場合は、表の<code>caption</code>要素を使用しないでください。 <code>figcaption</code>と<code>caption</code>両方を含めると、両方がレンダリングされます。</p>
<pre id="ex-03-src" class="prettyprint linenums"><code>&lt;figure&gt;
&lt;figcaption&gt;
Characteristics with positive and
negative sides.
&lt;aside class="hidden" id="tbl01-summary"&gt;
&lt;p&gt;Summary&lt;/p&gt;
&lt;p&gt;
Characteristics are given
in the second column…
&lt;/p&gt;
&lt;/aside&gt;
&lt;/figcaption&gt;
&lt;table aria-describedby="tbl01-summary"&gt;
…
&lt;/table&gt;
&lt;/figure&gt;</code></pre>
</figure>

<figure id="ex-04">
<figcaption>
<div class="label">例4 — 見出し付きの図表</div>
<p>図表にキャプションとは別の見出しがある場合、図表を<code>aside</code>要素で囲み、その要素に見出しを配置することをお勧めします。図表は<a>セクション化されたコンテンツ</a>ではないため、見出しを<code>figure</code>タグ内に配置すると、支援技術を使用するユーザーによるナビゲーションの妨げになります。</p>
</figcaption>
<pre id="ex-04-src" class="prettyprint linenums"><code>&lt;aside aria-labelledby="fig-hd"&gt;
&lt;h3 id="fig-hd"&gt;Figure 1.2 — Hello Universe!&lt;/h3&gt;
&lt;figure&gt;
&lt;pre&gt;
…
&lt;/pre&gt;
&lt;figcaption&gt;
The original "hello world" example is expanded to show how …
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/aside&gt;</code></pre>
</figure>
</section>

<section id="desc">
<h3>解説</h3>

<p>図表には、画像、グラフ、表、コードスニペットなど、さまざまな形式があります。ただし、図表の中心的な特徴は、それが主要な説明の補助的要素であることです（つまり、図表をすぐに読まなくても、テキストを追うことができます）。画像、グラフ、および同様のコンテンツが主要な文脈の一部である場合は、 <code>figure</code>タグで囲まないでください。</p>

<p>図表のコンテンツは HTML の<code>figure</code>要素にカプセル化されており、 <code>figcaption</code>要素を使用して説明的なキャプションをコンテンツに関連付けることもできます。</p>

<p>キャプションは図表の内容の後に置かれることが多いため、これまでは、画像や表に続く説明文に到達するまで、読者は図表の内容がわからないことが多かったのですが、 <code>figcaption</code>要素により、読者が図表に入るとすぐに支援技術がキャプションを読み上げられるようになりました。</p>

<p><code>figcaption</code>要素は<code>figure</code>の最初または最後に配置<strong>しなければならない</strong>ことに注意してください。</p>

<div class="note" role="note" aria-labelledby="content-note">
<p class="label" id="content-note">注</p>

<p>キャプションを提供することは、図表内のコンテンツをアクセシブルにすることの代替にはなりません。最も一般的なタイプの図表のコンテンツに対するアクセシブルな実践の詳細については、<a href="./images-desc.html">画像の説明</a>と<a href="./tables-basics.html">表の基本</a>に関するナレッジベースページを参照してください。</p>
</div>
</section>

<section id="refs">
<h3>関連リンク</h3>

<ul>
<li>MDN — <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure">&lt;figure&gt;: キャプションが付けられる図表要素</a>
</li>
<li>HTML — <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element"><code>figure</code>要素</a>
</li>
<li>HTML —<a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-figcaption-element"><code>figcaption</code>要素</a>
</li>
</ul>
</section>
</main>
</body>
</html>
Loading

0 comments on commit 18cd86e

Please sign in to comment.