Without CSS available the marker for required fields the star is unavailble. #2921627: Drupal should not use full CSS required marker in forms according to WCAG 2.0 is solving that problem. With CSS available a field label is for example Title *, with CSS unavailable the field label is now Title (required). During the review it was agreed on to also fix a redundant detail in the context labels for required fields in the aural interface. Problem is, fields are already labeled required programmatically by the required attribute, the additionally announced star can rather be considered redundant noise inducing confusion - the announcement in VoiceOver goes something like Title *, required, edit text (see requiredClaro.mp4). Problem is, the latest commit on the MR excluding the marker from the aural interface only provides the fix for Claro (see claro.mp4) and Olivero. In Gin the star is still getting announced. Per @kentr the changes for Claro are currently getting overridden by Gin in https://git.drupalcode.org/project/gin/-/blob/5.0.x/dist/css/base/gin.cs... . So this followup for #2921627: Drupal should not use full CSS required marker in forms according to WCAG 2.0 is required for Gin.
Screenshot showing the MR from #2921627: Drupal should not use full CSS required marker in forms according to WCAG 2.0 for the star / asterisk required marker, with Claro's CSS and the Gin override:
node/add/articleFollow the approach taken for core and simply exclude the * from the aural interface.
#2921627: Drupal should not use full CSS required marker in forms according to WCAG 2.0 currently uses an empty string as alternative text for the content property (description of alternative text on MDN).
Proposal:
In the corresponding Gin SCSS, change:
content: "*";
to:
content: "*" / "";
I'm guessing the place to change this is styles/base/_form.scss:436.
Then rebuild the CSS to generate dist/css/base/gin.css.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | issue-3566851-2-screenshot-of-override.jpg | 132.86 KB | kentr |
| claro.mp4 | 263.32 KB | rkoller | |
| requiredClaro.mp4 | 353.51 KB | rkoller |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
kentr commentedI added to the IS.
FYI, #2921627: Drupal should not use full CSS required marker in forms according to WCAG 2.0 is prioritized as Major. This issue is just regarding the star / asterisk in the aural interface, so I don't know if it should be Major or not.
If the proposed resolution is acceptable to the maintainers, this could be a novice task.
Comment #3
rkollerthank you for the additions! in particular the screenshot illustrates the case pretty well.
in regard of major or not, i would probably rather lean towards a normal priority. the major priority on the other issue is because of the required state is unavailable with css being unavailable - that main problem is getting fixed for claro, olivero and gin in the other issue. the redundancy with the star just got added close to the end that is now getting fixed in this issue as well for gin.
Comment #6
harjyottkaurr commentedI have followed the steps outlined in the issue and opened a merge request with the fix on branch 3566851-avoid-announcing-the, to prevent the required field asterisk from being announced. Marking this as needs review.
Comment #7
kentr commentedRelated: #3171835: Field Groups marked as required are missing red asterisk.
I noted there that a followup for Gin may be necessary.
Comment #8
jurgenhaasShould this issue be postponed until the related issue in core is being merged? Or is that independent?
Comment #9
rkolleri guess the related issue in core wouldnt be a blocker for this issue since as @kentr illustrated gin is overriding the css in question anyway. buuuuut i've just checked, i suppose #2852874: Set the required state for all fields in Core in the Accessibility Object Model (AOM) is rather the problem, that the file field is missing the programmatic identification as a required field. THAT would be the bigger problem. just having the * announced is already not correct at all. but with this and the related MR getting even the star removed and at the same time dont have the programmatic identification would be a serious problem. and i just took time, installed all the available fields in core and created a content type requiring each of the available field. it "looks" like there are more fields aside the file field that are missing the programmatic identification.
but i have to recheck those to be entirely sure. but the required attributes have to be in place before the stars can be removed in the aural interface. will recheck and discuss the problem space over in slack and then update the issues accordingly after a consensus i reached.
Comment #10
rkollerdue to the reason outlined in #9 i've set the status to postponed on #2852874: Set the required state for all fields in Core in the Accessibility Object Model (AOM) until all fields that are missing a required attribute in core are getting fixed.