Skip to content

Commit

Permalink
Merge pull request #135 from daisy/gitlocalize-32070
Browse files Browse the repository at this point in the history 
CSS section Japanese translation finalized
  • Loading branch information
@mattgarrish
mattgarrish authored Dec 2, 2024
2 parents f273fde + 90bca80 commit 6891d18
Show file tree
Hide file tree
Showing 7 changed files with 1,296 additions and 0 deletions.
97 changes: 97 additions & 0 deletions publishing/ja/css/color.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<!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="Describes best practices when using color to differentiate content.">
<script>
var page_info = {
'category': 'CSS',
'appliesTo': ['Audiobooks*','Audiobooks*','EPUB3','EPUB2']
};
</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>
<p>情報を識別するために色に頼らない代替手段も提供します。[[WCAG-1.4.1]]</p>
</li>
<li>
<p>CSSはセマンティックマークアップと共に使用します。[[WCAG-1.3.1]]</p>
</li>
</ul>
</section>

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

<figure id="ex-01">
<figcaption>
<div class="label">例1 — リンクに下線を使用する</div>
<p>デフォルトの下線が完全に削除されないように、すべてのリンクに点線の下線を追加します。</p>
</figcaption>
<pre id="ex-01-src" class="prettyprint linenums"><code>a {
text-decoration: none;
padding-bottom: 2px;
border-bottom: 1px dotted rgb(0,0,238);
}</code></pre>
</figure>

<figure id="ex-02">
<figcaption>
<div class="label">例 2 — サイドバーにラベルを使用する</div>
<p>次のサイドバーは、緑色の枠で囲まれた一連の歴史的出来事の一部です。<code>aria-label</code>属性で、不足しているコンテキストを追加します。</p>
</figcaption>
<pre id="ex-02-src" class="prettyprint linenums"><code>&lt;aside
aria-label="historical event series"
class="historical"&gt;
&lt;h4&gt;Battle of Waterloo&lt;/h4&gt;
…
&lt;/aside&gt;</code></pre>
</figure>

<figure id="ex-03">
<figcaption>
<div class="label">例3 — 図表のキャプションへのデータ組み込み</div>
<p>円グラフとして表現されているデータをキャプションにも記載します。</p>
</figcaption>
<pre id="ex-03-src" class="prettyprint linenums"><code>&lt;figure&gt;
&lt;figcaption&gt;
&lt;p&gt;Figure 1 — Political Affiliations&lt;/p&gt;
&lt;p&gt;Of 2000 people surveyed, 33% identified themselves as Conservatives,
25% as Liberal, 10% as Rhino, 2% as Green and 30% declared no affiliation.&lt;/p&gt;
&lt;/figcaption&gt;
&lt;img src="poll.jpg" alt="January 2018 political poll results"/&gt;
&lt;/figure&gt;</code></pre>
</figure>
</section>

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

<p>色の使用は、目の見えるユーザーに情報を伝えるためによく使われるセマンティック手法ですが、情報を伝える唯一の手段として使用すべきではありません。枠線の色や網掛けを使用する場合は、常にセマンティックマークアップを基にして、視覚に頼らない再生方法を使うユーザーに平等なアクセスを提供する必要があります。</p>

<p>より一般的には、コンテンツからスタイルを常に明確に分離してください。スタイルを分離することで、ユーザーは独自のスタイルシートを適用したり、ユーザーエージェントに組み込まれている色、明るさ、コントラストのコントロールを使用して、自身のニーズに合わせて表示を調整できるようになります。</p>

<p>しかし、色は意味を伝える際に生じる問題以外にも問題があります。赤い背景に緑の文字（またはその逆）は、一部の人にとっては判読できず、一般的にもハレーションを引き起こします。また、多くのユーザーは赤と黒の区別がつきません。明るい白い背景に黒の文字は、目の疲れや頭痛の原因になることがあります。</p>

<p>同様に、ある色合いを別の色合いの上に重ねると読みにくくなります。また、明るい色または暗い色を２つ重ねると読みにくくなります（明度）。</p>

<p>ユーザーは、設定変更ができるユーザーエージェントを使ってこれらの問題の一部を改善できるかもしれませんが、最初からこれらの問題を回避することをお勧めします。</p>
</section>
</main>
</body>
</html>
102 changes: 102 additions & 0 deletions publishing/ja/css/contrast.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<!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="Best practices for ensuring sufficient color contrast.">
<script>
var page_info = {
'category': 'CSS',
'appliesTo': ['Audiobooks*','EPUB3','EPUB2']
};
</script>
<script src="/js/init.js"></script>
<style>
.figlabel {
font-weight: bold;
}
</style>
</head>

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

<p>背景色や背景画像を設定するときは、CSSを使って十分なコントラストを確保してください。</p>
</section>

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

<ul>
<li>
<p>前景のテキスト色と背景色の間に最低限のコントラストを確保してください。[[WCAG-1.4.3]]</p>
</li>
<li>
<p>前景のテキスト色と背景色の間のコントラストの強調を検討してください。[[WCAG-1.4.6]]</p>
</li>
</ul>
</section>

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

<figure id="ex-01">
<figcaption>
<p class="label">例1 — デフォルトの前景テキスト色と背景色の設定</p>
<p>次の例は、19.2:1のコントラストになります。</p>
</figcaption>
<p class="figlabel">CSS</p>
<pre id="ex-01-src" class="prettyprint linenums"><code>body {
color: rgb(0,0,0);
background-color: rgb(251,245,224);
}</code></pre>
<p class="figlabel">デモ</p>
<p style="padding: 0.3rem; color: rgb(0,0,0); background-color: rgb(251,245,224)">Call me Ishmael, Dummy.</p>
</figure>
</section>

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

<p>アクセシブルな読書に関するコントラストとは、前景のテキスト色とその背景色の輝度（放射される光の量）の差です。それぞれの<a href="https://www.w3.org/TR/WCAG2/#relativeluminancedef">相対的な輝度</a>より、1:1（コントラストなし）から 21:1 （最も暗い黒と最も明るい白）までのコントラスト比が決定されます。</p>

<p>出版物を視力の弱いユーザーや色覚異常のユーザーでも読めるようにするには、前景のテキスト色と背景色あるいは背景画像の間に十分なコントラストを確保する必要があります。</p>

<p>WCAGレベルAAガイドラインを満たすための最小コントラストは4.5:1ですが、デフォルトサイズが18ポイント（太字の場合は14ポイント）以上のテキストの場合は3:1に引き下げられます。このコントラスト要件は、発行元やインプリントなどのロゴや、装飾画像に含まれるテキストには適用されません。</p>

<p>WCAG AAAを満たすには、最小コントラスト要件は7:1、大きなテキストの場合は4.5:1に、コントラスト比が大きくなります。このコントラストレベルを満たす必要はありませんが、達成されるコントラスト比が大きいほど、出版物を読める読者の数は増えます。</p>

<p>異なるリーディングシステムでは予期しない方法でコンテンツがリフローされる可能性があるため、ノイズの多い（多色の）背景画像の上にテキストを重ねて、配置に頼って色のコントラストの問題を避けないでください。</p>

<p>コントラスト比の計算は、ほとんどの場合、機械で簡単かつ正確に実行でき、次のような多数の無料アプリケーションが利用できます。</p>

<ul>
<li>
<a href="../epub/validation/ace.html">Ace</a> — Aceバリデーターを使って、コントラストの問題を含むさまざまなWCAG違反についてEPUB出版物をチェックできます。Aceは出版物全体をチェックできる唯一のツールです。</li>
<li>
<a href="https://developers.google.com/web/tools/lighthouse">Lighthouse</a> — Lighthouseは、ChromeやEdgeなどのChromiumベースのブラウザに組み込まれている開発者ツールです。個々のHTMLページで、コントラストの問題などのアクセシビリティの問題をチェックできます。</li>
<li>
<a href="https://developer.paciellogroup.com/resources/contrastanalyser/">カラー コントラスト アナライザー（CCA）</a> — CCAは、手動で入力した色間のコントラスト比をテストする便利なツールです。新しい組み合わせが規格に準拠しているかどうかを判断するために出版物全体を再チェックする必要がないため、コントラストの問題を解決するプロセスを迅速化できます。</li>
</ul>

<p>これらのツールはCSSのカラー宣言の比較で問題がないかを調べるのに便利ですが、通常、背景画像に重なるテキスト（または、テキストを含む画像）に関する問題はチェックできません。リフロー可能な出版物では、サポートがしばしば不十分なため、一般的に背景画像を使用しないことが推奨されていますが、<a href="../fxl/overview.html">固定レイアウトの出版物</a>ではテキストの背景が画像の場合がよくあります。</p>

<p>テキストが画像の上に配置されている場合、または画像の一部である場合は、コントラストを手動で検証する必要があります。</p>
</section>

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

<ul>
<li>CSS —<a href="https://www.w3.org/TR/CSS22/colors.html#colors">前景色：'color'プロパティ</a>
</li>
<li>CSS —<a href="https://www.w3.org/TR/CSS22/colors.html#background">背景</a>
</li>
</ul>
</section>
</main>
</body>
</html>
22 changes: 22 additions & 0 deletions publishing/ja/css/index.html
View file
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>CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Table of contents for the CSS section.">
<script>
var page_info = {
'category': 'CSS',
'isIndex': true,
'root_id': 'css'
};
</script>
<script src="/js/init.js"></script>
</head>

<body>
<main>
</main>
</body>
</html>
Loading

0 comments on commit 6891d18

Please sign in to comment.