Skip to content

Add accessible name to 'Edit this page' icon#411

Merged
pradyunsg merged 3 commits intopradyunsg:mainfrom
hugovk:accessibility-edit-this-page
Apr 4, 2022
Merged

Add accessible name to 'Edit this page' icon#411
pradyunsg merged 3 commits intopradyunsg:mainfrom
hugovk:accessibility-edit-this-page

Conversation

@hugovk
Copy link
Copy Markdown
Contributor

@hugovk hugovk commented Apr 4, 2022

Running Lighthouse on https://pillow.readthedocs.io/en/latest/ gives a good accessibility score with one suggestion:

image

For the edit icon:

Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn more.

Here's a suggestion, following https://kittygiraudel.com/2020/12/10/accessible-icon-links/

  • Add <span class="visually-hidden">Edit this page</span> after the SVG, hidden but accessible
  • Add aria-hidden="true" to the <svg> to remove it from the accessibility tree
  • Addd title="Edit this page to the <a>, not strictly necessary but gives a tooltip
  • I didn't bother with the IE tip as it's almost gone (https://death-to-ie11.com) but let me know if you'd like it

Copy link
Copy Markdown
Owner

@pradyunsg pradyunsg left a comment

Choose a reason for hiding this comment

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

Aha! Nice catch!

This text needs to be piped through the translation scafolding.

Comment thread src/furo/theme/furo/page.html Outdated
Comment thread src/furo/theme/furo/page.html Outdated
Copy link
Copy Markdown
Contributor Author

@hugovk hugovk left a comment

Choose a reason for hiding this comment

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

Internationalise text

@hugovk
Copy link
Copy Markdown
Contributor Author

hugovk commented Apr 4, 2022

Oops, that's the second time I've done a "review" instead of committing files from a batch! Let's try again...

Co-authored-by: Pradyun Gedam <pradyunsg@gmail.com>
Copy link
Copy Markdown
Owner

@pradyunsg pradyunsg left a comment

Choose a reason for hiding this comment

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

Awesome, thanks!

This is a gentle reminder to me that I need to consolidate RTD/non-RTD behaviours.

@pradyunsg pradyunsg merged commit aa04cd6 into pradyunsg:main Apr 4, 2022
@hugovk hugovk deleted the accessibility-edit-this-page branch April 4, 2022 18:58
@hugovk
Copy link
Copy Markdown
Contributor Author

hugovk commented Apr 4, 2022

You're welcome!

We're trying out Furo for the Pillow docs, currently main is using it at https://pillow.readthedocs.io/en/latest/ and if all is well the next quarterly release will put it at the default https://pillow.readthedocs.io/en/stable/

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