Infra: Make colour theme cycler button accessible

[hugovk]

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

Before

Buttons do not have an accessible name

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

After

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

[AA-Turner]

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]

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]

@AA-Turner Any further thoughts/questions?