#link purpose

no. 146

Make sure the purpose of links is made meaningful using the aria-label property

Providing meaningful link text that is both descriptive and conveys the proper information about the purpose of links back to users is a basic accessibility concept. Yet, many pages on the Web, even to this day, display a slew of links whose meanings can hardly be determined, even within the immediate context of their parent containers. When uninformed design decisions lean towards link text such as “Read More” or “Click Here”, the aria-label property can be used to provide additional context to the link, so it becomes more meaningful to screen reader users.

To do so, simply rely on the aria-label property to provide complementary meaning to the link, so its purpose becomes unmistakably clear to users who cannot benefit from the context provided by placement or visual design. Authors will need to keep in mind that the way assistive technology supports the aria-label property will vary. While VoiceOver announces the value of the aria-label text right after the link text, NVDA completely supplements the link text with the value of the aria-label property. Jaws, on the other hand, begins by announcing the value of the aria-label property, and then read the link text. This means that authors need to be mindful of the value provided, so the combination of link text and aria-label value remains informative.

User Story

As a visually impaired user using assistive technology, I want the purpose of links I encounter in a page to be meaningfully conveyed, so that I can reliably determine which one interests me most.

Simple Code Example

<a href="products.html" aria-label="About our products.">Read more…</a>

Testing Methodology

Using the Jim Thatcher’s Favelets for Firefox, select the “ARIA” test and look for any occurrence of aria-label displayed over a link that has ambiguous meaning, such as “Click here”, “Read more”, or the like. Check the value of the aria-label property for each such link, and determine if this value contributes enough information to help users figure out what the purpose of the link actually is.

Specification Details

WCAG 2.0: Level A

Principle: Operable

Guideline: 2.4 Navigable

Success Criterion: 2.4.4 Link Purpose (In Context)

Related Technique: ARIA8

no. 133

Make sure the purpose of links can be completely determined solely from the link’s text label

While non-descriptive links such as “click here”, “more info” and “read more” are acceptable as long as they remain meaningful within their immediate context under Success Criterion 2.4.4, such links are considered inaccessible when striving for a higher level of accessibility. Indeed, under AAA level conformance, every single link needs to always provide a meaningful and descriptive text label, regardless of context. In other words, every link needs to clearly let users predict where it will lead or what its purpose is.

To do so, simply make sure that all links in a page are self descriptive and meaningful when taken out of their immediate context. Any non-descriptive link text must be modified so it becomes meaningful, or needs to be associated with a mechanism that will convey additional, contextual information, making the text label both meaningful and purposeful. This mechanism can take multiple forms, such as off-screen text using CSS, a toggle button that makes the link text or each link more meaningful, or any other method that will allow links to become meaningful to users of assistive technologies. Doing so will allow screen reader users who extract the list of links from a page to more easily navigate through content, and reliably choose the links that interest them most, while avoiding links that uninteresting to them.

User Story

As a visually impaired user using assistive technology, I want every link I encounter to be meaningful and descriptive, so that I can reliably determine what its purpose is, even when the link is taken out of its immediate context.

Simple Code Example

<a href="/training.php">Read more <span style="position: absolute; left:-10000px; top: auto; width:1px; height:1px; overflow: hidden;">about our wonderful training services</span>...</a>

Testing Methodology

Using the Accessibility Evaluation Toolbar for Firefox, select the “Links” test under “Navigation” and verify that the text label of each link contained in the page efficiently and sufficiently describes its purpose. For every non-descriptive link text, validate that the link also provides a mechanism that turns the non-descriptive link into a meaningful and descriptive link.

Specification Details

WCAG 2.0: Level AAA

Principle: Operable

Guideline: 2.4 Navigable

Success Criterion: 2.4.9 Link Purpose (Link Only)

Related Technique: F84

no. 126

Make sure links in PDF documents that are not meaningful are given an alt text value

As a general rule, links in documents are expected to be meaningful and convey information about their purpose or where they will lead. This is mainly to ensure that screen reader users who cannot see the link in its context can still figure out what the link is about. Consequently, links such as “click here” and “read more” can often be a problem. Descriptive links are always better when it comes to accessibility, but if a link remains meaningful within its immediate context, screen reader users will always be able to refer to the context to understand what the purpose of a link is. When this is not possible, or when the link is not meaningful within its immediate context, authors are expected to provide additional information, so the purpose of the link does become descriptive and meaningful.

To do so, simply assign an alt text value to the link. Contrary to HTML, where alt text values can be added to non-text content such as images and graphic controls, any PDF object can be assigned an alt text value. Whenever such an alternative is provided, screen readers will use it to override the default information. Hence, in the case of links that lack meaning or description, replacing the screen text with meaningful alternate text for links will make links more accessible. This can be done by right clicking on the properties of any given link form the tag tree and simply assigning a value to the “Alternate Text” field under the Tag tab.

User Story

As a visually impaired user using assistive technology, I want every link I encounter in a PDF document to be meaningful, so that I can reliably determine where the inks will lead.

Simple Code Example

Not Applicable

Testing Methodology

Using Adobe Acrobat Pro, look for links that poorly convey their purpose and looking at the properties of the link in the tag tree, validate that it has been assigned a more descriptive and meaningful value through the alternate text field.

Specification Details

WCAG 2.0: Level A

Principle: Operable

Guideline: 2.4 Navigable

Success Criterion: 2.4.4 Link Purpose (In Context)

Related Technique: PDF13

no. 024

Make sure the purpose of links can be determined from the text label of each link

Links that are not meaningfully described make it difficult for some users to understand what the purpose of such links is. Links like “click here”, “read more” or “more info” can quickly become meaningless, even when users come across them in their immediate context. Likewise, the URI of the destination is generally not sufficiently descriptive. A properly described link lets users distinguish it from other links, and helps determine whether to follow the link or not.

To do this, simply make sure that every link is sufficiently described, so its purpose can be clearly determined from the link text alone. When the link text provides enough meaning, users of assistive technologies can reliably understand where the links will lead and decide if they want to follow it. Doing so will help users navigate more efficiently throughout documents, and minimize the risk of having to back track when a link turns out to be unsuitable.

User Story

As a visually impaired user using assistive technology, I want every link I encounter to be meaningful, so that I can reliably determine which one interests me most.

Simple Code Example

Not Applicable

Testing Methodology

Using the Accessibility Evaluation Toolbar for Firefox, select the “Links” test under “Navigation” and verify that the text label of each link contained in the page efficiently and sufficiently describes its purpose.

Specification Details

WCAG 2.0: Level A

Principle: Operable

Guideline: 2.4 Navigable

Success Criterion: 2.4.4 Link Purpose (In Context)

Related Technique: G91