The required star indicates to sighted individuals that a field is required. The star itself is an <abbr> tag with hidden text that indicates that this star means that a field is required.
When navigating a form with a screen reader, the star character is read, not the <abbr> tag title. So the Title field is read as: "Title star".
When the required star was introduced, we didn't have a good way to indicate requireness on a form item to non-visual user agents. We do now though with aria-required (documentation for aria-required).
So, we can now visually mark the field as required without the added text because the aria-required attribute will indicate to screen reading user agents the requiredness of the field.
Remove theme_form_required_marker and just use CSS to indicate a required field.
Propose a patch
We will no longer have awkwardly labeled required form items when being read by screen reading user agents.
The theme_form_required_marker theme function will be eliminated.
| Comment | File | Size | Author |
|---|---|---|---|
| #10 | Screen Shot 2013-11-17 at 3.10.28 PM.png | 517.31 KB | mgifford |
| #7 | interdiff.txt | 3.17 KB | jessebeach |
| #7 | make-star-silent-2121775-7.patch | 3.69 KB | jessebeach |
| #1 | make-star-silent-2121775-1.patch | 1.04 KB | jessebeach |
| Create_Article___Drupal_D8_Dev_and_Active_Child_-_Rapor_-_EP_-_My_Library_-_Google_Play.png | 156.75 KB | jessebeach |
Comments
Comment #1
jessebeach commentedI took a slightly different path with this issue -- namely, changing as little code as possible.
I've just added an
aria-hiddenattribute to the required marker and removed thetitleattribute. The title doesn't get read by screen reading user agents. But the star character does, so usingaria-hiddenmakes it silent. Now, instead of this being read for the required title of a node:title star required edit-textthis gets read:
title required edit-text.Comment #3
Bojhan commentedAhh, the test fails should be relatively easy to resolve they are all kinda weird assertions.
Comment #4
mgiffordThere were other options considered for D7 other than *, but it is a commonly understood one http://simplyaccessible.com/article/required-fields-right/
It might be nicer to have (required) to be read aloud, but since we do have access to required elements from HTML5, we could consider other indicators too.
Comment #5
anandkp commentedHi @everyone!
I'd love to take a gander at this! I've done some A11y in the past. I feel that this particular information is best served as real text for assistive tech. and hidden by CSS for visual users.
Will come up with a patch in a day or so.
Thanks!
Comment #6
jessebeach commentedIn the example given in the issue description, with the patch applied, VoiceOver reads the field as:
Title required edit-textBecause the field has the label "Title", it has the HTML5
requiredattribute, thearia-required="true"equivalent, and it is an input of type text.I feel that if we put text here, we're going to compete with the native Accessibility API that uses the HTML5 required attribute to indicate requiredness.
The required attribute and the aria-required attributes, in combo, function in all major screen readers: http://john.foliot.ca/required-inputs/
In sum, I don't think we need to make this issue more complicated. I just want screen readers to stop say "{label} star" and just say "{label}" whenever they read a required field.
Reviews to that end would be helpful. @alexpott brought up "qwerty" issue here. Namely, that perhaps screen reader users have gotten accustom to the bad pattern of hearing "star" spoken and using that to find required fields. If that's the case, I really hope we can retire that bad pattern and just use the standard required attributes from here on out.
Comment #7
jessebeach commentedI fixed the tests. They were checking against specific markup. Simple fixes.
Comment #8
anandkp commentedHi @jessebeach!
I'd totally forgotten about the HTML5 "required" attribute! I totally agree with you, that will serve the needs here the best.
Regarding the "qwerty" issue, I agree that it's a non-issue because having the required attribute makes screen readers announce that a field is required and that's pretty clear.
I'm working off of Ubuntu currently with only Orca installed. I'll give the pattern a try and see what I hear then report back.
Thanks!
Comment #9
anandkp commentedHi again!
Try as I could, Orca on Ubuntu 13.04 is unresponsive. It reads what it wants to and refuses to do anything I'd like it to. The modifier key (by default, INS and/or KB_Insert) + space didn't activate the GUI settings.
I found an issue logged about the exact same problem I'm facing here: http://askubuntu.com/questions/320505/cannot-find-orca-gui-based-setting....
Since I can't do anything more to help out with this, I'm unassigning this issue from myself.
Thanks for your efforts on this @jessebeach!
Comment #10
mgiffordI tested this in VoiceOver and it behaves as expected. It removes the mention of a * but clearly says that it is required text. I've attached a screenshot that shows what VoiceOver is telling me.
This has not been tested with NVDA or JAWS, but it should work the same way as HTML5 is definitely the bigger standard.
EDIT: @anandps - thanks for trying to test this with Orca. Very little testing has been done with that. I would have thought that http://www.chromevox.com would work with Linux, but if it does they don't talk about it.
Comment #11
alexpottNice fix - saw this in action @BADcamp - also this fixes the semantically incorrect use of abbr - * is not an abbreviation of required!
As we're changing markup we need a change notice.
Committed b5525ad and pushed to 8.x. Thanks!
Comment #12
jessebeach commentedIt's on my todo list to write a change notice for this.
Comment #13
jessebeach commentedChange notice added: https://drupal.org/node/2148315
Comment #14
jessebeach commentedComment #15
yched commentedNitpick: the title of the change notice reads as if we removed the star visually as well - which we haven't, right ?
Comment #17
xjmI updated the title of the change record for clarity and made it reference this issue.