Skip to content

Commit

Permalink
ARIA8にて、WCAG 2.0の訳を反映 #685
Browse files Browse the repository at this point in the history
  • Loading branch information
@momdo
momdo authored May 10, 2021
2 parents 809dd87 + 238da63 commit a907ec6
Showing 1 changed file with 41 additions and 57 deletions.
98 changes: 41 additions & 57 deletions techniques/aria/ARIA8.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,79 +2,63 @@
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ARIA8: Using aria-label for link purpose</title>
<title>ARIA8: リンクの目的を示すために aria-label を使用する</title>
<link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/2016/base" />
<link rel="stylesheet" type="text/css" href="../techniques.css" />
<link rel="stylesheet" type="text/css" href="../slicenav.css" />
</head>
<body>
<nav>
<ul id="navigation">
<li><a href="../#techniques" title="Table of Contents">Contents</a></li>
<li><a href="../#introduction" title="Introduction to Techniques">Intro</a></li>
<li><a href="ARIA7">Previous Technique: ARIA7</a></li>
<li><a href="ARIA9">Next Technique: ARIA9</a></li>
<li><a href="../#techniques" title="Table of Contents">目次</a></li>
<li><a href="../#introduction" title="Introduction to Techniques">イントロダクション</a></li>
<li><a href="ARIA7">前の達成方法: ARIA7</a></li>
<li><a href="ARIA9">次の達成方法: ARIA9</a></li>
</ul>
</nav>
<nav class="navtoc">
<p>On this page:</p>
<p>このページのコンテンツ:</p>
<ul id="navbar">
<li><a href="#important-information">Important Information about Techniques</a></li>
<li><a href="#applicability">Applicability</a></li>
<li><a href="#description">Description</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#resources">Related Resources</a></li>
<li><a href="#related">Related Techniques</a></li>
<li><a href="#tests">Tests</a></li>
<li><a href="#important-information">達成方法に関する重要な情報</a></li>
<li><a href="#applicability">適用 (対象)</a></li>
<li><a href="#description">解説</a></li>
<li><a href="#examples">事例</a></li>
<li><a href="#resources">参考リソース</a></li>
<li><a href="#related">関連する達成方法</a></li>
<li><a href="#tests">検証</a></li>
</ul>
</nav>
<h1>Using aria-label for link purpose</h1>
<h1>リンクの目的を示すために aria-label を使用する</h1>
<section id="important-information">
<h2>Important Information about Techniques</h2>
<p>See <a href="https://waic.jp/docs/WCAG21/Understanding/understanding-techniques">Understanding Techniques for WCAG Success Criteria</a> for important information about the usage of these informative techniques and how
they relate to the normative WCAG 2.1 success criteria. The Applicability section
explains the scope of the technique, and the presence of techniques for a specific
technology does not imply that the technology can be used in all situations to create
content that meets WCAG 2.1.
<h2>達成方法に関する重要な情報</h2>
<p>この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、<a href="https://waic.jp/docs/WCAG21/Understanding/understanding-techniques">WCAG 達成基準の達成方法を理解する</a>を参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。
</p>
</section>
<main>
<section id="applicability">
<h2>Applicability</h2>
<p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>.
<h2>適用 (対象)</h2>
<p><a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>をサポートするウェブコンテンツ技術。
</p>
<p>This technique relates to:</p>
<p>これは、次の達成基準に関連する達成方法である:</p>
<ul>
<li><a href="https://waic.jp/docs/WCAG21/Understanding/link-purpose-in-context">Success Criterion 2.4.4: Link Purpose (In Context)</a> (Sufficient as a way to meet an unwritten technique)
<li><a href="https://waic.jp/docs/WCAG21/Understanding/link-purpose-in-context">達成基準 2.4.4: リンクの目的 (コンテキスト内)</a> (書かれていない達成方法を満たす慣習的な達成方法)
</li>
<li><a href="https://waic.jp/docs/WCAG21/Understanding/link-purpose-link-only">Success Criterion 2.4.9: Link Purpose (Link Only)</a> (Sufficient)
<li><a href="https://waic.jp/docs/WCAG21/Understanding/link-purpose-link-only">達成基準 2.4.9: リンクの目的 (リンクのみ)</a> (十分な達成方法)
</li>
</ul>
</section>
<section id="description">
<h2>Description</h2>
<p>The objective of this technique is to describe the purpose of a link using the <code class="att">aria-label</code> attribute. The <code class="att">aria-label</code> attribute provides a way to place a descriptive text label on an object, such as
a link, when there are no elements visible on the page that describe the object. If
descriptive elements are visible on the page, the <code class="att">aria-labelledby</code> attribute should be used instead of <code class="att">aria-label</code>. Providing a descriptive text label lets a user distinguish the link from links in
the Web page that lead to other destinations and helps the user determine whether
to follow the link. In some assistive technologies the <code class="att">aria-label</code> value will show in the list of links instead of the actual link text.
<h2>解説</h2>
<p>この達成方法の目的は、<code class="att">aria-label</code> 属性を使用して、リンクの目的を説明することである。オブジェクトを説明する可視要素がページ上に存在しない場合、<code class="att">aria-label</code> 属性は、リンクのようなオブジェクトに説明的なテキストラベルを配置する方法を提供する。説明的な要素がページ上で可視である場合、<code class="att">aria-label</code> ではなく、<code class="att">aria-labelledby</code> 属性が使用されるべきである。説明的なテキストラベルを提供することで、利用者は、そのリンクと、ウェブページ内にあるリンク先の異なるリンクとを区別できるようになり、リンクをたどるかどうかを判断する助けとなる。一部の支援技術において、<code class="att">aria-label</code> の値は、実際のリンクテキストの代わりにリンクの一覧に表示される。
</p>
<p>Per the <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a> and the <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide</a>, the <code class="att">aria-label</code> text will override the text supplied within the link. As such the text supplied will
be used instead of the link text by AT. Due to this it is recommended to start the
text used in <code class="att">aria-label</code> with the text used within the link. This will allow consistent communication between
users.
<p><a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a> 及び <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide</a> にあるように、<code class="att">aria-label</code> テキストは、リンク内で与えられたテキストを上書きする。このように与えられたテキストは、支援技術によってリンクテキストの代わりに使用される。このため、<code class="att">aria-label</code> で使用されるテキストは、リンク内で使用されているテキストから始めることが推奨されている。これは、利用者間で一貫性のあるコミュニケーションを可能にする。
</p>
</section>
<section id="examples">
<h2>Examples</h2>
<h2>事例</h2>
<section class="example" id="example-1-describing-the-purpose-of-a-link-in-html-using-aria-label.">
<h3>Example 1: Describing the purpose of a link in HTML using aria-label.</h3>
<p>In some situations, designers may choose to lessen the visual appearance of links
on a page by using shorter, repeated link text such as "read more". These situations
provide a good use case for aria-label in that the simpler, non-descriptive "read
more" text on the page can be replaced with a more descriptive label of the link.
The words 'read more' are repeated in the aria-label (which replaces the original
anchor text of "[Read more...]") to allow consistent communication between users.
<h3>事例 1: aria-label を使用して、HTML 内のリンクの目的を説明する</h3>
<p>場合によっては、デザイナーが、ページ上のリンクの見た目をコンパクトにするために、"read more" のような短く、繰り返されるリンクテキストを選択することがある。こういった状況は、より単純で非説明的な "read more" というページ上のテキストを、より説明的なリンクのラベルで置き換えることができるという点で、aria-label の望ましいユースケースとなる。単語 "read more" は、利用者間の一貫性のあるコミュニケーションを可能にするために (元のアンカーテキスト "[Read more...]" を置き換える) aria-label の中にも繰り返される。
</p><pre xml:space="preserve"> &lt;h4&gt;Neighborhood News&lt;/h4&gt;
&lt;p&gt;Seminole tax hike: Seminole city managers are proposing a 75% increase in
property taxes for the coming fiscal year.
Expand All @@ -87,8 +71,8 @@ <h3>Example 1: Describing the purpose of a link in HTML using aria-label.</h3>
&lt;/p&gt;</pre></section>
</section>
<section id="resources">
<h2>Resources</h2>
<p>Resources are for information purposes only, no endorsement implied.</p>
<h2>参考リソース</h2>
<p>この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。</p>
<ul>

<li>
Expand All @@ -105,43 +89,43 @@ <h2>Resources</h2>
</ul>
</section>
<section id="related">
<h2>Related Techniques</h2>
<h2>関連する達成方法</h2>
<ul>

<li><a href="ARIA6">ARIA6: Using aria-label to provide labels for objects</a></li>
<li><a href="ARIA6">ARIA6: オブジェクトのラベルを提供するために aria-label を使用する</a></li>

<li><a href="ARIA14">ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used</a></li>
<li><a href="ARIA14">ARIA14: 可視ラベルが使用できない場所で不可視ラベルを提供するために、aria-label を使用する</a></li>

<li><a href="ARIA7">ARIA7: Using aria-labelledby for link purpose</a></li>
<li><a href="ARIA7">ARIA7: リンクの目的を示すために aria-labelledby を使用する</a></li>

<li><a href="../general/G91">G91: Providing link text that describes the purpose of a link</a></li>
<li><a href="../general/G91">G91: リンクの目的を説明したリンクテキストを提供する</a></li>

<li><a href="../html/H30">H30: Providing link text that describes the purpose of a link for anchor elements</a></li>
<li><a href="../html/H30">H30: a 要素のリンクの目的を説明するリンクテキストを提供する</a></li>

</ul>
</section>
<section id="tests">
<h2>Tests</h2>
<h2>検証</h2>
<section class="procedure" id="procedure">
<h3>Procedure</h3>
<h3>手順</h3>

<p>For link elements that use <code class="att">aria-label</code>:
<p><code class="att">aria-label</code> 属性を使用するリンク要素に対して:
</p>

<ol>

<li>Check that the value of the <code class="att">aria-label</code> attribute properly describes the purpose of the link element.
<li><code class="att">aria-label</code> 属性の値が link 要素の目的を正確に説明していることを確認する。
</li>

</ol>

</section>
<section class="results" id="expected-results">
<h3>Expected Results</h3>
<h3>期待される結果</h3>

<ul>

<li>#1 is true.</li>
<li>1. の結果が真である。</li>

</ul>

Expand Down

0 comments on commit a907ec6

Please sign in to comment.