Fixed Video Links not having a title.

[jdhori]

edited the yml file to add a python workflow that goes in after MyST has converted the file into HTML (MyST has aggressive conversion to HTML that isn't accessible), uses beautifulsoup to recreate the page in a virtual browser, loads the DOMs, interacts with the video player, pulls the title, then enters the title into the Accordion and into the iframe title.

Tested with ANDI toolbar, which has an iframe section for testing iframe accessibility quickly.

[pancakereport]

Looks like this pull request does two main things:

1. It updates video links from IPython.display code (which allows someone else to handle the iframe HTML) like

#| label: vid-prob-model
#| echo: false
from IPython.display import YouTubeVideo
YouTubeVideo("uFLsmVFcHXw")

{dropdown}
![](#vid-prob-model)

to explicitly defining the iframe HTML

{dropdown} 🎥 Balance
<iframe width="400" height="300" src="https://www.youtube.com/embed/SfH-oJ-PTC4" title="Balance" frameborder="0" allowfullscreen></iframe>

2. It adds a Python script that "scans built HTML files (typically in _build/html) and flags accessibility issues related to video embeds." This script is added to the a11y workflow.

[pancakereport]

I'm happy with the output in the action. There are a number of warnings (each has "No transcript/caption context near video," "YouTube embed lacks caption hint," and "iframe allows autoplay") but it passes. Ideally, I'd like the axe checks to run even if the "Check video embeds for accessibility" step fails. But I need to update that action to use https://github.com/berkeley-cdss/myst-a11y anyway, so I'll make that change later.

@jdhori @AniYeah Would you recommend that the Python script always be bundled with the axe checks for MyST sites? Would it make sense to add it to the published action https://github.com/berkeley-cdss/myst-a11y? Or is this a bit too specific/overkill/whatever for general use (outside of the Berkeley context)?

I'm also wondering about what would make the MyST iframe directive more accessible because I think I can get changes merged upstream. (Note this repo doesn't use the directive, but the directive is the documented way to add an iframe in MyST and I have other repos with Berkeley content that do.) These are the current options for the directive. An example iframe generated from the directive is below. The thing that I'm seeing that these changes have that MyST directive deosn't have is frameborder="0". Is this an important thing for a11y? Is there something else going on that improves a11y?

MyST directive: <iframe width="100%" height="100%" src="https://www.youtube.com/embed/6BrafO72h_w" title="YouTube video player with video 'Multiple hypothesis testing and the replication crisis'" allowfullscreen="" allow="autoplay" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; border: none;"></iframe>

iframe from this PR: <iframe width="400" height="300" src="https://www.youtube.com/embed/AN6y89dfNCM" title="Maximum Likelihood Discrete Case" frameborder="0" allowfullscreen></iframe>

[jdhori]

There's actually some Kaltura instances that I wanted to properly test at some point. I only have UC Davis Kaltura details but Berkeley could be added easily.

[jdhori]

The video warnings were added more as a future reference which we can address later. I just wanted to get the title into the accordion AND into the iframe. All the accordions had a "See More" label that was similar to "Click Here", and I wanted to make them unique. If needed, I can add "(video platform)" into the accordion title as well. The good news about the accordion is that it should prevent any video from autoplaying once the page loads.

I was building the script to work with any file, regardless of who is using it. We may want to add instructions to inform users that any video that doesn't have a proper title, this script will prevent the page from being published and submits a ticket to github to fix the content. That would require the user to either edit the video and add a title, or find an alternative video with a title.

MyST does the proper hiding of the border with CSS. The frameborder is more of a legacy control that was added for older filetypes. MyST also allows for autoplaying of content, which I disallow using accordions. If you allow for autoplaying of content, you need to make controls easily available to stop the autoplay...and controls are never easily available in an embedded video.

[pancakereport]

Unfortunately not convinced that this ultimately fixed the problem. I can see axe flagging ARIA issues (that come directly from YouTube) still

[jdhori]

That is a button within the YouTube embed for the play button that sits on top of the video. I can not edit that ARIA label since it's loaded by YouTube and not by your textbook. That is an older HTML 4 standard of making buttons which were inaccessible to screenreaders and dictation users. Web masters would make divs and add links and background colors to make them buttons, but due to how divs were used to structure pages, would often be invisible to assistive technologies unless roles were added to make the browser notice them.

Automated scans will point out the flaws in your code. It's up to the user to identify if it's an actual accessibilty issue or not. In this case, yes, an ARIA label was added in a way that it shouldn't have, but after further testing, it does work.

[pancakereport]

Thanks for the additional info. I've decided to exclude the YouTube play button from checks, see 251e102.