Text-alignment

[samanthasaw]

What

Align text to the left

Why

Help users read text-based content

What evidence do you have that services across the NHS need it?**

• Some users use screen magnification. Users with screen magnification at 200% may not see that text is aligned out of the screen and skip a heading
• In left to right languages, users anchor their eyes to the left after reading each sentence. This is known as reading in a F-shaped pattern. Changing this pattern will cause the user to have to make an effort to find where your sentence starts. Users could be annoyed by the change in pattern, or worse, not understand the content.
• Advice for layout for users with dyslexia also suggests left-aligning text
• In the context of health, users need to be able to quickly and easily read and understand content. Misunderstanding or missing content can have a considerable health impact

Anything else

• British Dyslexia Association guidance recommends text is left-aligned
• Nielsen Norman Group research on the F-shaped pattern

[sarawilcox]

This fits with some of our and GOV.UK's existing guidance, e.g.:

• left aligning the Continue button so users don't miss it: Question pages (GOV.UK)
• our guidance on buttons

See also:

• WCAG G169: Aligning text on only one side
• Accessible Information: Implementation Guidance v1.1

[sarawilcox]

Thanks @samanthasaw. Have you seen examples of services not doing this?

[samanthasaw]

Hi @sarawilcox yes we did a usability assessment today of a third party online consultation service. I noticed some of their content was center-aligned. I looked to see if there was anything in the service manual to back up left-aligning content in case we got any push back from them, as we'd recommend they left-align the text

[samanthasaw]

WCAG 1.4.8 Visual Presentation which concerns justified text: https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html

It doesn’t specifically mention centred text but does suggest aligning text to the left (or right): https://www.w3.org/WAI/WCAG21/Techniques/css/C19.html

[mcheung-nhs]

And https://www.w3.org/WAI/WCAG21/Techniques/general/G169.html

[samanthasaw]

Sorry @mcheung-nhs Sara had already added that link in a previous comment so I left it out

[mcheung-nhs]

Oops - you're right, didn't see that!

[samanthasaw]

GOV.UK - accessible communication formats, design and layout

[henocookie]

It's worth considering the different languages used by people using NHS services. For example, Arabic content tends to be aligned from right to left. For example, the Doctoori website, linked to from the NHS.UK Health information in other languages page can be viewed in both English and Arabic. When Arabic is selected, the whole layout of the website changes, for example on the common health questions page.

[sarawilcox]

Yes, we should probably specify left-aligning for languages that run left to right, like English. And right-aligned for content that runs right to left, like Arabic.

[sarawilcox]

Align text left for maximum legibility. Avoid right aligning or justifying text. From GOV.UK Guidance: Accessible communication formats

[sarawilcox]

I think we have enough information here to take this to the next Style Council meeting.

[sarawilcox]

@karlgoldstraw suggests that we'd probably want to cover this under typography: https://service-manual.nhs.uk/design-system/styles/typograph - like a utility class, or a helper.

Also, I think we should mention it under Formatting and punctuation in the content style guide: https://service-manual.nhs.uk/content/formatting-and-punctuation

See this GOV.UK frontend issue: https://github.com/alphagov/govuk-frontend/issues/1824

[sarawilcox]

Another example of right to left is the BBC Farsi (Persian) language page: https://www.bbc.com/persian.

[sarawilcox]

I see that GOV has published new override classes for text alignment: https://github.com/alphagov/govuk-frontend/releases/tag/v3.14.0. Is this the approach we'd take?

[henocookie]

I see that GOV has published new override classes for text alignment: https://github.com/alphagov/govuk-frontend/releases/tag/v3.14.0. Is this the approach we'd take?

Seems sensible. I guess this would be alongside guidance to align text to the left in most instances, as suggested by @samanthasaw in the initial issue?

[samanthasaw]

@henocookie @sarawilcox Doesn't HTML by default align text and elements to the left? Would the override classes only be for certain elements

[aviangel-NHS]

I've noticed some of the tab navigation elements sometimes have links to the right of the container. That could be an issue depending on the type of screen magnification software that is being used. Could easily be missed

[aviangel-NHS]

I've heard that some of the NHSuk tools are being reviewed and updated. It's prob worth making sure that none of the content is right aligned and hidden from users using screen magnification.

[sarawilcox]

This is what I'm thinking of putting to the next Content Style Council meeting, early December. We could add it to the Formatting and punctuation page in the content style guide.

@teodorastraianu1 is considering what we need to add to the design system, including a new override class for text alignment.

@samanthasaw for info.

[sarawilcox]

@teodorastraianu1 A question. Some teams may need to support 2 languages at the same time, e.g. English left to right and Arabic right to left. See this page: https://paper.dropbox.com/doc/Multiple-language-support-hSVIJqjyWFVc5N6Irvxnn

In fact, they say: "This is difficult in a responsive design though so alternatives should be explored. " Maybe we should steer clear of this.

[teodorastraianu1]

@sarawilcox No, I don't think we would have to justify (unless I am missing something).

I agree we should probably not mention mixing multiple languages in one page, especially since this is just guidance on text alignment, not on producing content in languages other than English.

[teodorastraianu1]

This is what we are thinking of adding to the Design System, to the Typography page.

We would also add a code snippet (which @danjohnstonUX is currently working on) and an example of what right-aligned text would look like. We are thinking of using an Arabic example, since that's the use case we recommend right-aligning for. We are thinking of saying "Aligning Arabic text to the right", which would look something like this (needs to be checked by one/a few Arabic speakers to make sure it's a good translation):

[sarawilcox]

We're proposing to add something like this to the content style guide as well, on the Formatting and punctuation page.

[samanthasaw]

Looks good to me! @teodorastraianu1 @sarawilcox

[henocookie]

This will be taken to the Content Style Council and Design System Working Group tomorrow (7th December 2021) for discussion to see if there are any objections to progressing forward and publishing the guidance and adding a utility class to nhsuk-frontend

[samanthasaw]

Style council - left align content.pptx

Slides I presented at the style council on 7 December 2021

[henocookie]

At the December Design System Working Group session, left-align text was presented by @samanthasaw, @sarawilcox and @henocookie. This was discussed and voted on by the DSWG members.

Key points of discussion:

• Consider whether the guidance is applicable for clinical facing systems
• Alignment of components should be a new backlog item, but guidance for left-aligning text seems good to publish
• Consider where this guidance could also be surfaced in the accessibility guidance section of the service manual
• Include guidance to not use justified text unless user research shows it would be useful for a particular service

Vote to publish:

12 - Ready to publish now 5 - Needs a little more work 0 - Needs a lot more work 0 - Not right now

Next steps

• [x] Re-name this issue to only focus on text-alignment, not left-alignment for other non-text content types
• [x] Explore if this guidance is suitable for clinical facing systems. Possibly add in a line around "we haven't tested this with teams creating services in clinical settings"
• [x] Create a new issue to explore alignment guidance for other components and patterns
• [x] Iterate the guidance based on discussion points. @sarawilcox could we work together on this please?
• [x] @henocookie to create PR in nhsuk-frontend to add left, centre and right text-alignment utility classes
• [ ] Run the Arabic example by another person to check it is understandable. @sarawilcox has contacted Mashuk in NHS Digital for this.
• [x] Check if we can display the Arabic code example right-aligned

[sarawilcox]

A weird example of right aligned English and Arabic: https://www.gov.uk/government/publications/instructions-for-covid-19-self-test.ar.

[henocookie]

I've checked and it appears there is no common example of code editors allowing for right-aligned editing. For example, Apple still uses left-to-right examples of code when showing how to adapt interfaces Internationally to support right-to-left languages, like Arabic.

[henocookie]

Guidance tweaks pending a content review from @sarawilcox following feedback and next steps agreed after the December 2021 DSWG session.

Guidance in the content style guide

Guidance in the design system

[henocookie]

Guidance and examples for text-alignment in the GOV.UK Design System: https://design-system.service.gov.uk/styles/typography/#text-alignment-override-classes

[sarawilcox]

Above text for content style guide approved at December Content Style Council. Notes of Style Council meeting to be approved by clinicians.

[henocookie]

To do once the nhsuk-frotnend update is released:

• [x] update the nhsuk-frontend version for the service manual app
• [x] remove the custom text-alignment CSS in the service manual app

[henocookie]

Custom CSS in the service manual is now removed. Just awaiting final content tweaks @sarawilcox is working on to be able to release the text-alignment guidance in the service manual

[henocookie]

Closed as the guidance has now been published in v5.7.0 of the NHS digital service manual 🚀