Keyboard focusable play button about lite-youtube-embed HOT 8 CLOSED

@paulirish Hi, Paul!

Thanks for the tip, I should update the article. However, see Adrian’s comment.

For the we have labelling options of 1) title attribute, 2) aria-label or 3) embedded content that we visually hide. @Heydon Do you have guidance on this?

I would avoid the title attribute, since this is often muted in screen readers’ default verbosity settings (I agree with Steve!). The most robust option, for wide compatibility with translation services and voice activation software, is to secrete a visually hidden text node.

<button type="button" class="lty-playbtn">
  <span class="visually-hidden">Play: Keynote (Google I/O '18)</span>
</button> 

I’m sure you’re aware of the kind of CSS needed to make this work (in fact I think I first read about it on your blog!) but for those who are not:

.visually-hidden {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

As a side note, it’s worth considering the wording of the label from a voice activation perspective. Common/obvious terms like simply “Play” are more likely to be guessed by voice activation users (meaning they don't have to divide the screen up and locate the button procedurally). Then again, this will be problematic if there is more than one button per page (I appreciate the care in choosing a unique value to help screen reader users here).

Also: consider state and focus management. If the button adds an iframe, is focus then moved explicitly to the <iframe>?

Anyway, hope that helps 🙂

from lite-youtube-embed.

I want to work on this issue.

from lite-youtube-embed.

Instead of adding the title of the video to the the title="" attribute on the button, it would be better to add it as content inside the button itself, like so:

<button type="button" class="lty-playbtn">
  <span class="lty-sr-only">Play Video: Keynote (Google I/O '18)</span>
</button>

The lty-sr-only would accessibly hide the text to sighted users.

In an article by Steve Faulkner, he says:

Do not use the title attribute, on any element, for any text that you want all users to have access to.

You could then grab the title and add it to the iframe like so:

addIframe(){
    let titleText = (this.querySelector('.lty-playbtn') !== null) ? this.querySelector('.lty-playbtn').textContent.trim() : 'YouTube Video'; // New!
    const iframeHTML = `
<iframe width="560" height="315" style="border: 0;"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
src="${this.embedURL}" title="${titleText}"
></iframe>`; // --------- New! ☝️
    this.insertAdjacentHTML('beforeend', iframeHTML);
    this.classList.add('lyt-activated');
}

Be sure to add titles to <iframe>'s.

from lite-youtube-embed.

fixed by #46

unfortunately i didnt catch your comment @adamjohnson .... i'm curious about this title attr abuse thing..

from lite-youtube-embed.

okay here's our use:

...

@adamjohnson reading https://developer.paciellogroup.com/blog/2012/01/html5-accessibility-chops-title-attribute-use-and-abuse/ and https://developer.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/

i actually think our use of it is fine.

all the bad examples is when the use of title is totally redundant. i also see:

Only use it to label a form control when the same text is provided as visible text.

and since we have a visual play icon (which otherwise isn't expressed as a play control for non-sighted users)... it does seem worthwhile to 1) have the label and 2) use the title attribute to express it. i'm basically unconvinced of using your embedded content approach. :)

The real youtube player itself uses aria-label rather than title. I'd be fine switching to that. I don't know how it actually matters to AT users, but it seems reasonable. wdyt/

from lite-youtube-embed.

In this case, I would use aria-label instead of title. AT is clear on what to do with aria-label. I'm sure that's why YouTube uses it too.

I'm still in favor of putting the content in the <button> as text (see my previous comment for code). One benefit of putting the content as text inside the button is that it will be translated by browsers to other languages. aria-label is often reported to not be translated (funnily, this article supports text content inside the button).

All that said, this is a step in the right direction. Thanks for maintaining this project. It's been a helpful tool for us!

from lite-youtube-embed.

Thanks for these valuable conversations, Adam. :)

Tagging in @Heydon since your https://heydonworks.com/article/aria-label-is-a-xenophobe/ was just mentioned. (And I'm a fan of your work)
I notice that in the posts's aria-label example... I'm seeing the aria-label contents being actually translated.. I'm in Chrome Stable 86.

Oh... It looks like this bug was fixed in May 2019. WOoHOOO!

for context, we have a play button (for a youtube embed).. and when it's clicked, we add an iframe.

For the <button> we have labelling options of 1) title attribute, 2) aria-label or 3) embedded content that we visually hide. @Heydon Do you have guidance on this?

For the iframe, we'll add a title attribute.

from lite-youtube-embed.

fixed by #46 and just now #66

from lite-youtube-embed.