22 issues found for 2.4.4 Link Purpose (In Context)

Setting the accessible name of the product tile link to the span.A11yText__a11y__XYZ is a viable option but it should be using the product's manufacturer and model name.

A better approach would be to use aria-labelledby, using the existing visible text. To follow this approach, the manufacturer and model name must have an id attribute set. The product tile link could then follow a structure like this:

<a href="..." aria-labelledby="product__manufacturer__X product__model__X">
  <h3>
    <span id="product__manufacturer__X">
    <span id="product__model__X">
  </h3>
  ...
</a>

Use link text to convey the link's purpose. Clearly stating, where exactly a link goes, will help all users.

Ensure, link purpose is determinable. This can be done by adding "GERÄT XYZ in den Warenkorb legen" as text alternative. Ideally, a proper semantic structure on product card is used.

<article>
  <h3 id="heading-PRODUCT">PRODUCT NAME</h3>
  ...
  <a href="..." id="link-PRODUCT" aria-labelledby="heading-PRODUCT link-PRODUCT">
    Produktdetails
  </a>
</article>

Ensure, link purpose is determinable. Ideally, a proper semantic structure on content card is used. As the base structure is already visually presented as such a card, consider the following structure:

<nav aria-labelledby="heading-tariff-list">
  <h2 id="heading-tariff-list">Alle Tarifgruppen im Überblick</h2>
  
  <ul>
    <!-- Content Card -->
    <li>
      <article class="card">
        <div>
          <h3 id="heading-TARIFF">TARIFF GROUP NAME</h3>
          <p>TARIFF DESCRIPTION</p>
          <a href="..." id="link-TARIFF">Zu den TARIFF GROUP-Tarifen</a>
        </div>
        <div style="order:-1;">
          <img src="..." alt="PROPER TEXT ALTERNATIVE" />
        </div>
      </article>
    </li>

    <!-- More Cards -->
  </ul>
</nav>

Setting up the link with a pseudo element like this:

.card a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

And the card itself with:

.card { 
  position: relative; 
}

/* Add focus state to card when link WITHIN is focused */
.card:focus-within,
.card:hover {
  outline: 2px solid magenta;
  box-shadow: 8px 8px black;
}

/* Remove focus outline from link */
.card:focus-within :focus {
  outline: none;
}

Will make the card be focus visible, while the link in it still is the focused element with the correct accessible name.

Ensure, adding proper text alternative to the images.

Ensure, accessible names of links are unique. If they are not, ensure the context does provide enough information to disambiguate. While enriching the accessible name by using ARIA label or labelledby could be an option, also ensure correct heading structure. A user might be focused on the "Jetzt dazubuchen" button and to figure out what purpose the button has, will navigate to the previous heading in content which unfortunately will be "Live und jederzeit auf Abruf" for both CTAs.

Multiple issues need to be remediated for the news tile's links. Ideally the tile should follow a semantic HTML "card" structure as outlined in numerous observations before already.

To just remediate the link purpose issue of the given observation, the link's accessible name (coming from the images alt right now) must communicate the link's purpose. For the "Mehr erfahren" link, one option could be use an id on the tile's heading and use it to label the link like this: <a href="..." aria-labelledby="news-card-heading-testsieger" id="news-card-link-testsieger">Mehr erfahren</a>. When doing so, ensure the heading actually describes the link's purpose.

It is however not recommended to just fix this, as the tile (card) has more issues that could be remediated by following the structure of a semantically correct marked up HTML card:

A good idea about the card structure can be found in observation "Content card link purpose not determinable" (2.4.4 Link Purpose (In Context)) for audit sample "Tarife". Basically, you limit one card (<article>) to one link (<a>), place the card's heading as the first card's first child element and visually place the image at the top by using CSS order.

Possible remediation options in order from preferred:

1. Use purposeful button text like "Immobilie oder Grundstück zur Vermietung anbieten", which in context with the heading determines the purpose

2. Rewrite the heading to identify section's purpose like "Vermieten Sie an uns und helfen Sie uns, das 5G-Netz noch größer zu machen", which again in context lets the link purpose be determined

3. Any combination of heading and button text rewrite

What is not preferred is to use ARIA, when there is a non-ARIA way to do so. If above-mentioned options cannot be used, the use of aria-labelledby is another option. Usually this is done by labelling the button by referring to the headings id. In this case this will not work without rewriting the heading anyways and as such is not a viable option. The way for aria-labelledby to work in this situation would be to add a hidden (class="visually-hidden") text that makes the link's purpose determinable. This comes with the caveat that the visual link text ("Mehr erfahren") must be part (and ideally the first part) of the accessible name (See 2.5.3 Label in Name).

See observation Content card link purpose not determinable (2.4.4 Link Purpose (In Context)) for remediation in the ideal way of creating accessible content cards.

Side notes: The link element also has a null id, a null title, and a null onclick attribute set. A link should not use the title attribute at all, a null id attribute sets id="" which leads to "duplicate ID" errors easily, and an onclick should never be useful on a link anyways. Ensure, removing non-used markup.

When a generic "Mehr Infos" link is used, ensure the link purpose can be determined by its context. For a button style link as used here, the context would be the most recent heading that should describe the sections topic. In this case, the "tile" (card) should use a semantic HTML heading element to describe the content's purpose, thus providing enough context to determine the "Mehr Infos" link's purpose as well.

As links can be displayed in a "link list" (e.g. Screen reader macOS VoiceOver → Rotor) or navigated in order from link to link, ideally each link with unique link target has a unique accessible name.

As a last resort, this can be done by using ARIA attributes like aria-labelledby to use the card's heading to provide a unique accessible name like "Mehr Infos zur MegaSport 12M Option".

By using full sentence link texts within paragraphs, a user of assistive technology can easily determine the link's purpose. The user can also do so without clicking ahead on each HTML element change. A possible change would be from the original

Hier können Sie püfen, ob Sie bereits einen Telekom Login haben, oder Sie können sich auch ohne Telekom-Vertrag einen neuen Telekom Login anlegen.

to an alternative version of

Hier können Sie püfen, ob Sie bereits einen Telekom Login haben, oder Sie können sich auch ohne Telekom-Vertrag einen neuen Telekom Login anlegen.

This will provide the link purpose within a single announcement of assistive technology without the need to click ahead, remember contents before or after the link or re-listen to whole paragraphs of text.

A link like

Streaming: Streamen Sie einfach das Programm über die MagentaSport App, den MagentaTV Stick, den Amazon Fire TV Stick oder Apple TV. Oder alternativ über Google Chromecast oder Apple Airplay.

could be moved to the end of the list item to achieve the same user experience

Streaming: Streamen Sie einfach das Programm über die MagentaSport App, den MagentaTV Stick, den Amazon Fire TV Stick oder Apple TV. Oder alternativ über Google Chromecast oder Apple Airplay. Hier erfahren Sie mehr über den MagentaTV Stick und passende Tarife.

Use link text to describe link purpose or provide link purpose in immediate context. A purposeful link text could be "Die häufigsten Fragen und Antworten zur Kids Watch XPLORA X4 Play eSIM anzeigen".

Side note: The "info box" content could also be improved further by consolidating all tutorials, "Anleitungen", "Erklärvideos", "Hinweise", etc. into one help section like:

(download buttons)

1. Xplora App auf Ihr Smartphone herunterladen (beachten Sie, dass die XPLORA Kids Watch X6 Play eSIM nicht mit den Apps XPLORA 3 & 3S und 4 & Go kompatibel ist)

2. QR-Code auf dem Display der Uhr scannen und die Uhr mit dem Smartphone koppeln.

3. Xplora App öffnen und damit den eSIM Aktivierungscode aus dem Aktivierungsschreiben scannen* - alternativ startet der Download des eSIM Profils automatisch. Fertig!

Hier können Sie sich die schriftliche Installations-Anleitung als PDF herunterladen, sich ein Erklärvideo zum Entkoppeln der Uhr anschauen oder sich die häufigsten Fragen und Antworten zur Kids Watch XPLORA X6 Play eSIM anzeigen lassen.

Ensure, link purpose is determinable. This can be done by adding "GERÄT XYZ in den Warenkorb legen" as text alternative. Ideally, a proper semantic structure on product card is used.

<article>
  <h3 id="heading-PRODUCT">PRODUCT NAME</h3>
  ...
  <a href="..." id="link-PRODUCT" aria-labelledby="heading-PRODUCT link-PRODUCT">
    Produktdetails
  </a>
</article>

Ensure, link purpose is determinable. This can be done by adding "GERÄT XYZ in den Warenkorb legen" as text alternative. Ideally, a proper semantic structure on product card is used.

<article>
  <h3 id="heading-PRODUCT">PRODUCT NAME</h3>
  ...
  <a href="..." id="link-PRODUCT" aria-labelledby="heading-PRODUCT link-PRODUCT">
    Produktdetails
  </a>
</article>

Ensure, link purpose is determinable. This can be done by adding "GERÄT XYZ in den Warenkorb legen" as text alternative. Ideally, a proper semantic structure on product card is used.

<article>
  <h3 id="heading-PRODUCT">PRODUCT NAME</h3>
  ...
  <a href="..." id="link-PRODUCT" aria-labelledby="heading-PRODUCT link-PRODUCT">
    Produktdetails
  </a>
</article>

Ensure, link purpose is determinable. This can be done by adding "GERÄT XYZ in den Warenkorb legen" as text alternative. Ideally, a proper semantic structure on product card is used.

<article>
  <h3 id="heading-PRODUCT">PRODUCT NAME</h3>
  ...
  <a href="..." id="link-PRODUCT" aria-labelledby="heading-PRODUCT link-PRODUCT">
    Produktdetails
  </a>
</article>

Ensure, link purpose is determinable. This can be done by adding "GERÄT XYZ in den Warenkorb legen" as text alternative. Ideally, a proper semantic structure on product card is used.

<article>
  <h3 id="heading-PRODUCT">PRODUCT NAME</h3>
  ...
  <a href="..." id="link-PRODUCT" aria-labelledby="heading-PRODUCT link-PRODUCT">
    Produktdetails
  </a>
</article>

Use link text to describe link purpose or provide link purpose in immediate context. A purposeful link text could be "Die häufigsten Fragen und Antworten zur Kinderuhr mit GPS Anio 6 anzeigen".

Side note: The "info box" content could also be improved further by consolidating all tutorials, "Anleitungen", "Erklärvideos", "Hinweise", etc. into one help section like:

(download buttons)

1. SIM-Karte in Uhr einlegen (PIN der SIM-Karte muss deaktiviert sein. Wenn Sie die SIM-Karte bei uns angefordert haben, ist dies bereits voreingestellt.)

2. Anio App installieren
   (download buttons)

3. QR-Code auf dem Display der Uhr scannen und die Uhr mit dem Smartphone koppeln. Fertig!

Hier können Sie sich ein Erklärvideo zur Einrichtung der Uhr anschauen oder sich die häufigsten Fragen und Antworten zur Anio 6 anzeigen lassen.

Ensure, the "Erklärvideo" uses a button element, when opening in a dialog window.

As interactive elements, links must have accessible names. Ensure, HTML link elements are not "empty", i.e. without link text content.

Ensure, link purpose can be determined from link text content or its programmatic context. Ideally, the link text itself will convey the link purpose. If it is not possible to use link text content, proper programmatic context may be:

• the link's surrounding paragraph, if the paragraph itself has the purpose to introduce the link and is not too long, as e.g. a user of assistive technology would have to perceive the paragraph in full to understand the link purpose.

• the link's directly preceding heading (e.g. the heading of a product card may be used to determine the purpose of this card's CTA link)

This issue can be fixed, ensuring accurate heading structure. See 1.3.1 Info and Relationships and 2.4.6 Headings and Labels for more information.

As interactive elements, links must have accessible names. Ensure, HTML link elements are not "empty", i.e. without link text content.

Ensure, link purpose can be determined from link text content or its programmatic context. Ideally, the link text itself will convey the link purpose. If it is not possible to use link text content, proper programmatic context may be:

• the link's surrounding paragraph, if the paragraph itself has the purpose to introduce the link and is not too long, as e.g. a user of assistive technology would have to perceive the paragraph in full to understand the link purpose.

• the link's directly preceding heading (e.g. the heading of a product card may be used to determine the purpose of this card's CTA link)

As interactive elements, links must have accessible names. Ensure, HTML link elements are not "empty", i.e. without link text content.

Ensure, link purpose can be determined from link text content or its programmatic context. Ideally, the link text itself will convey the link purpose. If it is not possible to use link text content, proper programmatic context may be:

• the link's surrounding paragraph, if the paragraph itself has the purpose to introduce the link and is not too long, as e.g. a user of assistive technology would have to perceive the paragraph in full to understand the link purpose.

• the link's directly preceding heading (e.g. the heading of a product card may be used to determine the purpose of this card's CTA link)

It is best practice to inform users of the purpose of a link before the link is clicked. In this case, informing about the download of a PDF document would be best practice.

Ideally, the document is opened in the browser instead of being downloaded right away, so the user can decide if downloading the document is necessary and wanted.

Either way, a hint about the click linking to a PDF document instead of a website may be given to the user, e.g. as "Datenschutzhinweise (PDF)".

Side note: the nesting of interactive elements is noted in another observation as well. The link inside the input label will reduce the target area of the input and may lead to mis-clicking. Ideally, the Instructions, including the link to the document / website, is preceding the actual input element. The structure could be based on:

<p id="hint-datenschutzhinweise">... <a href="...">Datenschutzhinweise (PDF)</a> ...</p>
<input type="checkbox" id="input-datenschutzhinweise" aria-describedby="hint-datenschutzhinweise">
<label for="input-datenschutzhinweise">Ich habe die Datenschutzhinweise ...</label>

As interactive elements, links must have accessible names. Ensure, HTML link elements are not "empty", i.e. without link text content.

Ensure, link purpose can be determined from link text content or its programmatic context. Ideally, the link text itself will convey the link purpose. If it is not possible to use link text content, proper programmatic context may be:

• the link's surrounding paragraph, if the paragraph itself has the purpose to introduce the link and is not too long, as e.g. a user of assistive technology would have to perceive the paragraph in full to understand the link purpose.

• the link's directly preceding heading (e.g. the heading of a product card may be used to determine the purpose of this card's CTA link)