-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve Placeholder instructions accessibility #42738
Comments
Thinking a bit more in depth, I'm not sure the Placeholder can render a Latest Posts block. When there are no published posts, the informative text is rendered within a fieldset: Calendar block. When there are no published posts, the informative text is rendered within a fieldset: Categories list and Reusable blocks. While the block is 'resolving', ie. still fetching content, the fieldset only contains a spinner: More importantly: to my understanding third party blocks could provide placeholder with any kind of content, even with nested forms and fieldsets, which is less than ideal. As there's no way to predict what kind of content will be within the placeholder, assuming a fieldset is hte most appropriate markup seems not ideal. |
Description
Follow-up to #38366
To make screen readers read out the Placeholder
instructions
text, #38366 changed the markup to wrap the contents in afieldset
, and the instructions in alegend
. There are a few problems with this approach:legend
element is meant to give thefieldset
an accessible name. It's not a place for generic instructions. Instead, it's meant to establish an association between the fieldset name and the control labels, to clarify the labels. A good explanation of correct usage is available on the GOV.UK blog at https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/I do understand the good intent of the change from #38366 as it's important to make sure important instructions are available to all users. However, I'd like to propose to explore a better solution.
Lastly, sometimes the Placeholder doesn't render any control but it still renders a fieldset and legend. That's basically a semantic
group
that doesn't actually group anything.See screenshots below to illustrate some cases, tested with VoiceOver and Safari.
Step-by-step reproduction instructions
Screenshots, screen recording, code snippet
Instructions read out twice when adding a block for the first time:
Table block: the Instructions text 'Insert a table for sharing data.' is repeated for each control, which is redundant and a bit pointless:
Audio block: the Instructions text 'Upload an audio file, pick one from your media library, or add one with a URL.' is repeated for each control:
Columns block (BlockVariationPicker): the Instructions text 'Select a variation to start with.'is repeated for each control:
Template part block: the Instructions text 'Choose an existing template part or create a new one.' is repeated for each control:
Table of Contents block: the fieldset is empty: it shouldn't be a fieldset in the first place:
Various media block: when the user doesn't have permission to upload media, the fieldset is empty and the legend is only used to show the text 'To edit this block, you need permission to upload media.'. This should be a notice rather than a fieldset + legend:
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes
The text was updated successfully, but these errors were encountered: