search

nhsuk / nhsuk-frontend

NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.
https://nhsuk.github.io/nhsuk-frontend/
MIT License
621 stars 107 forks source link

Hyperlink Background on Focus hinders readability due to lack of padding #810

Closed andrew-nhsbt closed 2 years ago

andrew-nhsbt commented 2 years ago

What is the issue?

When a hyperlink has focus, the yellow background has little to no padding left or right, meaning the background edge encroaches on the first and final letters of the hyperlink text, hindering legibility.

Example 1:

image

Example 2:

image

What steps are required to reproduce the issue?

  1. Open a website which uses the NHS Design System
  2. Navigate to a page that has hyperlinks within the body text
  3. Tab through the page until the hyperlink has focus
  4. Observe the focussed hyperlink EXPECTED RESULT: The highlighting should not encroach on or hinder readability of the link text ACTUAL RESULT: The highlighting edge butts up against the some letters (e.g. t) and leaves a negligible space with others (e.g. N).

Suggested resolution

If the styling of the a element was updated to give it left-right padding, which is then cancelled out with an equivalent negative margin, e.g.: (changes highlighted in yellow): image

Then all focussed hyperlinks would have a minimum clear space between the first/last letter and the edge of the highlighting,

Example 1:

image

Example 2:

image

DomBaker commented 2 years ago

Hi Andrew, thanks for the contribution. I've put this forward to our lead service designer and accessibility lead, after evaluating the raised issue it's been agreed that this is expected behaviour. Any evidence of this impeding a user's ability to read the text would be greatly appreciated.