Custom cover art alt text

sql/incoming-schema-changes.sql

@@ -3,6 +3,12 @@ USE ifdb;
 -- use this script for pending changes to the production DB schema
 
 
+ALTER table games
+    Add column cover_art_description VARCHAR(2000) AFTER coverart;
+
+
+
+
 DROP TABLE IF EXISTS `global_settings`;
 CREATE TABLE `global_settings` ( 
   `setting_id` BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT,

www/editgame

@@ -1101,6 +1101,12 @@ for ($i = 0 ; $i < count($fields) ; $i++) {
             "This game has no cover art",
             "coverart", $curval, 90);
 
+    } else if ($colname == "cover_art_description") {
+        // multiline field for cover art description
+        echo "<textarea name=\"$colname\" id=\"$colname\"
+            rows=2 cols=$len>" . htmlspecialcharx($curval)
+            . "</textarea>";
+
     } else if ($colname == "desc") {
         // multiline field for description
         echo "<textarea name=\"$colname\" id=\"$colname\"

www/editgame-util.php

@@ -69,6 +69,10 @@ function init_link_formats($db)
           . helpWinLink("help-ifid", "What's an IFID?"),
           null, TypeString],
     ["Cover Art", "coverart", 0, null, null, TypeImage],
+    ["Cover Art Description", "cover_art_description", 60, 
+          'A description of what the image looks like, to be included in alt text - '
+          . helpWinLink("help-cover-description", "Guidelines for cover art descriptions"),
+          null, TypeString],
     ["First Publication Date", "published", 15,
           "Format as dd-Mon-yyyy (example: 12-Jul-2005), or
           just enter the year if you don't know the exact date",
@@ -169,7 +173,7 @@ function loadGameRecord($db, $id)
             version, license, system, `desc`, genre, language,
             seriesname, seriesnumber, forgiveness,
             bafsid, website, editedby, moddate, pagevsn,
-            coverart, downloadnotes
+            coverart, cover_art_description, downloadnotes
          from games
          where id = ?", [$id]);
     if (mysql_num_rows($result) == 0)

www/gameinfo.php

@@ -26,8 +26,8 @@ function getGameInfo($db, $id, $curuser, $requestVersion, &$errMsg, &$errCode)
     $result = mysqli_execute_query($db,
        "select
             title, author, authorExt, published,
-            version, license, `system`, `desc`, length(coverart) hasart, genre,
-            language, seriesname, seriesnumber, forgiveness, bafsid, website,
+            version, license, `system`, `desc`, length(coverart) hasart, cover_art_description, 
+            genre, language, seriesname, seriesnumber, forgiveness, bafsid, website,
             downloadnotes, editedby,
             concat(date_format(moddate, '%e %M %Y at %l:%i'),
                lower(date_format(moddate, '%p'))) as moddate,
@@ -209,6 +209,7 @@ function getGameInfo($db, $id, $curuser, $requestVersion, &$errMsg, &$errCode)
     $language = $rec["language"];
     $system = $rec["system"];
     $hasart = !is_null($rec["hasart"]);
+    $cover_art_description = $rec["cover_art_description"];
     $genre = $rec["genre"];
     $seriesname = $rec["seriesname"];
     $seriesnum = $rec["seriesnumber"];
@@ -416,7 +417,7 @@ function getGameInfo($db, $id, $curuser, $requestVersion, &$errMsg, &$errCode)
     return array($ifids, $title, $author, $authorExt,
                  $pubYear, $pubFull, $license,
                  $system, $desc, $rawDesc,
-                 $hasart, $genre, $seriesname, $seriesnum,
+                 $hasart, $cover_art_description, $genre, $seriesname, $seriesnum,
                  $forgiveness, $bafsid, $version,
                  $language, $languageNameOnly,
                  $website, $links,
@@ -448,6 +449,7 @@ function getDeltaDesc($deltas)
                        "language" => "language",
                        "desc" => "description",
                        "coverart" => "cover art",
+                       "cover_art_description" => "cover art description",
                        "genre" => "genre",
                        "seriesname" => "series name",
                        "seriesnumber" => "episode number",

www/help-cover-description

@@ -0,0 +1,42 @@
+<?php
+include_once "session-start.php";
+include_once "util.php";
+include_once "pagetpl.php";
+helpPageHeader("Cover Art Descriptions");
+?>
+
+<h1>Cover Art Descriptions</h1>
+
+<p>IFDB includes cover art descriptions as part of alt text in a few places. Alt text allows people 
+who are blind or who have low vision to read about an image using a screen reader. Alt text is also 
+displayed instead of a picture when images are turned off in the browser.</p>
+<p>Apart from alt text, IFDB also displays the descriptions directly on pages that show full-sized 
+cover art.</p>
+
+<h2>Guidelines for Cover Art Descriptions</h2>
+
+<ul class=doublespace>
+
+    <li>Descriptions should be concise, usually no longer than a sentence or two.</li>
+
+    <li>Avoid beginning with "image of," "picture of," or the like. Screen readers already 
+    announce it as an image. It's okay to use more specific words that name the medium, for 
+    instance, "illustration," "cartoon," or "painting."</li>
+
+    <li>Avoid beginning with "cover art." IFDB will automatically include "Cover art for 
+    [Game Title]" as part of the alt text or on the page.</li>
+
+    <li>Avoid repeating the game's title, author, or other text that is readily available on the 
+    game page, unless there's a reason to say it again. For example, if the image shows a subtitle 
+    that is not found elsewhere, you can include that. After describing the picture, you can add 
+    something like "Text reads: Lost Pig and Place Underground, by Grunk as told to Admiral Jota."</li>
+
+    <li>If the cover art just shows text on a background, you could write something like "Game title 
+    on a black background."</li>
+
+    <li>Use ending punctuation so that screen readers will pause before moving on to other text.</li>
+</ul>
+
+<?php
+helpPageFooter();
+?>

www/util.php

@@ -382,7 +382,7 @@ function echoStylesheetLink()
 // --------------------------------------------------------------------------
 // send an image description page - this includes the image and the
 // copyright information
-function sendImageLdesc($title, $imageID)
+function sendImageLdesc($page_title, $imageID, $cover_art_description, $game_title, $gameID)
 {
     global $copyrightStatList;
     checkPersistentLogin();
@@ -414,16 +414,24 @@ function sendImageLdesc($title, $imageID)
             list($username) = mysql_fetch_row($result);
     }
 
+    // Generate the alt text for the full-sized cover art
+    $large_cover_alt_text = "";
+    if ($cover_art_description) {
+        $large_cover_alt_text = $cover_art_description;
+    } else {
+        $large_cover_alt_text = "Cover art for $game_title.";
+    }
+
     // send the page
 ?>
 <html>
 <head>
    <?php echoStylesheetLink(); ?>
-   <title><?php echo htmlspecialcharx($title) ?></title>
+   <title><?php echo htmlspecialcharx($page_title) ?></title>
 </head>
 <body>
 <div class=main>
-   <img src="showimage?id=<?php echo urlencode($imageID) ?>">
+   <img src="showimage?id=<?php echo urlencode($imageID) ?>" alt="<?php echo htmlspecialcharx($large_cover_alt_text) ?>.">
    <?php
       if ($copymsg || ($copystat && isset($copyrightStatList[$copystat]))
           || $username || $created) {
@@ -454,8 +462,21 @@ function sendImageLdesc($title, $imageID)
               echo "<br>";
           }
 
-          echo "</span><br>";
+          echo "</span>";
+      }
+
+      if ($cover_art_description) {
+          echo "<br><style nonce='$nonce'>";
+          echo "<div class='image_description_box' style='border: 1px solid gray; padding: 0em 1em 0em 1em; height: auto;
+}'>";
+          echo "<p><b>Image description:</b></p><p>$cover_art_description</p>";
+          echo "<p><em>Cover art descriptions are contributed by IFDB members.</em></p></div>";
+
+      } else {
+          echo "<p>No image description is available. To help make IFDB more accessible, ";
+          echo "you can <a href=\"editgame?&id=$gameid\">add a cover art description</a>.</p>";
       }
+
    ?>
 </div>
 </body>
@@ -2834,7 +2855,7 @@ function check_admin_privileges($db, $userid) {
 
 }
 
-function coverArtThumbnail($id, $size, $version, $params = "") {
+function coverArtThumbnail($id, $size, $version, $params = "", $alt_text = "") {
     $thumbnail = "/coverart?id=$id&thumbnail=";
     $x15 = round($size * 3 / 2);
     $x2 = $size * 2;
@@ -2844,7 +2865,7 @@ function coverArtThumbnail($id, $size, $version, $params = "") {
     }
     global $nonce;
     return "<style nonce='$nonce'>.coverart__img { max-width: 35vw; height: auto; }</style>"
-        ."<img class='coverart__img' loading='lazy' srcset=\"$thumbnail{$size}x$size$params, $thumbnail{$x15}x$x15$params 1.5x, $thumbnail{$x2}x$x2$params 2x, $thumbnail{$x3}x$x3$params 3x\" src=\"$thumbnail{$size}x$size$params\" height=$size width=$size border=0 alt=\"\">";
+        ."<img class='coverart__img' loading='lazy' srcset=\"$thumbnail{$size}x$size$params, $thumbnail{$x15}x$x15$params 1.5x, $thumbnail{$x2}x$x2$params 2x, $thumbnail{$x3}x$x3$params 3x\" src=\"$thumbnail{$size}x$size$params\" height=$size width=$size border=0 alt=\"$alt_text\">";
 }
 
 // ----------------------------------------------------------------------------

www/viewgame

@@ -207,7 +207,7 @@ function sendCoverArt()
     if (isset($_REQUEST['ldesc']))
         sendImageLdesc("Cover Art for $title"
                        . ($targVsn ? " (version $targVsn)" : ""),
-                       $imgname);
+                       $imgname, $cover_art_description, $title, $id);
 
     // retrieve the image data
     list($imgdata, $fmt) = fetch_image($imgname, true);
@@ -375,7 +375,8 @@ if (!$errMsg) {
     list($ifids, $title, $author, $authorExt,
          $pubYear, $pubFull, $license,
          $system, $desc, $rawDesc,
-         $hasart, $genre, $seriesname, $seriesnum,
+         $hasart, $cover_art_description,
+         $genre, $seriesname, $seriesnum,
          $forgiveness, $bafsid, $version,
          $language, $languageNameOnly,
          $website, $links,
@@ -929,14 +930,31 @@ echo helpWinLink("help-ifid", "IFID");
                <?php
 if ($hasart) {
     $arthref = "{$_SERVER['PHP_SELF']}?coverart&id=$id";
+    // If there's a custom description for this cover art, include it as part of the alt text.
+    $cover_alt_text = "Cover art for $title. ";
+    if ($cover_art_description) {
+        $cover_alt_text .= "$cover_art_description ";
+    }
+    $cover_alt_text .= "Click for full-sized image and copyright information.";
+
     if (isset($_REQUEST['version']))
         $arthref .= "&version=" . $_REQUEST['version'];
                ?>
            <div class=coverart>
 
               <a href="<?php echo $arthref ?>&ldesc">
-                 <?php echo coverArtThumbnail($id, 175, isset($_REQUEST['version']) ? $_REQUEST['version'] : $pagevsn); ?>
-              </a>
+                <?php echo coverArtThumbnail($id, 175, isset($_REQUEST['version']) ? $_REQUEST['version'] : $pagevsn, "", $cover_alt_text);
+                echo "</a>";
+                // If we're logged in and this game doesn't have a cover art description, 
+                // show a link to add one. 
+                if ($curuser && !$cover_art_description) {
+                    global $nonce;
+                    echo "<style nonce='$nonce'>.link_below_cover_viewgame { max-width: 35vw; height: auto; font-size: .7em; text-align: center;}</style>";
+                    echo "<div class='link_below_cover_viewgame'>";
+                    echo "<a href=\"editgame?&id=$id\" "
+                    . "title=\"To help make IFDB more accessible, click to edit the page and add a cover art description.\">Add an image description</a></div>";
+                } ?>
+
            </div>
                <?php
 } // if ($hasart)