Skip to main content

Do not forget link focus states

Links must be distinct when focused and with sufficient colour contrast. This can get missed if manually rebuilding GOV.UK Frontend manually (for example if using a Javascript framework) or using an old version of GOV.UK Frontend.

This mistake can mean a failure of WCAG 2.2 2.4.7: Focus Visible (Level AA)

Typical examples that cause barriers

Example 1

This example is most likely to happen if the GOV.UK Frontend is being rebuilt in a codebase as an abstraction rather than using default templates.

Contents

Open this example in a new tab 

<p class="govuk-body">
  <a href="#">Link</a>
</p>

<p class="govuk-body">
  <a href="#">Link</a>
</p>

Not having govuk-link style or similar may mean a link does not have have sufficient contrast in the focus state.

Example 2

If a service has not been updated for a while, its frontend may be out of date.

Contents

Open this example in a new tab 

<p class="govuk-body">
  <a class="govuk-link" href="#">Link</a>
</p>

<p class="govuk-body">
  <a class="govuk-link" href="#">Link</a>
</p>

Earlier versions of GOV.UK Frontend used a focus style that did not meet colour contrast standards. It has since been updated.

Improved version

Contents

Open this example in a new tab 

<p class="govuk-body">
  <a class="govuk-link" href="#">Link</a>
</p>

<p class="govuk-body">
  <a class="govuk-link" href="#">Link</a>
</p>

The link now has a clear and accessible focus when tabbed. This fix is done by adding class="govuk-link" to the link and making sure that the service is using a recent version of GOV.UK Frontend.