Alternative hands, role=img

lang/ui.en.json

@@ -712,9 +712,17 @@
     "description": "Link to home page"
   },
   "homepage-alt": {
+    "defaultMessage": "graph showing x, y, z graph lines representing micro:bit accelerometer data with clapping hands overlaid",
+    "description": "Alt text for image in homepage"
+  },
+  "homepage-alt-graph": {
     "defaultMessage": "graph showing x, y, z graph lines representing micro:bit accelerometer data",
     "description": "Alt text for image in homepage"
   },
+  "homepage-alt-hands": {
+    "defaultMessage": "clapping hands",
+    "description": "Alt text for image in homepage"
+  },
   "homepage-description": {
     "defaultMessage": "Train a machine learning model on your own movement data and run it on your micro:bit.",
     "description": "Home page description"

src/messages/ui.en.json

@@ -1188,11 +1188,23 @@
     }
   ],
   "homepage-alt": [
+    {
+      "type": 0,
+      "value": "graph showing x, y, z graph lines representing micro:bit accelerometer data with clapping hands overlaid"
+    }
+  ],
+  "homepage-alt-graph": [
     {
       "type": 0,
       "value": "graph showing x, y, z graph lines representing micro:bit accelerometer data"
     }
   ],
+  "homepage-alt-hands": [
+    {
+      "type": 0,
+      "value": "clapping hands"
+    }
+  ],
   "homepage-description": [
     {
       "type": 0,

src/pages/HomePage.tsx

@@ -17,7 +17,7 @@ import ResourceCard from "../components/ResourceCard";
 import YoutubeVideoEmbed from "../components/YoutubeVideoEmbed";
 import { useDeployment } from "../deployment";
 import { flags } from "../flags";
-import clap from "../images/clap-square.png";
+import clap from "../images/clap-hands.png";
 import xyzGraph from "../images/xyz-graph.png";
 import { createNewPageUrl } from "../urls";
 
@@ -80,23 +80,28 @@ const HomePage = () => {
               <FormattedMessage id="get-started-action" />
             </Button>
           </VStack>
-          <Box flex="1" position="relative">
+          <Box
+            flex="1"
+            position="relative"
+            role="img"
+            aria-label={intl.formatMessage({ id: "homepage-alt" })}
+          >
             <Image
               src={xyzGraph}
               borderRadius="lg"
               bgColor="white"
               pr={1}
-              alt={intl.formatMessage({ id: "homepage-alt" })}
+              alt={intl.formatMessage({ id: "homepage-alt-graph" })}
             />
             <Image
-              height="55%"
+              height="100%"
               position="absolute"
               bottom={0}
               left={0}
               src={clap}
               borderRadius="md"
               pr={1}
-              alt={intl.formatMessage({ id: "homepage-alt" })}
+              alt={intl.formatMessage({ id: "homepage-alt-hands" })}
             />
           </Box>
         </HStack>