Keyboard focus for Lyte videos

  • Hello, thanks for this great plugin!

    I’ve noticed that by default (at least with the settings I am using) YouTube Lyte thumbnails do not seem to be keyboard focusable. For accessibility this is pretty important. I could change the ‘add youtube link below video’ setting, but I’d rather not take the user offsite. I have tried using an API filter like this to hack together a solution:

    // Allow keyboard focus on Youtube Lyte
add_filter( 'lyte_match_postparse_template', function( $lytetemplate ) {
    return str_replace( ' class="lyte-wrapper">', ' class="lyte-wrapper" role="button" aria-label="play video" tabindex="0">', $lytetemplate );
} );

    …but so far have had no success.

    I think much better solution would be either a filter or setting which would wrap the thumbnail in a <button> element like this, and make the button element play the video:

    <button aria-label="play video: [title here]">
//thumbnail
</button>

    Do you have a recommendation on how to accomplish that? I realize it would create some styling issues due to the way different themes style buttons, but I could override that with CSS.

    Failing that, just a recommendation on how to get my filter code working (and what is the clickable element I should apply it to) would be so much appreciated.

    Thanks!

    • This topic was modified 1 year, 2 months ago by tristanmason.
    • This topic was modified 1 year, 2 months ago by tristanmason.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    hey tristanmason;
    the click event is hooked to the first child of div.lyte-wrapper, e.g.;

    <div class="lyte hidef lP" id="WYL_EpzCOrkP7WQ" itemprop="video" itemscope="" itemtype="https://schema.org/VideoObject">

    so I guess adding the aria-roles to that one might (should?) work?

    frank

    Thread Starter tristanmason

    (@tristanmason)

    Excellent, thanks! That does indeed make it keyboard focusable. However, looks like I’m going to have to write a handler that triggers the click event when the item is in focus and someone presses Space or Enter. I’ll do that and report back for posterity’s sake. ??

    Question – is the Youtube video title variable exposed to that filter in such a way that I could pass it in and make the ARIA-label actually say the title of the video? If not, no worries.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    you’ll have to parse the title out of the HTML I’m afraid e.g.

    <div class="tT" itemprop="name">Wilco - Impossible Germany (Live at de Lokerse Feesten, August 2023)</div>

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Keyboard focus for Lyte videos’ is closed to new replies.