b894de6 · typeable/pandoc

git.iko.soy/typeable/pandoc

HTML writer: improve alt-text/caption handling for HTML5

Screen readers read an image's `alt` attribute and the figure caption, both of which come from the same source in pandoc. The figure caption is hidden from screen readers with the `aria-hidden` attribute. This improves accessibility. For HTML4, where `aria-hidden` is not allowed, pandoc still uses an empty `alt` attribute to avoid duplicate contents. Closes: #6491

commitb894de64264fe0386b5cb3e1680955a8e879c78e authorAlbert Krewinkel <albert@zeitkraut.de> dateWed 1 Jul 2020, 14:44 (6 years ago) parentccf9889

6 files changed+17−9

compare with master

unifiedsplit

src/Text/Pandoc/Writers/HTML.hs+10−2 test/command/3577.md+3−3 test/command/4677.md+1−1 test/command/5121.md+1−1 test/command/5642.md+1−1 test/writer.html5+1−1

src/Text/Pandoc/Writers/HTML.hs+10−2

@@ -1,6 +1,7 @@

11{-# LANGUAGE MultiWayIf #-}

22{-# LANGUAGE OverloadedStrings #-}

33{-# LANGUAGE ScopedTypeVariables #-}

4+{-# LANGUAGE TypeApplications #-}

45{-# LANGUAGE ViewPatterns #-}

56{- |

67 Module : Text.Pandoc.Writers.HTML

@@ -587,11 +588,18 @@ figure :: PandocMonad m

587588 => WriterOptions -> Attr -> [Inline] -> (Text, Text)

588589 -> StateT WriterState m Html

589590figure opts attr txt (s,tit) = do

590− img <- inlineToHtml opts (Image attr [Str ""] (s,tit))

591591 html5 <- gets stHtml5

592+ -- Screen-readers will normally read the @alt@ text and the figure; we

593+ -- want to avoid them reading the same text twice. With HTML5 we can

594+ -- use aria-hidden for the caption; with HTML4, we use an empty

595+ -- alt-text instead.

596+ let alt = if html5 then txt else [Str ""]

592597 let tocapt = if html5

593− then H5.figcaption

598+ then H5.figcaption !

599+ H5.customAttribute (textTag "aria-hidden")

600+ (toValue @Text "true")

594601 else H.p ! A.class_ "caption"

602+ img <- inlineToHtml opts (Image attr alt (s,tit))

595603 capt <- if null txt

596604 then return mempty

597605 else tocapt `fmap` inlineListToHtml opts txt

test/command/3577.md+3−3

@@ -16,10 +16,10 @@

1616\end{figure}

1717^D

1818<figure>

19−<img src="img1.jpg" alt="" /><figcaption>Caption 1</figcaption>

19+<img src="img1.jpg" alt="Caption 1" /><figcaption aria-hidden="true">Caption 1</figcaption>

2020</figure>

2121<figure>

22−<img src="img2.jpg" alt="" /><figcaption>Caption 2</figcaption>

22+<img src="img2.jpg" alt="Caption 2" /><figcaption aria-hidden="true">Caption 2</figcaption>

2323</figure>

2424```

2525```

@@ -30,6 +30,6 @@

3030\end{figure}

3131^D

3232<figure>

33−<img src="img1.jpg" alt="" /><figcaption>Caption 3</figcaption>

33+<img src="img1.jpg" alt="Caption 3" /><figcaption aria-hidden="true">Caption 3</figcaption>

3434</figure>

3535```

test/command/4677.md+1−1

@@ -3,6 +3,6 @@

33![Caption](img.png){#img:1}

44^D

55<figure>

6−<img src="img.png" id="img:1" alt="" /><figcaption>Caption</figcaption>

6+<img src="img.png" id="img:1" alt="Caption" /><figcaption aria-hidden="true">Caption</figcaption>

77</figure>

88```

test/command/5121.md+1−1

@@ -5,7 +5,7 @@

55## Header 2

66^D

77<figure>

8−<img src="./my-figure.jpg" width="500" alt="" /><figcaption>My caption</figcaption>

8+<img src="./my-figure.jpg" width="500" alt="My caption" /><figcaption aria-hidden="true">My caption</figcaption>

99</figure>

1010

1111Header 2

test/command/5642.md+1−1

@@ -3,6 +3,6 @@

33![test](foo){aria-describedby="barbaz"}

44^D

55<figure>

6−<img src="foo" aria-describedby="barbaz" alt="" /><figcaption>test</figcaption>

6+<img src="foo" aria-describedby="barbaz" alt="test" /><figcaption aria-hidden="true">test</figcaption>

77</figure>

88```

test/writer.html5+1−1

@@ -523,7 +523,7 @@ Blah

523523<h1 id="images">Images</h1>

524524<p>From “Voyage dans la Lune” by Georges Melies (1902):</p>

525525<figure>

526−<img src="lalune.jpg" title="Voyage dans la Lune" alt="" /><figcaption>lalune</figcaption>

526+<img src="lalune.jpg" title="Voyage dans la Lune" alt="lalune" /><figcaption aria-hidden="true">lalune</figcaption>

527527</figure>

528528<p>Here is a movie <img src="movie.jpg" alt="movie" /> icon.</p>

529529<hr />