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

Add aria-expanded and aria-label to the sidebar section toggles. #1113

Merged
merged 1 commit into from
Jun 10, 2017

Conversation

afercia
Copy link
Contributor

@afercia afercia commented Jun 10, 2017

This PR tries to improve the accessibility of the expandable section toggle buttons in the sidebar:

  • adds an aria-expanded attribute
  • adds an aria-label: sprintf( __( 'Open section: %s' ), title )

I'm intentionally avoiding to use the word "Toggle" because it's terribly difficult to translate in some languages, see core Trac ticket: https://core.trac.wordpress.org/ticket/34753

Also, one interesting consideration about the label: it's a bit controversial if the label text should be updated depending on the expanded/collapsed state. I've seen recommendations and examples for both ways. I think the best option depends on a case by case basis. In this specific case I'd say it makes perfectly sense to not change the label because aria-expanded already complements the label text; screen readers will announce the label + the state, for example:

Open section: Featured image, collapsed
Open section: Featured image, expanded
in this case, changing the label to
Close section: Featured image, expanded
could be even confusing.

Screenshots:

screen shot 2017-06-10 at 15 36 16

screen shot 2017-06-10 at 15 36 23

Note: safari displays the icons a bit misaligned, that's unrelated and already addressed in a separate issue see #1103

Fixes #1112

Copy link
Member

@ellatrix ellatrix left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is working great! 👍

@afercia
Copy link
Contributor Author

afercia commented Jun 10, 2017

@iseulde thanks for reviewing!

@afercia afercia merged commit 10db8cc into master Jun 10, 2017
@afercia afercia deleted the update/sidebar-sections-toggles-a11y branch June 10, 2017 14:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants