Colmjude

/ notes
Notes
A collection of thoughts, things I've learnt and things I want to remember

Headings, labels and legends

You can now safely use h1 elements inside a legend element or add a label element inside a h1 element.

Updated HTML spec.

This is good when you only have one thing per page, such as, asking for post code. Previously we might've had the h1 and the label have the same content but with the label visually hidden; fine when experiencing page visually but not so much if via a screen reader, e.g a heading and label with the text "What is your post code?" will be read twice.

Longer explanation on GOV.UK design system

Now fine

<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
  <h1 class="govuk-fieldset__heading">
    govuk-fieldset__legend--l
  </h1>
</legend>