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

Infra: Make colour theme cycler button accessible #2619

Merged
merged 1 commit into from
Jun 18, 2022

Conversation

hugovk
Copy link
Member

@hugovk hugovk commented May 29, 2022

  1. Run Lighthouse audit from Chrome devtools or using https://web.dev/

Before

Buttons do not have an accessible name

image

https://web.dev/measure/?url=https%3A%2F%2Fpeps.python.org

After

image

https://web.dev/measure/?url=https%3A%2F%2Fpep-previews--2619.org.readthedocs.build%2F

Fix

Fixed following advice from https://kittygiraudel.com/2020/12/10/accessible-icon-links/

  • Add <span class="visually-hidden">Toggle light / dark / auto colour theme</span> to the button
    • Visible to screenreaders, but visually hidden
    • Using the visually-hidden CSS class from Furo which is pretty similar to the one from the blog
  • Conversely, add aria-hidden="true" to the SVGs so they are hidden from screen readers
  • I didn't bother with the Internet Explorer bit

@hugovk hugovk added the infra Core infrastructure for building and rendering PEPs label May 29, 2022
@hugovk hugovk requested a review from AA-Turner as a code owner May 29, 2022 19:44
@AA-Turner
Copy link
Member

Perhaps a naive question, but surely the visual theme doesn't matter for blind users (when a screen reader is used)? I'd prefer to just entirely hide the chooser subcomponent from screen readers, rather than adding a CSS work-around ("visually-hidden").

A

@hugovk
Copy link
Member Author

hugovk commented May 29, 2022

It's a good question!

  • Some blind people have partial vision
  • Some people with low vision use screen readers to supplement what they can see
  • Some people with good vision use screen readers to help with reading comprehension
  • Sometimes a person with good vision is a support rep or family member for a blind person, and needs to see something similar to what they hear

https://adrianroselli.com/2017/02/not-all-screen-reader-users-are-blind.html

@hugovk
Copy link
Member Author

hugovk commented Jun 18, 2022

@AA-Turner Any further thoughts/questions?

@ambv ambv merged commit b4032e7 into python:main Jun 18, 2022
@hugovk hugovk deleted the accessibility-fixes branch June 18, 2022 18:21
carljm added a commit to carljm/peps that referenced this pull request Jun 27, 2022
* main: (47 commits)
  PEP 668: Address feedback and mark as accepted (python#2673)
  PEP-0691 Gramatical changes + `meta` key description under Project List (python#2677)
  PEP691: Mark Accepted + Grammar Fixes + Small Fix (python#2674)
  PEP 691: touch up (python#2668)
  PEP 650: Withdraw and move to Standards Track (python#2665)
  PEP 561: Mark as final (python#2663)
  PEP 660: Mark as Final (python#2664)
  PEP 615: Fix incorrect RFC link (python#2662)
  Multiple PEPs: Move Packaging PEPs to Standards Track and mark as Final (python#2657)
  PEP 671: Since it keeps getting asked about, add a para on deferreds (python#2661)
  Infra: Tweak PEP references to work on topic sub-index pages (python#2658)
  PEP 632: Remove `Topic: Packaging` header (python#2656)
  Infra: Make colour theme cycler button accessible (python#2619)
  PEP 593: Fix citation references (python#2640)
  PEP 553: Fix citation references (python#2639)
  PEP 668: Add PEP-Delegate (python#2654)
  PEP 693: Python 3.12 Release Schedule (python#2648)
  Add support for topic indices (python#2579)
  PEP691: Switch to a List for Project, Address more Feedback (python#2653)
  PEP 671: Add section on evaluation order (python#2652)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
infra Core infrastructure for building and rendering PEPs
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants