fix: add alt text to tool images

techmatters · Nov 29, 2023 · ea65f1b · ea65f1b
1 parent 76fc58c
commit ea65f1b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/localization/locales/en-US.json b/src/localization/locales/en-US.json
@@ -164,7 +164,8 @@
             "img": {
                 "height": "140",
                 "width": "250",
-                "src": "tools/kobotoolbox-screenshot.png"
+                "src": "tools/kobotoolbox-screenshot.png",
+                "alt": "A phone, a laptop, and a tablet, each displaying a data collection form. The tool’s logo is in the foreground."
             },
             "description": [
                 "Design and build forms quickly",
@@ -181,7 +182,8 @@
             "img": {
                 "height": "140",
                 "width": "250",
-                "src": "tools/landscale-screenshot.png"
+                "src": "tools/landscale-screenshot.png",
+                "alt": "A dashboard containing charts and graphs about a landscape. The tool’s logo is in the foreground."
             },
             "description": [
                 "Assess landscape sustainability performance",
@@ -198,6 +200,7 @@
                 "height": "188",
                 "width": "250",
                 "src": "tools/story-maps.png",
+                "alt": "A satellite map of a bend in a river, overlayed by a window containing a picture and a block of text.",
                 "caption": "Rocky Hill’s Story Map"
             },
             "description": ["Create beautiful map-based stories"],

diff --git a/src/tool/components/ToolCard.js b/src/tool/components/ToolCard.js
@@ -42,7 +42,7 @@ const ToolIconAndLink = ({ tool, title, external }) => {
       <Box
         component="img"
         src={toolImage}
-        alt=""
+        alt={t(`tools.${tool}.img.alt`)}
         width={t(`tools.${tool}.img.width`)}
         height={t(`tools.${tool}.img.height`)}
         sx={{