{"id":"code-hs-html-alt-text-four-images","audience":"high-school","category":"coding","track":"coding","technique":"context","title":"Write alt text for a club page, including the decorative image","free":false,"task":"Your robotics club page needs alt text. Write it for all 4 images, each under 12 words and never starting with 'Image of', 'Picture of' or 'Photo of'. The divider is decorative, so it gets alt=\"\" and role=\"presentation\". Club style: chart alts start with 'Chart:' and give the takeaway, here that the average match score rose from 42 to 87. Return only the 4 img tags, one per line, with src and class unchanged, in exactly 1 code block, under 20 words of text.","materialLabel":"Your page's HTML (attached to your prompt automatically)","material":"<!-- index.html - Gearheads Robotics club page (Ms. Patel's Web Design class) -->\n<main>\n  <h1>Gearheads Robotics</h1>\n  <img class=\"hero\" src=\"team-2026.jpg\">\n  <p>Our 2026 team: 14 students from grades 9 to 12, after winning the\n     Lakeview Regional in March.</p>\n\n  <img class=\"divider\" src=\"gear-divider.png\">\n\n  <h2>Our robot</h2>\n  <img class=\"photo\" src=\"arm-closeup.jpg\">\n  <p>Close-up of Rusty's claw arm, which Dev and Ana rebuilt with a\n     3D-printed gripper so it can pick up both cones and cubes.</p>\n\n  <h2>How we improved</h2>\n  <img class=\"chart\" src=\"scores-by-week.png\">\n  <table class=\"data\">\n    <tr><th>Week</th><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>\n    <tr><th>Avg score</th><td>42</td><td>51</td><td>60</td><td>66</td><td>79</td><td>87</td></tr>\n  </table>\n</main>\n\n<!-- Ms. Patel's feedback: \"Run the accessibility checker before you submit.\n     It flagged 4 images with missing alt attributes.\" -->","rules":[{"type":"codeBlocks","count":1},{"type":"maxCodeLines","max":4},{"type":"maxProseWords","max":20}],"mistakes":[{"title":"Describing the divider","why":"The AI writes alt text for every image, so screen readers announce a meaningless gear.","fix":"Add: \"The divider is decorative: alt=\\\"\\\" and role=\\\"presentation\\\".\"","checks":["r0"]},{"title":"A chart alt with no point","why":"The AI writes 'bar chart of scores', which hides the takeaway.","fix":"Add: \"Chart alt starts with 'Chart:' and says the average score rose from 42 to 87.\"","checks":["r1"]},{"title":"'Image of...' openers","why":"Screen readers already say 'image', so the AI's favorite opener wastes words.","fix":"Add: \"Under 12 words each, never start with Image of, Picture of or Photo of.\"","checks":["r2"]},{"title":"The whole page back","why":"The AI reprints the full HTML and explains alt text.","fix":"Add: \"Return only the 4 img tags, one per line, no text.\"","checks":["codeBlocks","maxCodeLines","maxProseWords"]}],"promptHints":[{"label":"Handles the decorative image","patterns":["decorative","divider","alt=\\\\?\"\\\\?\"","empty alt"]},{"label":"Gives the chart's takeaway","patterns":["42","87","rose","takeaway","chart:"]},{"label":"Caps each alt","patterns":["\\d+\\s*words"]},{"label":"Bans the usual opener","patterns":["image of","picture of","photo of"]},{"label":"Asks for only the img tags","patterns":["only the.{0,10}img","just the.{0,10}(img|tags)"]}],"hint":"Good alt text depends on what each image is for, which the AI has to guess. Tell it which image is decorative, what the chart should say, and how short to keep each one.","rubricLabels":["The gear-divider.png image has an empty alt=\"\" and role=\"presentation\"","The chart's alt starts with 'Chart:' and says the average match score rose from 42 to 87","Each alt is under 12 words, none starts with Image of, Picture of or Photo of, and only the 4 img tags are returned with their src and class unchanged"]}