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 block toolbar aria-label #11456

Merged
merged 2 commits into from Nov 14, 2018

Conversation

Projects
None yet
3 participants
@afercia
Contributor

afercia commented Nov 3, 2018

See #11155 and #2387.

The blocks toolbar is currently labelled as "Block toolbar". However, screen readers already announce "toolbar" when they encounter a role="toolbar" so what they actually announce is:

Block toolbar, toolbar

screenshot 101

For consistency with the new dynamic aria-label implemented #11155 I'd propose to change it to "Block tools".

This way, when the Unified Toolbar setting is off:

  • the top toolbar is labelled "Document tools"
  • the blocks toolbar is labelled "Block tools"

And when the Unified Toolbar setting is on:

  • the top toolbar is labelled "Document and block tools"
@@ -13,7 +13,7 @@ function BlockContextualToolbar() {
return (
<NavigableToolbar
className="editor-block-contextual-toolbar"
aria-label={ __( 'Block Toolbar' ) }
aria-label={ __( 'Block tools' ) }

This comment has been minimized.

@youknowriad

youknowriad Nov 3, 2018

Contributor

When do we use title case? I'm confused? We should clarify these guidelines in a doc.

This comment has been minimized.

@afercia

afercia Nov 4, 2018

Contributor

I'd agree for the need of guidelines. However this is invisible text and only announced by screen readers. Uppercase letters tend to be announced by screen readers increasing the voice "pitch" especially when reading letter by letter. We'd want to avoid that. I'd recommend to use normal sentence case for any invisible text meant for screen readers usage.

Now that I think at that, this and the aria-labels in #11155 need translators comments, I'm going to add them. See similar comments (though they should be improved a bit):

/* translators: accessibility text for the publish landmark region. */

/* translators: accessibility text for the content landmark region. */

/* translators: accessibility text for the top bar landmark region. */

// translators: ARIA label for the Document Settings sidebar tab, selected.
[ __( 'Document settings (selected)' ), 'is-active' ] :
// translators: ARIA label for the Document Settings sidebar tab, not selected.
[ __( 'Document settings' ), '' ];
const [ blockAriaLabel, blockActiveClass ] = sidebarName === 'edit-post/block' ?
// translators: ARIA label for the Block Settings sidebar tab, selected.
[ __( 'Block settings (selected)' ), 'is-active' ] :
// translators: ARIA label for the Block Settings sidebar tab, not selected.
[ __( 'Block settings' ), '' ];

// translators: accessibility label for external links, where the argument is the link text

@tofumatt

This is much better and the translator comments are great, thanks! 👍

@tofumatt tofumatt merged commit 2d68c72 into master Nov 14, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@tofumatt tofumatt added this to the 4.4 milestone Nov 14, 2018

@youknowriad youknowriad deleted the update/block-toolbar-better-aria-label branch Nov 15, 2018

grey-rsi pushed a commit to OnTheGoSystems/gutenberg that referenced this pull request Nov 22, 2018

Improve the block toolbar aria-label (WordPress#11456)
* Improve the blocks toolbar aria-label.

* Add translators comments.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment