Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
De-duplicate legends/headings #507
What problem does the pull request solve?
When we have one thing per page, our current pattern is to let the h1 be the question and then repeat but visually hide it in the legend (or label). That means screen readers will read the question twice, which is not a proper barrier but annoying and gets raised as an issue again and again, e.g. in #320 or on the cross-government accessibility mailinglist.
This changes that by moving the h1 into the legend. That creates the following issues:
What else could solve this?
I tested some other ways of fixing this issue, some of which have been suggested by the cross-government accessibility community in the thread mentioned above:
How has this been tested?
I tested this in various old and new browsers via BrowserStack and it's not causing any issues anywhere. I have also built a local version with the question being a label for a text input and the label being in an h1. That didn't cause an issue either.
I tested in a couple of screen readers:
Accessibility testing tools
I also wanted to make sure that accessibility testing tools wouldn't report any unnecessary issues, so tested this in aXe, Tenon, AChecker, WAVE, FAE, EIII, HTML_CodeSniffer, SortSite, Google A11y Dev Tools and Asqatasun. And only EIII came back with one fail for the legend ("The name of the form control is not set correctly"). As I mentioned above, all the other viable solutions failed way more times than this solution.
How to test yourself
If you want to test this solution yourself, I'd suggest to not use this branch because it only includes one single type of implementation, i.e. a single question for radio buttons with a legend. I have tested all the difference scenarios I could think of, including when the question is for a text input, i.e. it would need to be in a label not in a legend. Although I have tested that locally within a version of the prototype kit with GOV.UK branding and Elements styles etc, I have created three separate unstyled JSbin version, so you can test just the markup independently:
What is potentially missing? / Open questions
What type of change is it?
Has the documentation been updated?
Presumably in a circumstance where the H1 and the legend text differ we'd still advocate having both. Not sure what would justify the difference though.
I've assumed this, but wanted to double check: Does the output still look identical?
This is a really nice PR that answers all of the questions I had about this pattern.
In a "one thing per page" pattern, the h1 and the legend should be the same. If you have more things per page, then they should obviously be different as the h1 should reflect what the page is about and the legend should be the question for each group of things. In that case they would both be visible, so would not be the same pattern that this is about (where originally the legend was visually hidden). We have other examples where both the h1 and the legend are visible and they're both different.
Yes, the output sill looks identical. That's what I meant when I wrote
Let me challenge: Why does the H1 have to match the question?
What happens if there is no fieldset and legend but a visually hidden label and a visible form field? Would the h1 go inside the label?
Is this correct?
Also, for page titles and h1s, HMRC's guidance is they should match. See hmrc/design-patterns#90
If I understand @jbuller correctly, I think he questions the pattern itself to have only the question visible not this code interpretation of it?
The h1 inside a label would be invalid HTML, so it needs to be the other way around.