Homework — alt, focus and contrast
Homework — make the links, images and colours prove themselves.
- Honest
alton every image. Read eachalt: 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 italt=""— an empty alt on purpose, so a screen reader skips it. - Real dimensions. Confirm each
<img>carrieswidthandheightmatching the picture's true pixel size (1024×664,500×743,640×480), andloading="lazy". Nosrcset— you know why. - 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
:focusinstead 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.