2412 heading sizes in government frontend

davidtrussler commented 5 months ago

By way of an investigation into heading sizes, and a suggested way of dealing with inconsistencies and accessibility issues, I have made some small suggested changes to heading levels and sizes to make the three manuals headings consistent, based on the design here.

Initially this brought two of these ("Content design: planning, writing and managing content" and "Employment Status Manual") into line with the recently updated "Complete the school census" page.

This became problematic though because the <h3> elements on the two pages changed here are part of the accordion component and cannot (or maybe should not) be changed in terms of the font size. My feeling is that it should not be a problem to have different sized <h3>s across these pages since some of those are functioning as part of the accordion.

Before	After	Changes
		Top heading ("Content design: planning, writing and managing content") retained as `<h2>` and font size reduced to 27px `<h1>` ("Updates: Content design: planning, writing and managing content") updated (slightly) to align content with page title `<h2>` ("2023") reduced font size from 36px to 27px
		Top heading ("Employment Status Manual") retained as `<h2>` and font size reduced to 27px `<h1>` ("Updates: Employment Status Manual") updated to align content with page title `<h2>` ("2023") reduced font size from 36px to 27px
		Top heading ("Complete the school census") changed to `<h2>` and font size reduced to 27px `<h1>` ("Census dates") updated to align content with page title `<h2>` ("2023 to 2024 census dates") changed from 24px to 27px

maxgds commented 4 months ago

@davidtrussler @MartinJJones Sorry to undermine this work but I’m afraid it isn’t correct to move the H1 to the piece of content that you have. The H1 on the page should be the most specific thing about it, and ideally it should be unique across the site (though this is often impossible to achieve). The H1 and the page title (ie what shows in the tab, and is marked up with the <title> tag) should align. By making the H1 “Employment status manual” you are no longer matching the title, and if you were to match the title then the page would fail WCAG because both these pages would appear to be the same one: https://www.gov.uk/hmrc-internal-manuals/employment-status-manual https://www.gov.uk/hmrc-internal-manuals/employment-status-manual/updates

Effectively the manual is a book called “Employment Status Manual” but the page is the chapter about updates and the chapter title is more important. The H1 is one of the ways to orient screenreader users and things like search engines and disambiguate the pages. We generally try to start headings with the h1 first, but it’s not a WCAG fail if we don’t do that - see example 2 here: https://www.w3.org/WAI/tutorials/page-structure/headings/

I don't know if you might need to revisit the other piece of work referenced in light of this info.

There's no problem with applying relevant heading sizes, eg govuk-heading-m to the headings, though.

I think that although the accordion doesn't currently accept a font size change, that's only because we haven't needed to before. We can extend that component to add the necessary class to the span, leading to something like <span class="govuk-accordion__section-heading-text govuk-heading-s" id="default-id-3060d499-heading-1"> - I think this lies within the remit of what the design system advocates when it says "Structure section headings with the rest of the page", I think it has to both semantically and visually align with its surrounding content. However I'm not sure if this is necessary if you aren't moving the H1. Happy to chat through this and figure out next steps with you.

davidtrussler commented 4 months ago

@davidtrussler @MartinJJones Sorry to undermine this work but I’m afraid it isn’t correct to move the H1 to the piece of content that you have. The H1 on the page should be the most specific thing about it, and ideally it should be unique across the site (though this is often impossible to achieve). The H1 and the page title (ie what shows in the tab, and is marked up with the tag) should align. By making the H1 “Employment status manual” you are no longer matching the title, and if you were to match the title then the page would fail WCAG because both these pages would appear to be the same one: <a href="https://www.gov.uk/hmrc-internal-manuals/employment-status-manual">https://www.gov.uk/hmrc-internal-manuals/employment-status-manual</a> <a href="https://www.gov.uk/hmrc-internal-manuals/employment-status-manual/updates">https://www.gov.uk/hmrc-internal-manuals/employment-status-manual/updates</a></p> <p>Effectively the manual is a book called “Employment Status Manual” but the page is the chapter about updates and the chapter title is more important. The H1 is one of the ways to orient screenreader users and things like search engines and disambiguate the pages. We generally try to start headings with the h1 first, but it’s not a WCAG fail if we don’t do that - see example 2 here: <a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">https://www.w3.org/WAI/tutorials/page-structure/headings/</a></p> <p>I don't know if you might need to revisit the other piece of work referenced in light of this info.</p> <p>There's no problem with applying relevant heading sizes, eg govuk-heading-m to the headings, though.</p> <p>I think that although the accordion doesn't currently accept a font size change, that's only because we haven't needed to before. We can extend that component to add the necessary class to the span, leading to something like - I think this lies within the remit of what the design system advocates when it says "Structure section headings with the rest of the page", I think it has to both semantically and visually align with its surrounding content. However I'm not sure if this is necessary if you aren't moving the H1. Happy to chat through this and figure out next steps with you.</p> </blockquote> <p>@maxgds Thanks for that - makes sense. I've updated this a bit (reflected in the screenshots and stuff in the "changes" column) to hopefully address it in line with what you are saying, if I have understood correctly. In essence this is to change the top heading to an <code><h2></code> and update the content of the <code><h1></code> to more closely align it content-wise with the page title. The latter might be something for content to check but it should at least be unique in each case I think.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/maxgds"><img src="https://avatars.githubusercontent.com/u/31649453?v=4" />maxgds</a> commented <strong> 4 months ago</strong> </div> <div class="markdown-body"> <blockquote> <p>@maxgds Thanks for that - makes sense. I've updated this a bit (reflected in the screenshots and stuff in the "changes" column) to hopefully address it in line with what you are saying, if I have understood correctly. In essence this is to change the top heading to an <code><h2></code> and update the content of the <code><h1></code> to more closely align it content-wise with the page title. The latter might be something for content to check but it should at least be unique in each case I think.</p> </blockquote> <p>Thanks for the reworking. I think it is good that we've brought consistency to the way the H1s are shown, but it might need to be checked with content people to ensure that they're happy with the change to the Census dates format. Although we use a "-" in the <code><title></code> tag I think the ":" is probably more appropriate for the <code><H1></code> - again I'd suggest checking with a content designer. Ask if we might be better to put at ":" into the <code><title></code> or if the mismatch that exists is ok.</p> <p>The font size changes outside of the "banner" (for want of a better term) are what was most important here. I can see you've adjusted the banner heading font to match. In discussion with Anika she felt that what was inside the banner was different enough from the body copy that it didn't need to change size, and now you've changed it I think it does look a bit offbalanced. I'd check that change with a designer and see what they prefer. What's important is that the structure of the page is comprehensible both for screenreader users and sighted users - you can instinctively tell that the banner content is different from the rest of the page, almost a chunk of metadata, and the structure from there onwards flows with the sizes making sense, while the screenreader user gets a similar understanding from the h2 preceding the h1, and the heading levels being appropriately labelled. </p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

alphagov / government-frontend

2412 heading sizes in government frontend #3148