search

paulirish / lite-youtube-embed

A faster youtube embed.
https://paulirish.github.io/lite-youtube-embed/
Other
5.92k stars 274 forks source link

Accessibility Improvements for PE Pattern #183

Closed scottjehl closed 3 months ago

scottjehl commented 3 months ago

Hey! A couple of things that seemed they may help.

In the progressive enhancement pattern, the anchor's href is removed and it is meant to play the role of a play button from there. Without its href though, it lost its ability to gain keyboard focus or receive keyboard interaction (return or space), and it no longer conveyed any element meaning beyond a generic element.

Adding a role of button and tabindex gives it some buttony semantics and focusability. The event handlers give it buttony keyboard handling for space and enter.

And then the focusin addition is just to warm connections for keyboard users too.

scottjehl commented 3 months ago

Seems to work a charm https://lite-youtube-embed-hehbcgqpw-paul-irishs-projects.vercel.app/variants/pe.html

scottjehl commented 3 months ago

All in!