WCAG Level AAA: Link Purpose (Link Only)

[markhobson]

Low Priority WCAG Level AAA

Link Purpose (Link Only)

Links were encountered that were not descriptive of their purpose / destination when browsing out of context.

WCAG Reference:

2.4.9 Link Purpose (Link Only) (Level AAA)
Understanding Link Purpose (Link Only) | How to Meet Link Purpose (Link Only)

Issue ID: DAC_Link_Purpose_Link_Only_01

URL: https://test.update-your-capital-schemes.activetravelengland.gov.uk/schemes
Page title: 'Update your capital schemes - Active Travel England - GOV.UK'
H1 heading: 'Your schemes'
Journey: 1.1a

Screenshot:

List of links, when browsing out of context in JAWS

On the 'Your schemes' page, within the schemes table, the links within the reference column are non-descriptive of the context or purpose of the link when browsing out of context.

This affects screen reader users, as it is not clear that the purpose of the link is to open the overview page for the scheme from where the scheme's information may be viewed and changed.

Current code ref(s):

#main-content > table > tbody > tr:nth-child(1)

<tr class="govuk-table__row">
   <td class="govuk-table__cell">
      <a class="govuk-link" href="/schemes/64">
         ATE00064
      </a>
   </td>
   […]
</tr>

Screen reader user comments:

“I feel the link text representing each reference does not give clear information relating to the content that will be accessed once the relevant link has been activated.
Although beneath each link there is plain text announcing the subject matter, this would not be accessible for a screen reader user wishing to navigate out of context using, for example, the tab key or links list within the virtual HTML features list, accessed using insert F7.
I feel that giving the reference a clear title will ensure screen reader users are fully furnished with the subject matter connected to the elements regardless of navigational preference.”

Examples of additional instances:

• URL: https://test.update-your-capital-schemes.activetravelengland.gov.uk/schemes
  Page title: 'Update your capital schemes - Active Travel England - GOV.UK'
  H1 heading: 'Your schemes'
  Journey: 1.1a

  Current code ref(s):

  #main-content > table > tbody > tr:nth-child(2)

  <tr class="govuk-table__row">
     <td class="govuk-table__cell">
        <a class="govuk-link" href="/schemes/65">
           ATE00065
        </a>
     </td>
     […]
  </tr>

• URL: https://test.update-your-capital-schemes.activetravelengland.gov.uk/schemes
  Page title: 'Update your capital schemes - Active Travel England - GOV.UK'
  H1 heading: 'Your schemes'
  Journey: 1.1a

  Current code ref(s):

  #main-content > table > tbody > tr:nth-child(3)

  <tr class="govuk-table__row">
     <td class="govuk-table__cell">
        <a class="govuk-link" href="/schemes/66">
           ATE00066
        </a>
     </td>
     […]
  </tr>

• URL: https://test.update-your-capital-schemes.activetravelengland.gov.uk/schemes
  Page title: 'Update your capital schemes - Active Travel England - GOV.UK'
  H1 heading: 'Your schemes'
  Journey: 1.1a

  Current code ref(s):

  #main-content > table > tbody > tr:nth-child(4)

  <tr class="govuk-table__row">
     <td class="govuk-table__cell">
        <a class="govuk-link" href="/schemes/71">
           ATE00071
        </a>
     </td>
     […]
  </tr>

Additional instances of this issue may exist on other pages throughout the website; wherever this issue occurs, they too will need to be resolved.

Solution:

Ensure that the links context and purpose is contained in the same sentence, paragraph, list item, table cell, or associated table headers or that it can be programmatically determined in some other way, for example, by using visually hidden text, an aria-label, aria-labelledby, or aria-describedby to provide the sufficient context.

In this instance, whilst the table column header identifies the link text as being a reference, it is not clear what enacting this link will actually do with that scheme reference.

Include visually hidden text that identifies the purpose of the link; this can be achieved by implementing the additional text within a visually hidden <span> element.