Applicability
-Technologies that support Accessible Rich Internet Applications (WAI-ARIA). +
適用 (対象)
+Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。
-This technique relates to:
+これは、次の達成基準に関連する達成方法である:
-
-
- Success Criterion 2.4.4: Link Purpose (In Context) (Sufficient as a way to meet an unwritten technique) +
- 達成基準 2.4.4: リンクの目的 (コンテキスト内) (書かれていない達成方法を満たす慣習的な達成方法) -
- Success Criterion 2.4.9: Link Purpose (Link Only) (Sufficient) +
- 達成基準 2.4.9: リンクの目的 (リンクのみ) (十分な達成方法)
Description
-The objective of this technique is to describe the purpose of a link using the aria-label attribute. The aria-label 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 aria-labelledby attribute should be used instead of aria-label. 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 aria-label value will show in the list of links instead of the actual link text.
+
解説
+この達成方法の目的は、aria-label 属性を使用して、リンクの目的を説明することである。オブジェクトを説明する可視要素がページ上に存在しない場合、aria-label 属性は、リンクのようなオブジェクトに説明的なテキストラベルを配置する方法を提供する。説明的な要素がページ上で可視である場合、aria-label ではなく、aria-labelledby 属性が使用されるべきである。説明的なテキストラベルを提供することで、利用者は、そのリンクと、ウェブページ内にあるリンク先の異なるリンクとを区別できるようになり、リンクをたどるかどうかを判断する助けとなる。一部の支援技術において、aria-label の値は、実際のリンクテキストの代わりにリンクの一覧に表示される。
Per the Accessible Name and Description Computation and the HTML to Platform Accessibility APIs Implementation Guide, the aria-label 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 aria-label with the text used within the link. This will allow consistent communication between
- users.
+
Accessible Name and Description Computation 及び HTML to Platform Accessibility APIs Implementation Guide にあるように、aria-label テキストは、リンク内で与えられたテキストを上書きする。このように与えられたテキストは、支援技術によってリンクテキストの代わりに使用される。このため、aria-label で使用されるテキストは、リンク内で使用されているテキストから始めることが推奨されている。これは、利用者間で一貫性のあるコミュニケーションを可能にする。
Examples
+事例
Example 1: Describing the purpose of a link in HTML using aria-label.
-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. +
事例 1: aria-label を使用して、HTML 内のリンクの目的を説明する
+場合によっては、デザイナーが、ページ上のリンクの見た目をコンパクトにするために、"read more" のような短く、繰り返されるリンクテキストを選択することがある。こういった状況は、より単純で非説明的な "read more" というページ上のテキストを、より説明的なリンクのラベルで置き換えることができるという点で、aria-label の望ましいユースケースとなる。単語 "read more" は、利用者間の一貫性のあるコミュニケーションを可能にするために (元のアンカーテキスト "[Read more...]" を置き換える) aria-label の中にも繰り返される。
<h4>Neighborhood News</h4> <p>Seminole tax hike: Seminole city managers are proposing a 75% increase in property taxes for the coming fiscal year. @@ -87,8 +71,8 @@Example 1: Describing the purpose of a link in HTML using aria-label.
</p>
Resources
-Resources are for information purposes only, no endorsement implied.
+参考リソース
+この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
-
@@ -105,43 +89,43 @@
Resources
Tests
+検証
Procedure
+手順
-For link elements that use aria-label:
+
aria-label 属性を使用するリンク要素に対して:
-
-
- Check that the value of the
aria-labelattribute properly describes the purpose of the link element. + aria-label属性の値が link 要素の目的を正確に説明していることを確認する。
Expected Results
+期待される結果
-
-
- #1 is true. +
- 1. の結果が真である。