Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Move error message and hint out of labels and legends #681
This PR moves error messages and hints out of legends and labels, instead associating them with the input using
Co-authored with @36degrees.
For question pages that follow the 'one-thing-per-page' format, the question being asked functions as both the label for the question and the H1 for the page.
This was previously achieved by putting the question in the H1 but duplicating it within a visually hidden label or legend. This was functional, but resulted in the question being read twice by screen readers. Anika did a lot of research into this and made changes to Elements to remove the duplication.
The way this currently works is:
The reason that the nesting differs is that fieldsets allow 'phrasing content and headings' as permitted content (since w3c/html#724) but labels only allow for 'phrasing content', so a heading inside a label is technically invalid.
There are a few issues that we would like to address to make this approach work correctly in GOV.UK Frontend:
Having explored a number of options (including questioning whether the HTML spec should allow headings inside labels), we've settled on moving the hint and error message outside of the label / legend and associating them with
Unfortunately Voiceover on macOS will not announce the hint or error message when focussing the field. This is not ideal, but every approach (including the current approach of nesting them inside the label) had issues in at least one combination of technologies, so we have opted to go with the approach that seemed the most 'semantically correct', which is to treat the error message and hints as part of the 'description' of the field as per the ARIA spec:
We considered using different approaches for different scenarios (for example, only using
To be done in future PRs:
Appendix: Results of testing with assistive technologies
Current approach (nesting error and hint inside of legend or label)
Great and thorough work, well done!
One thing I already mentioned to Oli... There are generally three cases to test not just two.
I believe you haven't tested the latter. It might make a difference or it might not. But I think it makes sense to check that as well, especially regarding where the
Good call @selfthinker! In my naivety, I thought any input, regardless its type, will be treated similarly by the ATs. @36degrees and I did a round of tests today on the date input example, and it turns out it's not the case with JAWS - which for the date input example doesn't announce the hint and error message when landing on the input fields, despite the fact that they are being referred in the describedby attribute. We'll think about workarounds for JAWS to be able to pick them up.
Update: adding a redundant
@nickcolley tests to make sure aria-describedby contains both the hint and the error message and in the right order might be a good addition. Also, accessibility criteria should be added, but I'm not sure will get into this PR until we define generic criterias. I would thumb up your comment, but I can't since it's a review :)
There's nothing stopping us from adding additional information right now. https://github.com/alphagov/govuk-frontend/search?utf8=%E2%9C%93&q=accessibilityCriteria&type=
Would be good to have this since this is fairly nuanced.
I've pushed a change that explicitly adds the
Adding the group role to the fieldset component would make the output overly verbose for radio buttons or checkboxes - which are otherwise working fine already.
We've also made a first stab at some accessibility criteria and added tests to ensure that hint and error message are both associated correctly when they are both present.
We haven't been able to make Voiceover on macOS read the error message and hint when focussing the field. It doesn't read the description for the fieldset. We've filed a bug with Apple as we don't think this is correct.
However, the error message is available as part of the error summary component (which acts as an alert, so should always be announced to the user), and both the hint and error message can be accessed by 'going out of' the input (ctrl-option-shift + up-arrow) which focuses the fieldset.
This change also gives us a number of benefits. It:
With that in mind, we're going to merge this anyway.