V8: Accessibility improvements for textbox validation #5664
Conversation
…ntent header before any text is entered
…e visible to screen readers only
…d them. Note the "required" error message has not been changed to be heard by screen readers as they already hear this when in the textbox.
PR For latest changes
| overflow: hidden; | ||
| clip: rect(0,0,0,0); | ||
| border: 0; | ||
| } |
There was a problem hiding this comment.
@RachBreeze it seems this class is more or less identical with the class visually-hidden in this PR https://github.com/umbraco/Umbraco-CMS/pull/5544/files
The A11Y Project mention the visually-hidden.
https://a11yproject.com/posts/how-to-hide-content/
Not sure which one is preferable?
/cc @MMasey
There was a problem hiding this comment.
Hi @bjarnef sr-only is a naming convention in bootstrap (https://getbootstrap.com/docs/4.0/utilities/screenreaders/).
There are a three pull requests now for a screen reader only class this one and #5585 #5544
It might be worth just doing a PR for screen readonly class and then updating these PRs to reference that class. What do you think @MMasey and @nul800sebastiaan?
There was a problem hiding this comment.
Hi @bjarnef and @MMasey
I have a PR pending which will just be CSS amends, the class can either be visually-hidden or sr-only
Indeed almost did the PR with visually-hidden . However bootstrap also has sr-only-focusable class which
will ensure that the link becomes visible once focused (for sighted keyboard users).
Happy to call the class either, the list of issues on #5277 does require a class that supports hidden text for screen readers. It would be good to standardise on one name, and get a PR accepted with just that class in. Let me know which you prefer and I will submit a PR for that.
Cheers
Rachel
|
Hey @RachBreeze, shall we go with |
|
HI @MMasey Just a quick update I am very close to submitting a PR with just They key blocker on me submitting this a PR for this is when you consider the use for adding
This is how bootstrap says to use the screen reader classes (https://getbootstrap.com/docs/4.0/utilities/screenreaders/)
I also understand the reason for arguing for dissociating from a specific framework. But various stats sites have the figures for bootstrap usage at somewhere between 53 and 72%. Cheers |
|
Hey @RachBreeze, I think I managed to miss the part about the focusable class so my bad on that. I’m happy to go with |
|
Hi @MMasey |
|
I totally missed this conversation in relation to #5544 I've merged #5544 already but happy to remove the In the mean time, there's no objection to merge this one as well, is there @RachBreeze ? |
|
Ah, actually there is 2 usages in 5544 - but they could be updated to |
|
Hi @nul800sebastiaan no there's no objection to merging this thank you very much |
|
And yes I believe @MMasey was happy for the 2 instances in 5544 to be updated to sr-only |
|
Cool, I'll get that updated! |
|
This all checks out, great job @RachBreeze ! 🎖 |
|
Cheers for reviewing and merging @nul800sebastiaan |
A bug in Angular is triggering "invalid" prompt to be played when a user tabs into an empty text box prior to entering any information, this PR removes that prompt.
On reviewing error messages after saving, it's not possible for a screen reader user to determine what the errors are. So this PR also continues to use the sr-only class first introduced in #5585 to allow error messages to be styled for users of both screenreaders and browsers.
Note the sr-only class is deliberately missing from the required error message, as screen readers hear a textbox is required when they tab into it