Homework

Homework — alt, focus and contrast

Homework — make the links, images and colours prove themselves.

  1. Honest alt on every image. Read each alt: does it say what the picture is, or does it echo a filename? Fix any that describe the file. If you add a purely decorative image anywhere, give it alt="" — an empty alt on purpose, so a screen reader skips it.
  2. Real dimensions. Confirm each <img> carries width and height matching the picture's true pixel size (1024×664, 500×743, 640×480), and loading="lazy". No srcset — you know why.
  3. The focus ring. Click into the page, then Tab through it: every link and button should show a clear ring, and the ring must sit off the control, not on its edge. Then click a control with the mouse — no ring. If a ring flashes on mouse click, you styled :focus instead of :focus-visible.

Break it on purpose: switch to the light theme (set data-theme="light" on <html> in the dev tools). Find --text-muted in the Styles panel and temporarily change it to the dark theme's grey, #8b93b0. Watch the picture dates go faint, and measure the contrast — it lands around 2.84:1, well under the 4.5:1 that body text needs. Then put it back to #5c6480 and watch it recover. That one experiment is the whole reason the stylesheet keeps a separate muted grey per theme: a colour that passes in the dark can fail in the light.

Try it alone: look at the inline "Astronomy Picture of the Day" credit link. At rest it's marked only by colour. Decide, and be able to say why: is that readable enough here, or would you underline it? There's no single right answer — there's a defensible one.

Required result: every image has honest alt and real dimensions; every control shows a keyboard-only focus ring that sits off the control; and you can state the light-theme contrast number you measured.

To submit: a screenshot of the light theme with --text-muted set to #8b93b0 (dates faint) next to the contrast reading, and one sentence on your decision about the credit link.

Next. Your three cards are stacked in a single column, no matter how wide the screen. That's the last thing missing: layout. Next lesson — flexbox and grid — turns that column into a gallery that flows into as many columns as the screen can hold, and back down to one on a phone.