add image descriptions/alt text

make-pages/GalleryPage.hs

@@ -151,7 +151,7 @@ makeItem nsfw file info@(Info {bg}) = [b|
       <a href="$dir">
         <img src="$thumbnail" loading=lazy$bgStyle
           width=200 height=200
-          title="$tooltip">
+          alt="$title" title="$tooltip">
       </a>
     </figure>
   |]

make-pages/Info.hs

@@ -105,6 +105,7 @@ data Image =
     label    :: !Text,
     path     :: !FilePath,
     download :: !(Maybe FilePath),
+    desc     :: !Text,
     nsfw     :: !Bool,
     warning  :: !(Maybe Text),
     resize   :: !Bool
@@ -369,17 +370,18 @@ unlabelledImage' label' y = asStr y <|> asObj y
  where
   asStr = YAML.withStr "path" \(Text.unpack -> path) ->
     let label = fromMaybe (pathToLabel path) label' in
-    pure $ Image {label, path, download = Nothing,
+    pure $ Image {label, path, download = Nothing, desc = "",
                   nsfw = False, warning = Nothing, resize = True}
   asObj = YAML.withMap "image info" \m -> do
-    checkKeys m ["path", "download", "nsfw", "warning", "resize"]
+    checkKeys m ["path", "download", "desc", "nsfw", "warning", "resize"]
     path     <- m .:  "path"
     download <- m .:? "download"
+    desc     <- m .:? "desc" .!= ""
     nsfw     <- m .:? "nsfw" .!= False
     warning  <- m .:? "warning"
     resize   <- m .:? "resize" .!= True
     let label = fromMaybe (pathToLabel path) label'
-    pure $ Image {label, path, download, nsfw, warning, resize}
+    pure $ Image {label, path, download, nsfw, warning, desc, resize}
   pathToLabel = Text.pack . gapToSpace . takeBaseName
   gapToSpace = map \case '-' -> ' '; '_' -> ' '; c -> c
 
@@ -407,14 +409,13 @@ instance FromYAML Link where
 updateList :: Maybe (YAML.Node YAML.Pos) ->
               YAML.Parser [(Date, NonEmpty Update)]
 updateList =
-  maybe (pure []) $ YAML.withMap "updates" $
-    nonEmptys <=< traverse bodies . Map.toList
+  maybe (pure []) $ YAML.withMap "updates" $ traverse bodies . Map.toList
  where
   bodies (date', rest) = (,) <$> parseYAML date' <*> body rest
-  body b =
-        return <$> body1 b
-    <|> YAML.withSeq "update list" (traverse body1) b
+  body b = return <$> body1 b <|> YAML.withSeq "update list" (bodyN b) b
   body1 b = asDesc b <|> asObj b
+  bodyN y =
+    maybe (YAML.typeMismatch "non-empty list" y) (traverse body1) . nonEmpty
   asDesc = YAML.withStr "desc" \desc ->
     pure $ Update {desc, nsfw = False, ignoreSort = False}
   asObj = YAML.withMap "update info" \m -> do
@@ -423,8 +424,6 @@ updateList =
     nsfw       <- m .:? "nsfw"        .!= False
     ignoreSort <- m .:? "ignore-sort" .!= False
     pure $ Update {desc, nsfw, ignoreSort}
-  nonEmptys = traverse $ traverse $
-    maybe (fail "expected non-empty list") pure . nonEmpty
 
 
 data GalleryInfo =

make-pages/RSS.hs

@@ -88,10 +88,16 @@ makeItem root prefix nsfw path info@(Info {title}) = [b|
   desc = makeDesc $ descFor nsfw info
 
   image = case previewImage info of
-    Just (PFull img) -> figure $ pageFile img
-    Just (PThumb th) -> figure $ thumbFile th
+    Just (PFull img) -> figure img.desc $ pageFile img
+    Just (PThumb th) -> figure "full image hidden" $ thumbFile th
     Nothing          -> ""
-  figure p = [b|<figure> <a href="$link"><img src="$link/$p"></a> </figure>|]
+  figure alt p = [b|
+      <figure aria-describedby=mainimg>
+        <a href="$link">
+          <img id=mainimg src="$link/$p" alt="$alt" title="$alt">
+        </a>
+      </figure>
+    |]
 
 makeDesc :: Desc -> Builder
 makeDesc NoDesc = ""

make-pages/SinglePage.hs

@@ -95,6 +95,8 @@ make' root siteName prefix nsfw _dataDir dir
         Just (Artist {name}) -> [b|by $name|]
         Nothing -> "by niss"
 
+  let alt = image0.desc
+
   let updateDate = ifJust (last' updates) \(d, _) ->
         let updated = formatLong d in
         [b|<br> <span class=updated>updated $updated</span>|]
@@ -156,10 +158,10 @@ make' root siteName prefix nsfw _dataDir dir
       $buttonBar
 
       <main>
-        <figure id=mainfig>
+        <figure id=mainfig aria-labelledby=mainimg>
           $warning'
           <a id=mainlink href="$download0" title="download full version">
-            <img id=mainimg src="$path0'" alt="">
+            <img id=mainimg src="$path0'" alt="$alt" title="$alt">
           </a>
         </figure>
 
@@ -297,7 +299,7 @@ altButton :: Image -> Text -> Builder
 altButton img i = [b|
   <li$nsfwClass>
     <input type=radio name=variant id="$i" value="$path'"
-           data-link="$link"$warning'>
+           data-link="$link"$warning' data-alt="$alt">
     <label for="$i"$nsfwLabelClass>$label</label>
   |]
  where
@@ -307,6 +309,7 @@ altButton img i = [b|
   path'          = pageFile img
   link           = fromMaybe (bigFile img) download
   warning'       = ifJust warning \(escAttr -> w) -> [b|$& data-warning="$w"|]
+  alt            = img.desc
 
 makeTags :: FilePath -> [Strict.Text] -> Builder
 makeTags undir tags =

script/single.ts

@@ -21,7 +21,8 @@ function addCWListeners(id: string | null, caption: HTMLElement): void {
     e => { if (e.key == 'Enter') openCW(id, caption, true) });
 }
 
-function setImage(id: string, src: string, href: string, cw: string): void {
+function setImage(id: string, src: string, href: string,
+                  alt: string, cw: string): void {
   const curCw = document.getElementById('cw');
   const coverNew = cw != '' && !opened.has(id) && !skipAll.checked;
 
@@ -45,12 +46,14 @@ function setImage(id: string, src: string, href: string, cw: string): void {
   // else no cover before or after
 
   mainimg.src = src;
+  mainimg.alt = mainimg.title = alt;
   mainlink.href = href;
 }
 
 function activateButton(button: HTMLInputElement, doPush = true): void {
   setImage(button.id, button.value,
            button.dataset.link!,
+           button.dataset.alt ?? '',
            button.dataset.warning ?? '');
 
   if (doPush) history.pushState(null, '', '#' + button.id);