-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Closed
Labels
[Feature] Block bindings[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).Changes that impact accessibility and need corresponding review (e.g. markup changes).[Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended
Description
Description
I followed instructions from WordPress/wordpress-develop#5888 to test the connected blocks in the editor UI. I see that, so far, components in the editor UI that show the connected values are disabled by the means of a disabled
HTML attribute.
For example, when an image alt
attribute is connected to a post meta source, the alternative text
textarea in the Settings panel is disabled:
There's a few problem with this:
- The whole concept of connected attributes is that their content comes from another source. As such, they cannot be edited. Semantically, they are read-only attributes and the UI should communicate that.
- Disabled controls cannot be focused. As such, their value can't be selected and copied.
- Since disabled controls aren't required to have a sufficient color contrawt ration, they're styled in a way that their content is eay less readable. However, users may still want to read their value.
- Screen readers may ignore the associated descriptive text
Connected to a custom field
as it doesn't make sense to provide a description for a control that is disabled in the first place. In my testing, Safari + VoiceOver don't make the description available to users.
Rather, the control should be readonly
.
- The
readonly
attribute better communicates the attribute cannot be edited but it's still functional. - The value can be selected and copied.
- The applied styling makes the value way more readable (see screenshot below).
- Screen readers do provide the associated description of
readonly
controls.
Screenshot with readonly
instead of disabled
:
In my testing I've gone only through the image alt attribute so far but this applies to any other control of the editor that shows connected values.
Step-by-step reproduction instructions
- Follow instructions from Add the Block Bindings API wordpress-develop#5888 to make an image block alt text connected to a post meta.
- Select the Image block.
- Observe the Alternative Text control (a textarea element) in the Settings sidebar is disabled.
Screenshots, screen recording, code snippet
No response
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
Metadata
Metadata
Assignees
Labels
[Feature] Block bindings[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).Changes that impact accessibility and need corresponding review (e.g. markup changes).[Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended