Commits on Aug 17, 2024

1. Add heading level option to label component called headingLevel …

   This optional setting only works if the label is a page heading i.e `isPageHeading` is set to true.
   
   A HMPPS service had an external accessibility audit raised the following point on a few of it pages:
   
   > The form labels are styled to look like headings and stand out visually. While sighted users can identify headings based on larger font size and bold formatting, screen reader users rely on proper HTML markup to understand the structure of a page.
   
   > Screen reader users sometimes jump between the headings of the page to gain a better understanding of the structure and content on the page. The [WebAIM screen reader survey](https://webaim.org/projects/) has found that [headings are the number one means by which screen reader users get a sense of a complex page](https://webaim.org/projects/screenreadersurvey9/#finding). When headings are not available programmatically to users, it affects the time and effort needed to understand how the content is presented on the page. Furthermore, this creates a discrepancy between information available to a sighted individual and users relying on assistive technology.
   
   They suggested something like
   ```
   <h2>
       <label class="govuk-label govuk-label--m" for="myInputField">
           This is a h2 label
        </label>
   </h2>
   ```
   
   The problem is that the existing label component:
   
   1. It does support custom html, but that would place the headings inside the label means Inline elements would contain block level elements which is not valid
   2. Using isPageHeading, uses a hard coded h1 so cannot use that options
   
   These changes are backwards compatible by setting the heading level to 1.

   

   aliuk2012 committed Aug 17, 2024
   Configuration menu

   • View commit details
   • Copy full SHA for 4174095
   • Browse repository at this point

   Copy the full SHA

   4174095 View commit details

   Browse the repository at this point in the history