feat: set aria-hidden: true to <figcaption> so that screen reader…

…s don't even read `<img>`'s `alt` and `<figcaption>`
vivliostyle · Apr 9, 2021 · 91bb30c · 91bb30c
1 parent b33537e
commit 91bb30c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/plugins/figure.ts b/src/plugins/figure.ts
@@ -42,7 +42,9 @@ const isImgProperty = (name: string): boolean => {
  */
 const wrapFigureImg = (img: HastNode, parent: HastNode) => {
   parent.tagName = 'figure';
-  parent.children.push(h('figcaption', img.properties.alt));
+  parent.children.push(
+    h('figcaption', { 'aria-hidden': 'true' }, [img.properties.alt]),
+  );
 
   // Move to parent because `id` attribute is unique
   if (img.properties.id) {

diff --git a/tests/remark2rehype/figure.test.ts b/tests/remark2rehype/figure.test.ts
@@ -13,7 +13,7 @@ it(
               url: "./img.png"
               alt: "caption"
     `,
-    `<figure><img src="./img.png" alt="caption"><figcaption>caption</figcaption></figure>`,
+    `<figure><img src="./img.png" alt="caption"><figcaption aria-hidden="true">caption</figcaption></figure>`,
   ),
 );
 
@@ -56,7 +56,7 @@ it(
               alt: "caption"
     `,
     stripIndent`
-    <figure><img src="./img.png" alt="caption"><figcaption>caption</figcaption></figure>
+    <figure><img src="./img.png" alt="caption"><figcaption aria-hidden="true">caption</figcaption></figure>
     <p>text <img src="./img.png" alt="caption"></p>
     `,
   ),
@@ -75,6 +75,6 @@ it(
               alt: "caption"
               data: {"hProperties":{"id":"image","data-sample":"sample"}}
     `,
-    `<figure id="image" title="title" data-sample="sample"><img src="./img.png" alt="caption" title="title" data-sample="sample"><figcaption>caption</figcaption></figure>`,
+    `<figure id="image" title="title" data-sample="sample"><img src="./img.png" alt="caption" title="title" data-sample="sample"><figcaption aria-hidden="true">caption</figcaption></figure>`,
   ),
 );