search

nhsuk / nhsuk-service-manual-community-backlog

This is a place for digital teams in the NHS to work together and develop the NHS digital service manual.
https://service-manual.nhs.uk/community-and-contribution
62 stars 5 forks source link

Headings with captions #178

Open gavinwray opened 4 years ago

gavinwray commented 4 years ago
heading-with-caption

Document the heading with caption pattern, and when and when not to use it, under ‘Headings’ in the manual’s typography section.

There are notes on the pattern including research on the heading structure within the mini-hub documentation. The pattern is available in the NHS.UK front-end library.

Related issues:

Fenwick17 commented 4 years ago

As part of our profiles redesign we have implemented the same style of heading and subhead, but using different markup to what is already within NHS Frontend. As the current pattern causes VoiceOver to read out 'Heading level 1, 3 items' due to the spans within.

image

The current mark up for this:

<h1>Overview</h1>
<p class="nhsuk-page-heading__small">Briggate Dental Practice</p>

I am also actively working on creating some helper classes which would allow us to flip the elements round. So the 'subheading' style would appear above the h1.

samanthasaw commented 4 years ago

Hey Adam @Fenwick17 we are using the section heading in the NHS App, please could you help with the mark up? I've used the code from one of the NHS UK conditions pages. Which nests spans within the H1. But I can see from your above comment you don't advise this because of screenreaders?

This is the code I've got at the minute: 

<h1 class="nhsuk-heading-xl nhs-app-xl"><span class="nhsuk-caption-m nhsuk-caption--top">
          <span class="nhsuk-u-visually-hidden"> - </span>
          Get advice from your GP 
        </span>
      <span role="text">What would you like to ask your doctor about?
      </span>
    </h1>

I'm guessing the visually hidden dash is intended for screenreaders so there's a pause? But I'm not sure that would create much of a pause?

Would you instead advise this mark up: 

<p class="nhsuk-page-heading__small nhsuk-u-margin-bottom-1">Get advice from your GP</p>
<h1 class="nhsuk-heading-xl nhs-app-xl">What would you like to ask your doctor about?</h1>

I reduced the margin bottom to 1 as there was a lot of space between the caption heading and the h1.

@sarawilcox @davidhunter08 Do we know when caption headings will be included in the service manual? Thanks

davidhunter08 commented 4 years ago

Hey @samanthasaw, heading captions are on the to do list but I can't say when it will be done because the service manual team is currently split across various covid projects.

Please keep documenting the work in the backlog and we'll pick it up as soon as we can.

I would suggest speaking to @mcheung-nhs as he was involved in the development of the heading captions for the NHS website.

samanthasaw commented 4 years ago

Thanks @davidhunter08 yes @mcheung-nhs if you can advise that would be great please! :) https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/178#issuecomment-670459263

edwardhorsford commented 4 months ago

Came looking for this as I couldn't find the caption guidance I'm used to seeing on GOV.UK.

@Fenwick17 I know you commented years ago, but I think your issue/solution is already covered in the GOV.UK design system. In the GOV.UK design system's guidance it suggests you consider whether the caption should form part of the h1 or not. So for some pages it might sit within, for some, it might sit separately. Which you choose would come down to what you think makes the most sense for screen reader users. Sometimes it'll be important to include the caption in the h1, sometimes it's less relevant and can sit outside.