Issue with NHS.UK Homepage header (relating to the hero component)

[lmortimer99]

Spotted this issue in the lab - using Firefox, zooming in 300x or 400x and applying some additional text spacing (to simulate fonts used by some dyslexic users).

It created an overlapping issue in the header.

The easiest way (assuming you don’t have CSP on the server) is a bookmarklet: https://www.html5accessibility.com/tests/tsbookmarklet.html

If that doesn’t work, or you want to keep that styling applied is to use the Stylus pluggin: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en https://addons.mozilla.org/en-US/firefox/addon/styl-us/

With the following CSS added:

• { line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } p { margin-bottom: 2em; }

Interestingly (or annoyingly from the team’s point of view) it depends how the over-ride is done.

With the bookmarklet:

With the pluggin:

I think it is because the bookmarklet is slightly better at over-riding the site’s CSS, so the line-height is being applied properly.

[chrimesdev]

This has been fixed and released in version 2.0.0 of nhsuk-frontend.