Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Review accessibility guidance on page titles #1018

Open
1 of 3 tasks
Tracked by #669
ghost opened this issue Mar 3, 2021 · 14 comments
Open
1 of 3 tasks
Tracked by #669

Review accessibility guidance on page titles #1018

ghost opened this issue Mar 3, 2021 · 14 comments
Assignees
@sarawilcox
Labels
accessibility Accessibility related guidance

Comments

@ghost
Copy link

ghost commented Mar 3, 2021 •
edited by sarawilcox
Loading

What

As part of the review of our accessibility pages, the guidance for content on setting page titles (linked here) needs to be reviewed.

Also, we may want to review where this guidance sits.

Current guidance

Screenshot 2024-05-07 at 11 19 02

Why

The guidance needs to clarify how page titles differ from page names.

We see that quite a lot of people can't find this guidance.

Done when

  • New guidance drafted
  • Guidance reviewed and approved
  • Updated guidance released
@ghost ghost added accessibility Accessibility related guidance labels Mar 3, 2021
@ghost ghost assigned sarawilcox Mar 3, 2021
@sarawilcox sarawilcox added the BAU label Mar 31, 2021
@sarawilcox sarawilcox mentioned this issue Mar 31, 2021
Closed
13 tasks
@sarawilcox sarawilcox removed the BAU label Mar 31, 2021
@sarawilcox
Copy link
Contributor

sarawilcox commented Apr 19, 2021 •
edited
Loading

Hi @AJSMITH1512, here's the current guidance: https://service-manual.nhs.uk/accessibility/content#set-page-titles

Is the following text clearer? I'll run it by a few content designers this week, and will check it with the team and Ben too before asking the AWG to approve the change.

Set page names and page titles
For: Content, Development, Testing

The page name:

  • is in the <H1> tag in the <body> of the page, for example: "Achalasia"
  • shows at the top of the content

The page title:

  • is in the <title> tag in the <head> section of the page
  • consists of the page name and the website name, like this: Page name – Site name, for example: "Achalasia – NHS"
  • shows in the browser window and search results snippet
  • is the first thing a screen read will read out

If you can, use templates to keep things consistent and use your content management system (CMS) to add the site name after the dash.

Good page names:

  • help users find what they want and recognise they're in the right place
  • are unique, concise and descriptive
  • put important keywords near the beginning

@davidhunter08 or @AdamChrimes, for info. This content didn't work well for content designers so I'm going to rethink and chat with Adam and Dom on Friday.

@sarawilcox
Copy link
Contributor

sarawilcox commented Apr 21, 2021 •
edited
Loading

Should probably go to AWG too. I'm testing it with some content designers this morning. @EllenDoyle @georginaplatt, see my Slack message.

@sarawilcox
Copy link
Contributor

sarawilcox commented Apr 21, 2021 •
edited
Loading

Notes from crit with content designers

  • Confusion about words "page name" and "page title". Explain up front that they can be confused and then explain key differences? Better to talk about "title" and "H1" or main heading.
  • Consider putting content for content designers under "Use headings correctly" and leave "Set page titles" for devs and testers? But some content designer duplicate H1 in title or write different page titles. Some are just aware of and use H1 and rely on CMS creating page title.
  • For content designers, it's about "writing good page titles". "Set" doesn't make sense to them. In what sense to devs "set" page titles?
  • When would we have different info in page title and H1? (See NHS.UK Slack #content conversation 21 April.)
  • Make it clear that title doesn't appear on page but does appear in search results. While H1 is visual, on page.
  • Consider using accordions for what devs need versus what content designers need?
  • Section heading: Set page titles and write good page headings?

This was referenced Apr 23, 2021
Closed
Open
Open
Open
@sarawilcox
Copy link
Contributor

See Slack thread: https://nhsuk.slack.com/archives/C6S0QTW9X/p1624370799028200?thread_ts=1624368546.027100&cid=C6S0QTW9X

@sarawilcox
Copy link
Contributor

We say this in the accessibility guidance: https://service-manual.nhs.uk/accessibility/content#set-page-titles, i.e. Page title - Site name. For example: Achalasia - NHS.
I think we're OK on the health content front, because it's templated in Wagtail. But we're not consistent with services.
We have some services that follow the GOV.UK pattern: eg: Do you know your NHS number? - Book a coronavirus vaccination - NHS. https://www.nhs.uk/book-a-coronavirus-vaccination/do-you-have-an-nhs-number.
And some which don't mention that it's the NHS website, e.g.: Search - Find a walk-in coronavirus (COVID-19) vaccination site. https://www.nhs.uk/service-search/find-a-walk-in-coronavirus-covid-19-vaccination-site

@sarawilcox
Copy link
Contributor

Had a chat with Alistair Duggin and Sarah Norman about this. We know that some transactional services are failing WCAG2.1 AA on page titles. Other pages are not following latest best practice.

Alistair is going to draft a brief note with examples and best practice that could go in the accessibility guidance.

We also need a way to make this guidance easier to find in the service manual. It's not just an accessibility issue.

@sarawilcox
Copy link
Contributor

This all needs further review and testing. Put back into team backlog for now.

@sarawilcox
Copy link
Contributor

sarawilcox commented May 7, 2024 •
edited
Loading

See also our draft URL guidance: nhsuk/nhsuk-service-manual-community-backlog#265

The BBC guidance for title is
Page name - Section name - BBC

And the GOV.UK guidance is:
Page name - Service name - GOV.UK
eg https://www.registertovote.service.gov.uk/

Screenshot 2024-05-09 at 10 24 09

Writing for user interfaces says:
"Each page should have a single <h1>. The <h1> should describe what the page does.
The <title> should be based on the <h1>, and follow this format:
Where do you live? - register to vote - GOV.UK"

@sarawilcox
Copy link
Contributor

sarawilcox commented May 7, 2024 •
edited
Loading

Page titles should be short. GOV says "Your title should be 65 characters or less (including spaces).
You can use more than 65 characters if it’s essential for making the title clear or unique, but do not do this routinely because:

A lot of our page titles are very lengthy.

@sarawilcox
Copy link
Contributor

Page title - HMRC guidance

@sarawilcox
Copy link
Contributor

sarawilcox commented May 7, 2024 •
edited
Loading

I think we've seen teams struggling with titles, H1s and URLs for fail pages.

For example, a service may have quite a lot of pages with the heading "You cannot use this service". The body copy explains why.

The URL will be different in each case and may reflect why this applicant is not eligible. E.g. .../apply/under-16

See GOV Custom error and fail pages GitHub issue.

@edwardhorsford
Copy link
Contributor

I'm a new user of the NHS Design system so recently queried the policy on titles.

There's some guidance under the accessibility section, but alas I didn't find it.

Some extra things it would be good to cover:

  • The example seems suited to content pages on nhs.uk, but not services where I think we'd want to include the service name. It would be good to explicitly add an example like the one @sarawilcox has found above.
  • As well as services, it would be good to cover what things within the NHS App should do - should they end in - NHS or - NHS App?

I think the app itself might use NHS App, but we may decide that services within it don't - many things are available both within the app and via the web. If we ask them to add NHS App to the end of their titles I think it implies the page title being dynamic based on use case - which might be challenging for some services.

@sarawilcox
Copy link
Contributor

sarawilcox commented May 9, 2024 •
edited
Loading

What about hyphens, en-dashes etc in title? Does it make a difference?

GOV uses hyphen: Where do you live? - Register to vote - GOV.UK (https://www.gov.uk/service-manual/design/writing-for-user-interfaces#headings-and-title)

@sarawilcox
Copy link
Contributor

Interestingly the NHS.UK CMS uses a hyphen by default, but it would not be v difficult to change this to an en-dash.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sarawilcox sarawilcox

Labels
accessibility Accessibility related guidance
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@edwardhorsford @sarawilcox