The purpose of each link must be determined

[ecureuill]

This is a "not-end" requirement. What I want to mean is that this should be considered for any new page you create that Student can access. Also should correct the old pages.

I will use the label Feature Design Notes to this cases

---

WCAG: 2.4.4 e 2.4.9

Scenario: Link only

• [ ] [BEST - only link] Providing link text that describes the purpose of a link <a href="routes.html"> Current routes at Boulders Climbing Gym</a> <a href="routes.html"><img src="topo.gif" alt="Current routes at Boulders Climbing Gym" /> </a>
• [ ] [ BETTER - only link] Allowing the user to choose short or long link text using A switch mechanism

NOTE for Allowing the user to choose short or long link text using A switch mechanism This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version and [Understanding Conforming Alternate Versions for more information]'https://www.w3.org/WAI/WCAG21/Understanding/conformance#conforming-alt-versions).

Examples

• A link contains text that gives a description of the information at that URI A page contains the sentence "There was much bloodshed during the [Medieval period of history]()".

Scenario: with context

• [ ] Identifying the purpose of a link using link text combined with programmatically determined link context
• Using aria-labelledby for link purpose
• Using aria-label for link purpose
• Identifying the purpose of a link using link text combined with its enclosing paragraph
• Identifying the purpose of a link using link text combined with its enclosing list item
• Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells
• Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested

Examples

• A link is preceded by a text description of the information at that URI A page contains the sentence "Learn more about the Government of Ireland's Commission on Electronic Voting at [Go Vote!]()"
• Both an icon and text are included in the same link [:v: Government of Ireland's Commission of Electronic Voting]() The alt text for the icon is null, since the purpose of the link is already described by the text of the link next to the icon.
• A list of book titles A list of books is available in three formats: HTML, PDF, and mp3 (a recording of a person reading the book). To avoid hearing the title of each book three times (once for each format), the first link for each book is the title of the book, the second link says "PDF" and the third says, "mp3."
• News article summaries A Web page contains a collection of news articles. The main page lists the first few sentences of each article, followed by a "Read more" link. Although the link phrase 'Read more' is not sufficient to understand the link, the information needed precedes the link in the same sentence.

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.

 <h4>Neighborhood News</h4>
 <p>Seminole tax hike:  Seminole city managers are proposing a 75% increase in 
 property taxes for the coming fiscal year.
 <a href="taxhike.html" aria-label="Read more about Seminole tax hike">[Read more...]</a>
 </p> 

 <p>Baby Mayor:  Seminole voters elect the city's youngest mayor ever by voting in 3 year
 old Willy "Dusty" Williams in yesterday's mayoral election.
 <a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">[Read more...]</a>
 </p>

Example 2: Providing additional information for links

This example will mean that the link text as shown on screen is then used as the start of the accessible name for the link. Popular screen readers like JAWS and NVDA will announce this as: "Read more ...Storms hit east coast" and will display that same text in the links list which is very useful for screen reader users who may browse by links.

<h2 id="headline">Storms hit east coast</h2>

<p>Torrential rain and gale force winds have struck the east coast, causing flooding in many coastal towns.
<a id="p123" href="news.html" aria-labelledby="p123 headline">Read more...</a></p>

Example 3: Concatenating link text from multiple sources

There may be cases where an author will placed a tag around a section of code that will be referenced.

Note: The use of tabindex="-1" on the span element is not meant to support focusing by scripts - here, it merely serves to ensure that some browsers (IE9, IE10) will include the span element in the accessibility tree, thus making it available for reference by aria-labelledby. For more details see Accessible HTML Elements.

<p>Download <span id="report-title" tabindex="-1">2012 Sales Report</span>:
<a aria-labelledby="report-title pdf" href="#" id="pdf">PDF</a> |
<a aria-labelledby="report-title doc" href="#" id="doc">Word</a> |
<a aria-labelledby="report-title ppt" href="#" id="ppt">Powerpoint</a></p>

Example 4: combined with its enclosing paragraph

Announcements column on a Folk Festival Web page.

<h3>The final 15</h3>
<p>Coming soon to a town near you...the final 15 in the 
National Folk Festival lineup.
<a href="final15.html">[Read more...]</a>
</p>

<h3>Folk artists get awards</h3>
<p>Performers from the upcoming National Folk Festival receive 
 National Heritage Fellowships. 
 <a href="nheritage.html">[Read more...]</a>
</p>

Tests Procedure

For each link in the content that uses this technique:

1. Check that text or a text alternative for non-text content is included in the a element
   1. If an img element is the only content of the a element, check that its text alternative describes the purpose of the link
   2. If the a element contains one or more img element(s) and the text alternative of the img element(s) is empty, check that the text of the link describes the purpose of the link
   3. If the a element only contains text, check that the text describes the purpose of the link
2. If the text link is not sufficient to understand the link, check that the link is part of a sentence
   1. Check that text of the link combined with the text of its enclosing sentence describes the purpose of the link
   2. Check that purpose of the link is determined by a link text combined with programmatically determined link context
      1. Check that the value of the aria-label or aria-labelledby attribute properly describes the purpose of the link element.; or
      2. Check for other techniques

Expected Results: The above checks are true.

Switch link text

1. Check that there is a control near the beginning of the Web page to change link text.
2. Activate the control.
3. Check that all links in the resulting Web page have link text that describes their purpose.

[github-actions[bot]]

This Feature is ready to be implemented.

[github-actions[bot]]

Failures

Course Content

• [ ] due to emulating link instead of use <a> in Link component
• [ ] due to speeddial control of PDF component
• [ ] due to sppeddial control of Compressed component