search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.57k stars 4.22k forks source link

Very difficult for non-visual user to obtain visual style information #48056

Open joedolson opened 1 year ago

joedolson commented 1 year ago

What problem does this address?

It's difficult to get non-visual feedback about what a block currently looks like. While blind users may not be heavy users of global styles, they should be equally able to discover the basic parameters of what blocks look like.

It's currently extremely difficult for them to find out what the current settings are - tons of tabbing around just to potentially discover that the existing settings are what you wanted anyway.

What is your proposed solution?

A styles summary might be useful, although I think that making navigation and discovery more workable is more important. E.g., a button that opens a model with a simple list of Style/current setting. This would also be a great place to provide persistent notices like invalid color contrast warnings.

Another possibility is making the preview in contexts like the Stylebook include text that describes the current appearance of the text. E.g., a heading level 1 preview text like "Heading Level 1 in red (#ff0000) at 2.75rem using Comic Sans".

@annezazu

annezazu commented 1 year ago

Thanks so much for opening this up @joedolson, along with the other issues. Calling on a crew to dive in and adding to the 6.2 board @tellthemachines @apeatling @andrewserong.

andrewserong commented 1 year ago

Oh, this is a really interesting one. Whatever the solution that gets explored, I think it'd be good to come up with something that has a visual component to it, too — as has been discussed in other issues, it can be difficult for all users to determine whether or not block-level styles have been adjusted in global styles, and it might be cool to see if there's a way to flag within the style book what customisations are in place. So I quite like the idea of text or other clues that describe the current block's appearance in some way (or that styles have been customised) 👍

I've added the "Needs Design Feedback" label. For quick reference, here's a screenshot of the current state of the Style Book:

image

Question for further design feedback:

joedolson commented 1 year ago

For a screen reader, there's a need to know what the styles are whether they've changed or not; but definitely for all users it would be extremely valuable to be able to identify styles that have been modified.

For finding modified styles, that could be as simple as a addendum to the block name (HEADINGS [* modified]), or something to that effect.

In the current structure, each block in the Style Book is a single button, which doesn't leave a lot of options for adding more information. I can see the benefit to having a large clickable area for users to use to select the block. If the description was inside the button, it would be lost because it's overridden by the aria-label. If it's outside the button.

If the descriptive information was in the Styles panel, and the navigation was addressed for getting back and forth between the two interfaces (as discussed in #48054), then this description could be at the top of the Styles panel when a block is selected.

ndiego commented 1 year ago

Given that WordPress 6.3 Beta 1 is tomorrow and there has been no action on this issue, I am going to remove it from the 6.3 Project Board.