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

Regression: the new Block Inserter doesn't use headings to identify block sections any longer #22859

Closed
afercia opened this issue Jun 3, 2020 · 2 comments · Fixed by #22903
Closed
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 [Priority] High Used to indicate top priority items that need quick attention [Type] Regression Related to a regression in the latest release

Comments

@afercia
Copy link
Contributor

afercia commented Jun 3, 2020

Describe the bug
The new Block Inserter doesn't use headings to identify block sections any longer.

In the old inserter, each expandable panel was also a h2 heading.

Screenshot 2020-06-03 at 15 59 24

This greatly helped screen reader users to jump through the various blocks groups because headings are one of the main navigation mechanisms for screen readers.

In the new block inserter, the expandable panels are gone but what really impacts accessibility is that the blocks groups "titles" aren't headings any longer.

Screenshot 2020-06-03 at 15 58 24

These titles are just plain text with no semantics. Thus, screen reader users aren't able to jump through sections any longer.

I'm not sure what is the reasoning behind the headings removal, I'd appreciate anyone pointing me to the relevant discussion. On my side, I'd just like to note that it's 2020 and I'd appreciate if anyone would to their best to avoid to throw unsemantic text into the UI.

The new implementation uses just div and span elements for these text, which is, I'm sorry to say it, just not acceptable in a project that aims to be accessible.

<div class="block-editor-inserter__panel-header">
	<span class="block-editor-inserter__panel-title">Most used</span>
</div>

To reproduce

  • activate the Gutenberg plugini 8.2.1
  • open the main inserter
  • inspect the source in your browser's dev tools
  • observe the blocks groups titles aren't headings any longer

Expected behavior
The various blocks groups to be identified with a h2 heading.

Editor version (please complete the following information):

  • WordPress version: 5.4
  • Gutenberg plugin version 8.2.1

Note:
I consider this an accessibility regression and I'd like to kindly ask to not release the new block inserter in this state in WordPress 5.5. The headings should be restored first.

@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 [Type] Regression Related to a regression in the latest release labels Jun 3, 2020
@afercia
Copy link
Contributor Author

afercia commented Jun 3, 2020

Same applies to the new "Patterns" tab, where all the section titles are just unsemantic text. Headings would be very beneficial:

TEXT
HERO
COLUMNS
BUTTONS
GALLERY
FEATURES
TESTIMONIALS
UNCATEGORIZED

@ZebulanStanphill ZebulanStanphill added the [Priority] High Used to indicate top priority items that need quick attention label 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
Copy link
Contributor

gaambo commented Jun 4, 2020

I'd be happy to take a try at this, since I also just added a PR for #22863 and those seem connected.

gaambo pushed a commit to gaambo/gutenberg that referenced this issue Jun 4, 2020
gaambo pushed a commit to gaambo/gutenberg that referenced this issue Jun 4, 2020
youknowriad pushed a commit that referenced this issue Jun 5, 2020
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 [Priority] High Used to indicate top priority items that need quick attention [Type] Regression Related to a regression in the latest release
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants