Understanding
- SC 1.4.1:Use of Color (Level A)
+ 解説書
+ 達成基準 1.4.1:色の使用 (レベル A)
- In Brief
+ 要約
- - Goal
- - Color is not the only way of distinguishing information.
+ - 目標
+ - 色だけが、情報を判別する唯一の方法とならないようにする。
- - What to do
- - Use information in addition to color, such as shape or text, to convey meaning.
+ - 何をすればよいか
+ - 色だけでなく、形状やテキストといった情報も用いて、意味を伝達する。
- - Why it's important
- - Not everyone sees colors or sees them the same way.
+ - なぜそれが重要か
+ - 誰もが色を見たり、又は色を同じように見たりできるわけではない。
- Intent
- The intent of this Success Criterion is to ensure that all sighted users can access
- information
- that is conveyed by color differences, that is, by the use of color where each color
- has a meaning assigned to it. If the information is conveyed through color differences
- in an image (or other non-text format), the color may not be seen by users with color
- deficiencies. In this case, providing the information conveyed with color through
- another visual means ensures users who cannot see color can still perceive the information.
+
意図
+ この達成基準の意図は、色の違いによって伝えられている情報、言い換えれば、それぞれの色には割り当てられた意味があり、その色を使うことによって伝えている情報に、目の見えるすべての利用者がアクセスできるようにすることである。画像 (又は、その他の非テキスト形式) で色の違いによって情報を伝えている場合、色覚異常の利用者はその色が分からないかもしれない。この場合、色で伝えている情報を他の視覚的な手段で提供することで、色の分からない利用者もその情報を知覚できる。
- Color is an important asset in design of Web content, enhancing its aesthetic appeal,
- its usability, and its accessibility. However, some users have difficulty perceiving
- color. People with partial sight often experience limited color vision, and many older
- users do not see color well. In addition, people using limited-color or
- monochrome displays and browsers will be unable to access information that is presented
- only in color.
+
+ 訳注
+
+ 「色覚異常」という用語は、日本医学会 医学用語辞典「色覚関連用語について」に基づいて使用している。
+
+
+
+ 色は、感覚的な訴求力、ユーザビリティ、そしてアクセシビリティを高めるため、ウェブコンテンツのデザインにおいて重要なものである。しかし、色を知覚しづらい利用者もいる。ロービジョンの人は、色覚に限界を感じることがよくあり、年配の利用者の多くも色がよく見えない。さらに、色数が制限されている、又はモノクロのディスプレイ及びブラウザを使用している人は、色だけで提示されている情報を知覚できない。
- Examples of information conveyed by color differences: “required fields are red",
- “error is shown in red", and “Mary's sales are in red, Tom's are in blue". Examples
- of indications of an action include: using color to indicate that a link will open
- in a new window or that a database entry has been updated successfully. An example
- of prompting a response would be: using highlighting on form fields to indicate that
- a required field had been left blank.
+
色の違いで伝えられている情報の例としては、「必須項目は赤字」、「赤字はエラー」、そして「赤がメアリーの売上、青がトムの売上」などが挙げられる。動作を示している例では、リンクが新しいウィンドウで開くことやデータベースの項目が正常に更新されたことを示すために色を使うことがある。また、利用者の反応を促している例には、必須項目が未入力であることを示すためにフォームの入力フィールドを反転表示することが挙げられる。
- Note
+ 注記
- This should not in any way discourage the use of color on a page, or even color coding
- if it is complemented by other visual indication.
+
この達成基準は、ページ上での色の使用、又は他の視覚的な表示によって補完される場合に色分けすることを何ら阻むものではない。
@@ -142,29 +131,13 @@ Intent
- Note
+ 注記
- If content is conveyed through the use of colors that differ not only in their hue,
- but that also have a significant difference in lightness, then this counts as an additional
- visual distinction, as long as the difference in relative luminance between the colors
- leads
- to a contrast ratio of 3:1 or greater.
- For example, a light green and a dark red differ both by color (hue)
- and by lightness, so they would pass if the contrast ratio is at least 3:1.
- Similarly, if content is distinguished by inverting an element's foreground and background
- colors,
- this would pass (again, assuming that the foreground and background colors have a
- sufficient contrast).
-
-
+ 色相だけでなく明度も大きく異なる色を用いてコンテンツを伝える場合、色間の相対輝度の差が 3:1 のコントラスト比になるのであれば、これは追加の視覚的な区別とみなす。例えば、明るい緑と暗い赤とでは、色（色相）と明度の両方が異なるため、コントラスト比が 3:1 以上あれば合格となる。同様に、要素の前景色と背景色を反転させてコンテンツを区別させる場合も（繰り返すが、前景色と背景色が十分なコントラストを持っているのであれば）合格となる。
- However, if content relies on the user's ability to accurately perceive or differentiate
- a particular color
- an additional visual indicator will be required regardless of the contrast ratio between
- those colors. For example,
- knowing whether an outline is green for valid or red for invalid.
+
しかしながら、コンテンツが特定の色を正確に知覚又は区別できる利用者の能力に依存している場合、色間のコントラスト比に関わらず、追加の視覚的な標識が必要となる。例えば、輪郭線が緑なら有効、赤なら無効とわかるようになっているような場合である。
@@ -172,17 +145,11 @@ Intent
- Note
+ 注記
- This criterion does not apply to situations where color has not been used to convey information, indicate an action,
- prompt a response or distinguish a visual element. For instance, a hyperlink which
- has been styled to appear no different than neighboring
- static text would not fail this success criterion, as there would be no color differentiation
- between the actionable hyperlink text
- and the adjacent static text. Such lack of styling differentiation could result in
- poor usability for anyone looking at the interface, regardless of disability.
+
この達成基準は、情報を伝達する、アクションを示す、反応を促す、又は視覚的要素を判別するために色が使用されていない状況には適用されない。例えば、ハイパーリンクが隣接する静的テキストと変わらないようにスタイリングされている場合、アクション可能なハイパーリンクテキストと隣接する静的テキストとの間には色の違いがないため、この達成基準の失敗とはならない。ただ、こうしたスタイリングの違いの欠如は、障害の有無にかかわらずインタフェースを見るすべての人にとって、ユーザビリティの悪化を招く恐れがある。
@@ -190,30 +157,14 @@ Intent
- Note
+ 注記
- This criterion does not directly address the needs of users with assistive technologies.
- It aims to ensure that sighted users who cannot distinguish between some colors can
- still
- understand content.
- How information is conveyed to assistive technology users is covered separately in
- other
- criteria, including (but not limited to)
- 1.1.1 Non-text Content,
- 1.3.1 Info and Relationships, and
- 4.1.2 Name, Role, Value.
-
+
この達成基準は、支援技術の利用者のニーズに直接対応するものではない。これは、一部の色を区別できない目の見える利用者が、コンテンツを理解できるようにすることを目的としている。支援技術の利用者に情報をどう伝達するかは、別の達成基準、例えば 1.1.1 非テキストコンテンツ、1.3.1 情報及び関係性、4.1.2 名前 (name)・役割 (role)・値 (value) など (ただし、これらに限定されるわけではない) で個別に扱われる。
- Conversely, even if information that is conveyed by color differences is appropriately
- conveyed
- to assistive technologies, it does not necessarily pass this criterion, as sighted
- users who cannot
- distinguish between certain color may not necessarily be using any assistive technologies.
- This
- criterion requires a visible alternative to color.
+
逆に、たとえ色の違いによって伝達される情報が適切に支援技術に伝達されたとしても、特定の色を区別できない目の見える利用者が必ずしも支援技術を使用しているとは限らないため、必ずしもこの達成基準を満たしているとはいえない。この達成基準は、色に代わる視覚的な代替を要求するものである。
@@ -221,88 +172,59 @@ Intent
- Note
+ 注記
- Most user agents provide users with a color-only cue that a link has been previously
- activated by them ("visited"). However, several technical constraints result in authors
- having very limited control over these color-only indications of visited links. The
- technical constraints are as follows:
+
ほとんどのユーザエージェントは利用者に、リンクが以前アクティブにされた (visited) ことを示す色のみの手がかりを提供する。しかし、いくつかの技術的な制約により、訪問済みリンクを色のみで表示することに対して、コンテンツ制作者が制御できることは非常に限られている。その技術的な制約は以下の通りである:
- -
- User agents constrain the exposure of a link's visited state due to privacy concerns. Author queries to user agents will indicate all links have not been visited.
-
+
- ユーザエージェントが、プライバシーの懸念から、リンクの訪問済み状態の露出を制限している。コンテンツ制作者からのユーザエージェントへのクエリは、すべてのリンクが未訪問であることを示す。
- -
- Any available information on the visited state of a link would be inaccurate since
- it is both user and browser-dependent. Even if an author could accurately get information
- on previously activated links by a certain user, the author would be constrained to
- the current browser's preserved history, and would be unable to determine if the user
- had visited the page using a different browser (or if the history was not preserved,
- either from cache clearing or use of private sessions).
-
+
- リンクの訪問済み状態に関する利用可能な情報は、利用者及びブラウザの両方に依存するため、正確ではない。仮に、コンテンツ制作者が特定の利用者によって以前アクティブにされたリンクに関する情報を正確に取得できたとしても、コンテンツ制作者は現在のブラウザに保存されている履歴に制約され、利用者が別のブラウザを使ってページを訪れたかどうか (あるいは、キャッシュクリア又はプライベートセッションの使用によって履歴が保存されていないかどうか) を判断することはできない。
- -
- Authors can only use color to modify the
:visited CSS pseudoclass style. The technology constrains any non-color styling. Due to palette
- limitations, an author cannot use color alone to achieve 3:1 contrast between link
- and non-link text as well as between visited and unvisited links while also achieving
- 4.5:1 contrast for all link and non-link text.
-
+ - コンテンツ制作者は、CSS 擬似クラス
:visited のスタイルを変更するのに、色のみを使うことができる。この技術は、色以外のあらゆるスタイリングを制約する。パレットの制限によって、コンテンツ制作者は色のみを使用して、リンクと非リンクのテキストの間のみならず訪問済みリンクと非訪問済みリンクの間のコントラストを 3:1 にしつつ、同時にすべてのリンク及び非リンクのテキストのコントラストを 4.5:1 にすることはできない。
- -
- Authors also cannot set the visited state of links. The anchor element does not include
- a "visited" attribute; therefore the author has no ability to alter the state through
- an attribute setting. As such, authors cannot achieve 1.3.1 Info and Relationships or
- 4.1.2 Name, Role, Value in regard to visited links.
+
- コンテンツ制作者はまた、リンクの訪問済み状態を設定することもできない。アンカー要素には visited 属性がなく、したがって属性設定を通じて状態を切り替えることができない。そのため、コンテンツ制作者は訪問済みリンクに関して 1.3.1 情報及び関係性 又は 4.1.2 名前 (name)・役割 (role)・値 (value) を達成することができない。
- For these reasons, setting or conveying a link's visited status is not an author responsibility.
- Where color alone distinguishes between visited and unvisited links, it does not result
- in a failure of this Success Criterion, even where the contrast between the two link
- colors is below 3:1. Note that authors must continue to ensure that all text links
- meet contrast minimums against the page background (SC 1.4.3).
+
これらの理由から、リンクの訪問済み状態の設定又は伝達は、コンテンツ制作者の責任範囲ではない。色のみで訪問済みリンクと未訪問リンクを判別する場合、二つのリンク色のコントラストが 3:1 以下であっても、この達成基準の失敗とはみなされない。コンテンツ制作者は、すべてのテキストリンクがページの背景に対して最低限のコントラスト (達成基準 1.4.3) を満たすことを引き続き保証しなければならないことに注意されたい。
+
- Benefits
+ 利点
- - Users with partial sight often experience limited color vision.
+ - ロービジョンの利用者が、色覚の限界を感じることがよくある。
- - Some older users may not be able to see color well.
+ - 年配の利用者は、色がよく見えないかもしれない。
- - Users who have color-blindness benefit when information conveyed by color is available
- in other visual ways.
-
-
+ - 色覚異常の利用者が、色で伝えられている情報をその他の視覚的な手段で知覚できるようになる。
- - People using limited color monochrome displays may be unable to access
- color-dependent information.
+
- 色数の制限されたモノクロのディスプレイを使用している人は、色に依存している情報を利用できないことがある。
- - Users who have problems distinguishing between colors can look or listen for text
- cues.
+
- 色の識別に問題を抱える利用者が、テキストの手がかりを見たり、聞いたりすることができる。
@@ -310,34 +232,25 @@ Benefits
- Examples
+ 事例
- - A form that uses color and text to indicate required fields
+ - 必須項目を示すために色とテキストを用いている入力フォーム
- - A form contains both required and optional fields. Instructions at the top of the
- form explain that required fields are labeled with red text and also with an icon.
- Users who cannot perceive the difference between the optional field labels and the
- red labels for the required fields will still be able to see the icon next to the
- red labels.
+
- ある入力フォームには、必須項目と任意項目の両方がある。入力フォームの上部にある説明文では、必須項目は赤字とアイコンで説明されている。任意項目のラベルと必須フィールドの赤いラベルの違いを知覚できない利用者でも、赤いラベルに隣接するアイコンで視認することができる。
- - An examination
+ - 試験
- - Students view an SVG image of a chemical compound and identify the chemical elements
- present based both on the colors used, as well as numbers next to each
- element. A legend shows the color and number for each type of element. Sighted users
- who
- cannot perceive all the color differences can still understand the image by relying
- on
- the numbers.
+
- 学生は、化合物の SVG 画像を見て、図に使用されている色及び各元素に隣接する番号の両方に基づいて、存在する化学元素を識別する。凡例によって、元素の種類ごとの色及び番号が示されている。目が見えてもすべての色の違いを知覚できない利用者でも、番号を頼りに画像を理解することができる。
+
- Related Resources
- Resources are for information purposes only, no endorsement implied.
+ 関連リソース
+ リソースは、情報提供のみを目的としており、推奨を意味するものではない。
@@ -400,154 +313,89 @@ Related Resources
- Techniques
- Each numbered item in this section represents a technique or combination of techniques
- that the WCAG Working Group deems sufficient for meeting this Success Criterion. However,
- it is not necessary to use these particular techniques. For information on using other
- techniques, see Understanding Techniques for WCAG Success Criteria, particularly the "Other Techniques" section.
+
テクニック
+ この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断するテクニック、又は複数のテクニックの組み合わせを表している。しかしながら、必ずしもこれらのテクニックを用いる必要はない。その他のテクニックについての詳細は、WCAG 達成基準のテクニックを理解するの「その他のテクニック」を参照のこと。
- Sufficient Techniques
- Select the situation below that matches your content. Each situation includes techniques
- or combinations of techniques that are known and documented to be sufficient for that
- situation.
+
十分なテクニック
+ そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付のテクニック (又は、テクニックの組み合わせ) がある。
- Situation A: If the color of particular words, backgrounds, or other content is used
- to indicate information:
+ 状況 A: 特定の語句、背景、又は他のコンテンツの色を用いて情報を示している場合:
-
-
- -
-
- G14: Ensuring that information conveyed by color differences is also available in text
-
-
-
-
-
- -
-
- G205: Including a text cue for colored form control labels
-
-
-
-
-
- -
-
- G182: Ensuring that additional visual cues are available when text color differences are
- used to convey information
-
-
-
-
-
- -
-
- G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual
- cues on hover for links or controls where color alone is used to identify them
-
-
-
-
-
-
+
+
+
G14: 色の違いで伝えている情報をテキストでも入手可能にする
+
+
+ G205: 色のついたフォームコントロールのラベルに対して、テキストによる手がかりを含める
+
+
+ G182: 文字色の違いが情報を伝えるために使用される場合に、利用可能な追加の視覚的な手がかりを確保する
+
+
+ G183: 色が単独でリンク又はコントロールを特定する場所で、周囲のテキストと一緒に 3:1 のコントラスト比を使用し、そのリンク又はコントロールのフォーカスに追加の視覚的な手がかりを提供する
+
+
+
- Situation B: If color is used within an image to convey information:
+ 状況 B: 情報を伝える画像の中で色を用いている場合:
-
-
- -
-
- G111: Using color and pattern
-
-
-
-
-
- -
-
- G14: Ensuring that information conveyed by color differences is also available in text
-
-
-
-
-
+
+
+ - G111: 色とパターンを併用する
+
+
+ - G14: 色の違いで伝えている情報をテキストでも入手可能にする
+
+
- Advisory Techniques
- Although not required for conformance, the following additional techniques should
- be considered in order to make content more accessible. Not all techniques can be
- used or would be effective in all situations.
+
参考テクニック
+ 適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加のテクニックを検討することが望ましい。ただし、すべての状況において、すべてのテクニックが使用可能、又は効果的であるとは限らない。
- Failures
- The following are common mistakes that are considered failures of this Success Criterion
- by the WCAG Working Group.
+
失敗例
+ 以下に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。
-
-
- -
-
- F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that
- does not include information that is conveyed by color differences in the image
-
-
-
-
-
- -
-
- F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident
- without color vision
-
-
-
-
-
- -
-
- F81: Failure of Success Criterion 1.4.1 due to identifying required or error fields using
- color differences only
-
-
-
-
-
-
+
+
+ F13: 達成基準 1.1.1 及び達成基準 1.4.1 の失敗例 － 画像の色の違いで伝られる情報が含まれないテキストによる代替を持っている
+
+
+ F73: 達成基準 1.4.1 の失敗例 － 色覚なしで視覚的にはっきりと分からないリンクを作成する
+
+
+ F81: 達成基準 1.4.1 の失敗例 － 色の違いだけで、必須又はエラーフィールドを特定している
+
+
+
In Brief
+要約
-
-
- Goal -
- Color is not the only way of distinguishing information. +
- 目標 +
- 色だけが、情報を判別する唯一の方法とならないようにする。 -
- What to do -
- Use information in addition to color, such as shape or text, to convey meaning. +
- 何をすればよいか +
- 色だけでなく、形状やテキストといった情報も用いて、意味を伝達する。 -
- Why it's important -
- Not everyone sees colors or sees them the same way. +
- なぜそれが重要か +
- 誰もが色を見たり、又は色を同じように見たりできるわけではない。
Intent
-The intent of this Success Criterion is to ensure that all sighted users can access - information - that is conveyed by color differences, that is, by the use of color where each color - has a meaning assigned to it. If the information is conveyed through color differences - in an image (or other non-text format), the color may not be seen by users with color - deficiencies. In this case, providing the information conveyed with color through - another visual means ensures users who cannot see color can still perceive the information. +
意図
+この達成基準の意図は、色の違いによって伝えられている情報、言い換えれば、それぞれの色には割り当てられた意味があり、その色を使うことによって伝えている情報に、目の見えるすべての利用者がアクセスできるようにすることである。画像 (又は、その他の非テキスト形式) で色の違いによって情報を伝えている場合、色覚異常の利用者はその色が分からないかもしれない。この場合、色で伝えている情報を他の視覚的な手段で提供することで、色の分からない利用者もその情報を知覚できる。
-Color is an important asset in design of Web content, enhancing its aesthetic appeal, - its usability, and its accessibility. However, some users have difficulty perceiving - color. People with partial sight often experience limited color vision, and many older - users do not see color well. In addition, people using limited-color or - monochrome displays and browsers will be unable to access information that is presented - only in color. +
訳注
+「色覚異常」という用語は、日本医学会 医学用語辞典「色覚関連用語について」に基づいて使用している。
+色は、感覚的な訴求力、ユーザビリティ、そしてアクセシビリティを高めるため、ウェブコンテンツのデザインにおいて重要なものである。しかし、色を知覚しづらい利用者もいる。ロービジョンの人は、色覚に限界を感じることがよくあり、年配の利用者の多くも色がよく見えない。さらに、色数が制限されている、又はモノクロのディスプレイ及びブラウザを使用している人は、色だけで提示されている情報を知覚できない。
-Examples of information conveyed by color differences: “required fields are red", - “error is shown in red", and “Mary's sales are in red, Tom's are in blue". Examples - of indications of an action include: using color to indicate that a link will open - in a new window or that a database entry has been updated successfully. An example - of prompting a response would be: using highlighting on form fields to indicate that - a required field had been left blank. +
色の違いで伝えられている情報の例としては、「必須項目は赤字」、「赤字はエラー」、そして「赤がメアリーの売上、青がトムの売上」などが挙げられる。動作を示している例では、リンクが新しいウィンドウで開くことやデータベースの項目が正常に更新されたことを示すために色を使うことがある。また、利用者の反応を促している例には、必須項目が未入力であることを示すためにフォームの入力フィールドを反転表示することが挙げられる。
Note
+注記
This should not in any way discourage the use of color on a page, or even color coding - if it is complemented by other visual indication. +
この達成基準は、ページ上での色の使用、又は他の視覚的な表示によって補完される場合に色分けすることを何ら阻むものではない。
@@ -142,29 +131,13 @@Intent
Note
+注記
If content is conveyed through the use of colors that differ not only in their hue, - but that also have a significant difference in lightness, then this counts as an additional - visual distinction, as long as the difference in relative luminance between the colors - leads - to a contrast ratio of 3:1 or greater. - For example, a light green and a dark red differ both by color (hue) - and by lightness, so they would pass if the contrast ratio is at least 3:1. - Similarly, if content is distinguished by inverting an element's foreground and background - colors, - this would pass (again, assuming that the foreground and background colors have a - sufficient contrast). - -
+色相だけでなく明度も大きく異なる色を用いてコンテンツを伝える場合、色間の相対輝度の差が 3:1 のコントラスト比になるのであれば、これは追加の視覚的な区別とみなす。例えば、明るい緑と暗い赤とでは、色（色相）と明度の両方が異なるため、コントラスト比が 3:1 以上あれば合格となる。同様に、要素の前景色と背景色を反転させてコンテンツを区別させる場合も（繰り返すが、前景色と背景色が十分なコントラストを持っているのであれば）合格となる。
-However, if content relies on the user's ability to accurately perceive or differentiate - a particular color - an additional visual indicator will be required regardless of the contrast ratio between - those colors. For example, - knowing whether an outline is green for valid or red for invalid. +
しかしながら、コンテンツが特定の色を正確に知覚又は区別できる利用者の能力に依存している場合、色間のコントラスト比に関わらず、追加の視覚的な標識が必要となる。例えば、輪郭線が緑なら有効、赤なら無効とわかるようになっているような場合である。
@@ -172,17 +145,11 @@Intent
Note
+注記
This criterion does not apply to situations where color has not been used to convey information, indicate an action, - prompt a response or distinguish a visual element. For instance, a hyperlink which - has been styled to appear no different than neighboring - static text would not fail this success criterion, as there would be no color differentiation - between the actionable hyperlink text - and the adjacent static text. Such lack of styling differentiation could result in - poor usability for anyone looking at the interface, regardless of disability. +
この達成基準は、情報を伝達する、アクションを示す、反応を促す、又は視覚的要素を判別するために色が使用されていない状況には適用されない。例えば、ハイパーリンクが隣接する静的テキストと変わらないようにスタイリングされている場合、アクション可能なハイパーリンクテキストと隣接する静的テキストとの間には色の違いがないため、この達成基準の失敗とはならない。ただ、こうしたスタイリングの違いの欠如は、障害の有無にかかわらずインタフェースを見るすべての人にとって、ユーザビリティの悪化を招く恐れがある。
@@ -190,30 +157,14 @@Intent
Note
+注記
This criterion does not directly address the needs of users with assistive technologies. - It aims to ensure that sighted users who cannot distinguish between some colors can - still - understand content. - How information is conveyed to assistive technology users is covered separately in - other - criteria, including (but not limited to) - 1.1.1 Non-text Content, - 1.3.1 Info and Relationships, and - 4.1.2 Name, Role, Value. - +
この達成基準は、支援技術の利用者のニーズに直接対応するものではない。これは、一部の色を区別できない目の見える利用者が、コンテンツを理解できるようにすることを目的としている。支援技術の利用者に情報をどう伝達するかは、別の達成基準、例えば 1.1.1 非テキストコンテンツ、1.3.1 情報及び関係性、4.1.2 名前 (name)・役割 (role)・値 (value) など (ただし、これらに限定されるわけではない) で個別に扱われる。
-Conversely, even if information that is conveyed by color differences is appropriately - conveyed - to assistive technologies, it does not necessarily pass this criterion, as sighted - users who cannot - distinguish between certain color may not necessarily be using any assistive technologies. - This - criterion requires a visible alternative to color. +
逆に、たとえ色の違いによって伝達される情報が適切に支援技術に伝達されたとしても、特定の色を区別できない目の見える利用者が必ずしも支援技術を使用しているとは限らないため、必ずしもこの達成基準を満たしているとはいえない。この達成基準は、色に代わる視覚的な代替を要求するものである。
@@ -221,88 +172,59 @@Intent
Note
+注記
Most user agents provide users with a color-only cue that a link has been previously - activated by them ("visited"). However, several technical constraints result in authors - having very limited control over these color-only indications of visited links. The - technical constraints are as follows: +
ほとんどのユーザエージェントは利用者に、リンクが以前アクティブにされた (visited) ことを示す色のみの手がかりを提供する。しかし、いくつかの技術的な制約により、訪問済みリンクを色のみで表示することに対して、コンテンツ制作者が制御できることは非常に限られている。その技術的な制約は以下の通りである:
-
-
- - User agents constrain the exposure of a link's visited state due to privacy concerns. Author queries to user agents will indicate all links have not been visited. - +
- ユーザエージェントが、プライバシーの懸念から、リンクの訪問済み状態の露出を制限している。コンテンツ制作者からのユーザエージェントへのクエリは、すべてのリンクが未訪問であることを示す。 -
- - Any available information on the visited state of a link would be inaccurate since - it is both user and browser-dependent. Even if an author could accurately get information - on previously activated links by a certain user, the author would be constrained to - the current browser's preserved history, and would be unable to determine if the user - had visited the page using a different browser (or if the history was not preserved, - either from cache clearing or use of private sessions). - +
- リンクの訪問済み状態に関する利用可能な情報は、利用者及びブラウザの両方に依存するため、正確ではない。仮に、コンテンツ制作者が特定の利用者によって以前アクティブにされたリンクに関する情報を正確に取得できたとしても、コンテンツ制作者は現在のブラウザに保存されている履歴に制約され、利用者が別のブラウザを使ってページを訪れたかどうか (あるいは、キャッシュクリア又はプライベートセッションの使用によって履歴が保存されていないかどうか) を判断することはできない。 -
-
- Authors can only use color to modify the
:visitedCSS pseudoclass style. The technology constrains any non-color styling. Due to palette - limitations, an author cannot use color alone to achieve 3:1 contrast between link - and non-link text as well as between visited and unvisited links while also achieving - 4.5:1 contrast for all link and non-link text. - + - コンテンツ制作者は、CSS 擬似クラス
:visitedのスタイルを変更するのに、色のみを使うことができる。この技術は、色以外のあらゆるスタイリングを制約する。パレットの制限によって、コンテンツ制作者は色のみを使用して、リンクと非リンクのテキストの間のみならず訪問済みリンクと非訪問済みリンクの間のコントラストを 3:1 にしつつ、同時にすべてのリンク及び非リンクのテキストのコントラストを 4.5:1 にすることはできない。
- - - Authors also cannot set the visited state of links. The anchor element does not include - a "visited" attribute; therefore the author has no ability to alter the state through - an attribute setting. As such, authors cannot achieve 1.3.1 Info and Relationships or - 4.1.2 Name, Role, Value in regard to visited links. +
- コンテンツ制作者はまた、リンクの訪問済み状態を設定することもできない。アンカー要素には visited 属性がなく、したがって属性設定を通じて状態を切り替えることができない。そのため、コンテンツ制作者は訪問済みリンクに関して 1.3.1 情報及び関係性 又は 4.1.2 名前 (name)・役割 (role)・値 (value) を達成することができない。
For these reasons, setting or conveying a link's visited status is not an author responsibility. - Where color alone distinguishes between visited and unvisited links, it does not result - in a failure of this Success Criterion, even where the contrast between the two link - colors is below 3:1. Note that authors must continue to ensure that all text links - meet contrast minimums against the page background (SC 1.4.3). +
これらの理由から、リンクの訪問済み状態の設定又は伝達は、コンテンツ制作者の責任範囲ではない。色のみで訪問済みリンクと未訪問リンクを判別する場合、二つのリンク色のコントラストが 3:1 以下であっても、この達成基準の失敗とはみなされない。コンテンツ制作者は、すべてのテキストリンクがページの背景に対して最低限のコントラスト (達成基準 1.4.3) を満たすことを引き続き保証しなければならないことに注意されたい。 +
Benefits
+利点
-
-
- Users with partial sight often experience limited color vision. +
- ロービジョンの利用者が、色覚の限界を感じることがよくある。 -
- Some older users may not be able to see color well. +
- 年配の利用者は、色がよく見えないかもしれない。 -
- Users who have color-blindness benefit when information conveyed by color is available - in other visual ways. - - +
- 色覚異常の利用者が、色で伝えられている情報をその他の視覚的な手段で知覚できるようになる。 -
- People using limited color monochrome displays may be unable to access - color-dependent information. +
- 色数の制限されたモノクロのディスプレイを使用している人は、色に依存している情報を利用できないことがある。 -
- Users who have problems distinguishing between colors can look or listen for text - cues. +
- 色の識別に問題を抱える利用者が、テキストの手がかりを見たり、聞いたりすることができる。 @@ -310,34 +232,25 @@
Benefits
Examples
+事例
-
-
- A form that uses color and text to indicate required fields +
- 必須項目を示すために色とテキストを用いている入力フォーム -
- A form contains both required and optional fields. Instructions at the top of the
- form explain that required fields are labeled with red text and also with an icon.
- Users who cannot perceive the difference between the optional field labels and the
- red labels for the required fields will still be able to see the icon next to the
- red labels.
+
- ある入力フォームには、必須項目と任意項目の両方がある。入力フォームの上部にある説明文では、必須項目は赤字とアイコンで説明されている。任意項目のラベルと必須フィールドの赤いラベルの違いを知覚できない利用者でも、赤いラベルに隣接するアイコンで視認することができる。
- - An examination +
- 試験 -
- Students view an SVG image of a chemical compound and identify the chemical elements
- present based both on the colors used, as well as numbers next to each
- element. A legend shows the color and number for each type of element. Sighted users
- who
- cannot perceive all the color differences can still understand the image by relying
- on
- the numbers.
+
- 学生は、化合物の SVG 画像を見て、図に使用されている色及び各元素に隣接する番号の両方に基づいて、存在する化学元素を識別する。凡例によって、元素の種類ごとの色及び番号が示されている。目が見えてもすべての色の違いを知覚できない利用者でも、番号を頼りに画像を理解することができる。 +
Related Resources
-Resources are for information purposes only, no endorsement implied.
+関連リソース
+リソースは、情報提供のみを目的としており、推奨を意味するものではない。
-
@@ -400,154 +313,89 @@
Related Resources
Techniques
-Each numbered item in this section represents a technique or combination of techniques - that the WCAG Working Group deems sufficient for meeting this Success Criterion. However, - it is not necessary to use these particular techniques. For information on using other - techniques, see Understanding Techniques for WCAG Success Criteria, particularly the "Other Techniques" section. +
テクニック
+この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断するテクニック、又は複数のテクニックの組み合わせを表している。しかしながら、必ずしもこれらのテクニックを用いる必要はない。その他のテクニックについての詳細は、WCAG 達成基準のテクニックを理解するの「その他のテクニック」を参照のこと。
Sufficient Techniques
-Select the situation below that matches your content. Each situation includes techniques - or combinations of techniques that are known and documented to be sufficient for that - situation. +
十分なテクニック
+そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付のテクニック (又は、テクニックの組み合わせ) がある。
Situation A: If the color of particular words, backgrounds, or other content is used
- to indicate information:
+ 状況 A: 特定の語句、背景、又は他のコンテンツの色を用いて情報を示している場合:
-
-
- -
-
- G14: Ensuring that information conveyed by color differences is also available in text
-
-
-
-
-
- -
-
- G205: Including a text cue for colored form control labels
-
-
-
-
-
- -
-
- G182: Ensuring that additional visual cues are available when text color differences are
- used to convey information
-
-
-
-
-
- -
-
- G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual
- cues on hover for links or controls where color alone is used to identify them
-
-
-
-
-
-
+
+
+
Situation B: If color is used within an image to convey information:
+状況 B: 情報を伝える画像の中で色を用いている場合:
-
-
-
-
- - - G111: Using color and pattern - - - - - -
- - - G14: Ensuring that information conveyed by color differences is also available in text - - - - - + + +
- G111: 色とパターンを併用する + + +
- G14: 色の違いで伝えている情報をテキストでも入手可能にする + +
Advisory Techniques
-Although not required for conformance, the following additional techniques should - be considered in order to make content more accessible. Not all techniques can be - used or would be effective in all situations. +
参考テクニック
+適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加のテクニックを検討することが望ましい。ただし、すべての状況において、すべてのテクニックが使用可能、又は効果的であるとは限らない。
Failures
-The following are common mistakes that are considered failures of this Success Criterion - by the WCAG Working Group. +
失敗例
+以下に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。
-
-
-
-
- - - F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that - does not include information that is conveyed by color differences in the image - - - - - -
- - - F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident - without color vision - - - - - -
- - - F81: Failure of Success Criterion 1.4.1 due to identifying required or error fields using - color differences only - - - - - -