Skip to content
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 the new block inserter "Tips" semantics #22863

Closed
afercia opened this issue Jun 3, 2020 · 3 comments
Closed

Improve the new block inserter "Tips" semantics #22863

afercia opened this issue Jun 3, 2020 · 3 comments
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Good First Issue An issue that's suitable for someone looking to contribute for the first time

Comments

@afercia
Copy link
Contributor

afercia commented Jun 3, 2020

Describe the bug
In the new block inserter, some "tips" are displayed at the bottom of the inserter:

Screenshot 2020-06-03 at 17 29 36

The tips text is just text within a paragraph element. There's nothing to explain to non-sighted users what this text actually is.

For example, screen reader users navigating the inserter content will find at some point some text that says:

"Change a block's type by pressing the block icon on the toolbar."

At the very least, this text should have other text befor it to explain what it is. Preferably a (visually hidden) heading. See also #22859 for the importance of headings.

Also: related to the tips content: for non sighted users it doesn't make much sense and I'd say it's also slightly unfair to refer to a "block icon" to press, as they can't see what icon this message refers to

Any instruction on usage needs to avoid references to visual aspect, position, etc. as they're things non-sighted users can't perceive. For this reason, I'd like to recommend also to review all the messages used as tips and refactor them in a way that they can be understood by everyone.

To reproduce

  • install and activate the Gutenberg plugin 8.2.1
  • edit a post
  • open the main inserter
  • see the Tips at the bottom of the inserter

Expected behavior
The tips to be preceeded by a heading, as any relevant content section should be identified by a heading.

Editor version (please complete the following information):

  • WordPress version: 5.4
  • Gutenberg plugin 8.2.1
@afercia afercia added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Feature] Inserter The main way to insert blocks using the + button in the editing interface labels Jun 3, 2020
@youknowriad youknowriad added the Good First Issue An issue that's suitable for someone looking to contribute for the first time label Jun 4, 2020
gaambo pushed a commit to gaambo/gutenberg that referenced this issue Jun 4, 2020
@gaambo
Copy link
Contributor

gaambo commented Jun 4, 2020

Hi, first-time contributor here - I just added a PR to add a heading wrapped in a VisuallyHidden component. Since in #22859 @afercia mentioned the headlines should be h2 I chose a h2 here as well.

I've added a copy which probably needs review and translation - is there any way I need to add this?
I hope the VisuallyHidden component is the correct one - just seemed naturally to me.

Happy awaiting any feedback since this is my first contribution during WCEU contributor day 👍

@afercia
Copy link
Contributor Author

afercia commented Jun 4, 2020

Thanks @gaambo! I left a comment on your PR.

@ZebulanStanphill
Copy link
Member

Fixed by #22898.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Good First Issue An issue that's suitable for someone looking to contribute for the first time
Projects
None yet
Development

No branches or pull requests

4 participants