Handle a11y in video iframe

cfpb · Nov 13, 2024 · ecc40ab · ecc40ab
1 parent 59b109b
commit ecc40ab
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/cfgov/unprocessed/js/organisms/VideoPlayer.js b/cfgov/unprocessed/js/organisms/VideoPlayer.js
@@ -78,6 +78,10 @@ function VideoPlayer(element) {
    *   to video player instance.
    */
   function _videoPlayerReadyHandler(event) {
+    // Video has loaded into the iframe, so we can show it to assistive devices.
+    _iframeDom.removeAttribute('aria-hidden');
+    _iframeDom.removeAttribute('tabindex');
+
     // Add duration timestamp to video.
     const player = event.target;
     const duration = player.getDuration();

diff --git a/cfgov/v1/jinja2/v1/includes/organisms/video-player.html b/cfgov/v1/jinja2/v1/includes/organisms/video-player.html
@@ -79,7 +79,8 @@
                     src="{{ video_url }}"
                     allow="fullscreen; autoplay"
                     aria-hidden="true"
-                    tabindex="-1">
+                    tabindex="-1"
+                    title="This is a placeholder for a video that will load.">
                 </iframe>
             </div>
         </div>