feat: separate form-field-multiple-label from label rule #1226
Conversation
There was a problem hiding this comment.
I've set up a codepen to do some screenreader testing for this as well:
https://codepen.io/wilcofiers/pen/rQxEvL
Did some testing, NVDA works correctly, JAWS and VO have issues:
- VoiceOver in Safari doesn't announce second labels in any of the 3 scenarios
- VoiceOver in Chrome announces both labels in example 3
- JAWS in IE and Firefox announced both labels in example 3
The most prominent one is VO, which doesn't announce multiple labels at all. That COULD be considered an accessibility support failure. @marcysutton do you think we should fail this under WCAG, just for VoiceOver or should we just make this a best practice?
lib/rules/multiple-label.json
Outdated
| @@ -0,0 +1,20 @@ | |||
| { | |||
| "id": "multiple-label", | |||
There was a problem hiding this comment.
I'm inclined to name this something like "form-field-multiple-labels"?
doc/rule-descriptions.md
Outdated
| @@ -56,6 +56,7 @@ | |||
| | meta-refresh | Ensures <meta http-equiv="refresh"> is not used | Critical | cat.time, wcag2a, wcag2aaa, wcag221, wcag224, wcag325 | true | | |||
| | meta-viewport-large | Ensures <meta name="viewport"> can scale a significant amount | Minor | cat.sensory-and-visual-cues, best-practice | true | | |||
| | meta-viewport | Ensures <meta name="viewport"> does not disable text scaling and zooming | Critical | cat.sensory-and-visual-cues, wcag2aa, wcag144 | true | | |||
| | multiple-label | Ensures form element does not have multiple label elements | Serious | best-practice, cat.forms, wcag2a, wcag332 | true | | |||
There was a problem hiding this comment.
I think we should change the impact to "moderate" for this. Best practices should not have an impact that is serious or critical. People don't like it when we do that :-)
|
|
||
| <label for="fail3" id="l1">label one</label> | ||
| <label for="fail3">label two</label> | ||
| <input type="checkbox" id="fail3" aria-labelledby="l1"> |
There was a problem hiding this comment.
Should add tests for:
- implicit + explicit label
- multiple implicit labels
- select elements
jeeyyy
changed the title
jeeyyy
changed the title
This PR does the below:
multiple-labelcheck as a part oflabelrule.multiple-labelwhich is tagged asbest-practice.Closes issue:
Reviewer checks
Required fields, to be filled out by PR reviewer(s)