Media: add alt text to aria-label for audio and video

As per the recommended solution of: https://www.w3.org/WAI/PF/HTML/wiki/Media_Alt_Technologies
Julow · Aug 27, 2024 · ef9ca48 · ef9ca48
1 parent 624dd68
commit ef9ca48
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 14 deletions.
diff --git a/src/html/generator.ml b/src/html/generator.ml
@@ -214,15 +214,15 @@ let rec block ~config ~resolve (l : Block.t) : flow Html.elt list =
       let a = Some (class_ (extra_class @ t.attr)) in
       [ mk ?a content ]
     in
-    let mk_media_block media_block target content =
+    let mk_media_block media_block target alt =
       let block =
         match target with
-        | Target.External url -> media_block url
+        | Target.External url -> media_block url alt
         | Internal (Resolved uri) ->
             let url = Link.href ~config ~resolve uri in
-            media_block url
+            media_block url alt
         | Internal Unresolved ->
-            let content = [ Html.txt content ] in
+            let content = [ Html.txt alt ] in
             let a = Html.a_class [ "xref-unresolved" ] :: [] in
             [ Html.span ~a content ]
       in
@@ -258,14 +258,26 @@ let rec block ~config ~resolve (l : Block.t) : flow Html.elt list =
         let extra_class = [ "language-" ^ lang_tag ] in
         mk_block ~extra_class Html.pre (source (inline ~config ~resolve) c)
     | Math s -> mk_block Html.div [ block_math s ]
-    | Audio (target, content) ->
-        let audio src = [ Html.audio ~src ~a:[ Html.a_controls () ] [] ] in
-        mk_media_block audio target content
-    | Video (target, content) ->
-        let video src = [ Html.video ~src ~a:[ Html.a_controls () ] [] ] in
-        mk_media_block video target content
+    | Audio (target, alt) ->
+        let audio src alt =
+          [
+            Html.audio ~src
+              ~a:[ Html.a_controls (); Html.a_aria "label" [ alt ] ]
+              [];
+          ]
+        in
+        mk_media_block audio target alt
+    | Video (target, alt) ->
+        let video src alt =
+          [
+            Html.video ~src
+              ~a:[ Html.a_controls (); Html.a_aria "label" [ alt ] ]
+              [];
+          ]
+        in
+        mk_media_block video target alt
     | Image (target, alt) ->
-        let image src =
+        let image src alt =
           let img =
             Html.a
               ~a:[ Html.a_href src; Html.a_class [ "img-link" ] ]

diff --git a/test/pages/medias.t/index.mld b/test/pages/medias.t/index.mld
@@ -25,12 +25,14 @@ Some image:
 {2 Links}
 
 {audio:https://upload.wikimedia.org/wikipedia/commons/f/f1/Cri_du_chameau.ogg}
+{{audio:https://upload.wikimedia.org/wikipedia/commons/f/f1/Cri_du_chameau.ogg}The sound of a caml}
 
 {1 Video}
 
 {2 References}
 
 {video:flower.webm}
+{{video:flower.webm}A video of a blossoming flower}
 
 {2 Links}
 

diff --git a/test/pages/medias.t/run.t b/test/pages/medias.t/run.t
@@ -10,7 +10,7 @@ This will have produced a file called 'page-index.odoc'.
 
 Link (and generate the HTML):
   $ odoc link -P pkg1:_odoc/pkg1/doc _odoc/pkg1/doc/page-index.odoc
-  File "index.mld", line 41, characters 48-64:
+  File "index.mld", line 43, characters 48-64:
   Warning: Failed to resolve reference ./module-x Path 'module-x' not found
   File "index.mld", line 12, characters 28-83:
   Warning: Failed to resolve reference ./camezfzeffl.gif Path 'camezfzeffl.gif' not found
@@ -38,15 +38,23 @@ Testing the working references:
   $ cat html/pkg1/doc/index.html | grep video
        <li><a href="#video">Video</a>
      </div><h2 id="video"><a href="#video" class="anchor"></a>Video</h2>
-     </h3><div><video src="flower.webm" controls="controls"></video></div>
+      <video src="flower.webm" controls="controls" aria-label="flower.webm">
+      </video>
+      <video src="flower.webm" controls="controls"
+       aria-label="A video of a blossoming flower">
+      </video>
       <video
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
+       aria-label="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
       </video>
 
   $ cat html/pkg1/doc/index.html | grep audio
        <li><a href="#audio">Audio</a>
      </ul><h2 id="audio"><a href="#audio" class="anchor"></a>Audio</h2>
-     <div><audio src="Cri_du_chameau.ogg" controls="controls"></audio></div>
+      <audio src="Cri_du_chameau.ogg" controls="controls"
+      </audio>
+      <audio
+      </audio>
       <audio
       </audio>