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 panel toggle aria labels #2376

Closed
afercia opened this issue Aug 11, 2017 · 3 comments
Closed

Improve the panel toggle aria labels #2376

afercia opened this issue Aug 11, 2017 · 3 comments
Labels
[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 Aug 11, 2017

The panel toggles in the sidebar:

screen shot 2017-08-11 at 19 32 40

are buttons with aria-label and aria-expanded attributes. The current text used for the aria-labels prepends "Open section: " to the panel titles. This could be improved a bit because the combined effect of the text and aria-expanded state is a bit weird. Depending on the state, they are announced as, for example:
Open section: Excerpt collapsed
Open section: Excerpt expanded

where the second message doesn't make much sense. The Customizer uses "Toggle section:" but, unfortunately, "toggle" is hard to translate in many languages.

Maybe use just "Section: "?

@afercia afercia added [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 labels Aug 11, 2017
@joedolson
Copy link
Contributor

I think that the entire aria label should be removed. I don't think that "Section" is necessary, as the fact that it's a panel that can be collapsed and expanded is inherently communicated by the aria-expanded attribute. Knowing it's a "Section" doesn't give a user any additional information - they would still have to expand the panel to discover what's inside it.

Arguably, you could use "Settings" to convey that there are settings inside the panel, which might be useful - however, I don't think it's necessary.

Regardless, I absolutely think that dropping "Open" is worthwhile, if the attribute is kept at all - it's confusing, since the control is not always used to open the panel.

@afercia
Copy link
Contributor Author

afercia commented Aug 29, 2017

Just noticed the label prop is also wrong and actually produces a label attribute in the rendered HTML, which is thus invalid:
<button type="button" aria-expanded="true" label="Open section: Featured image" ...

@afercia
Copy link
Contributor Author

afercia commented Aug 29, 2017

Just tested removing the aria-labels and I'd say it works pretty well: simpler and more effective.

I'd also consider to expand the text of the "Document" and "Block" buttons at the top of the sidebar:

screen shot 2017-08-29 at 17 22 09

adding two aria-labels "Document settings" and "Block settings" can help clarify it's all about settings. After all, users land on the sidebar (or, ideally they should land on it) after they press the "Settings" button, so clarifying that "Document" and "Block" relate to two main settings sections could help.

ceyhun pushed a commit that referenced this issue Jun 17, 2020
Fix issues with gradients on Button Block and resetting themes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[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

2 participants