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 accessibility of foldable sidebar nav and imgproc #1028

Merged
merged 6 commits into from
Jun 30, 2022

Conversation

jasonday
Copy link
Contributor

The foldable sidebar nav is using max-height transitions to hide subnavs visually, but this approach does not hide visually hidden content from keyboard and screen reader users. Moving to a simple display: [block/none] toggle solves the issue.

See #1022

The foldable sidebar nav is using `max-height` transitions to hide subnavs visually, but this approach does not hide visually hidden content from keyboard and screen reader users. Moving to a simple `display: [block/none]` toggle solves the issue.
@google-cla
Copy link

google-cla bot commented May 26, 2022

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

To be more semantically aligned and to improve accessibility, I propose using <figure> and <figcaption> for images included in this manner, which creates a programmatic association between the image and the additional text, providing more context for screen readers
@jasonday jasonday changed the title Fixing docsy issue #1022 - accessibility of foldable sidebar nav Improve accessibility of foldable sidebar nav and imgproc May 26, 2022
@jasonday
Copy link
Contributor Author

jasonday commented May 26, 2022

#1005 Addresses imgproc accessibility. Uses <figure> and <figcaption> to provide a semantic relationship between the image and text.

@LisaFC
Copy link
Collaborator

LisaFC commented May 27, 2022

This LGTM, @narrenfrei do you want to take a look as you did a lot of the navbar work?

@LisaFC LisaFC merged commit 54e4cce into google:main Jun 30, 2022
fekete-robert pushed a commit to fekete-robert/docsy that referenced this pull request Sep 13, 2022
* Fixing docsy issue google#1022 - accessibility of foldable sidebar nav

The foldable sidebar nav is using `max-height` transitions to hide subnavs visually, but this approach does not hide visually hidden content from keyboard and screen reader users. Moving to a simple `display: [block/none]` toggle solves the issue.

* Improves accessibility of imgproc

To be more semantically aligned and to improve accessibility, I propose using <figure> and <figcaption> for images included in this manner, which creates a programmatic association between the image and the additional text, providing more context for screen readers

Co-authored-by: LisaFC <lcarey@google.com>
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