Build a recipe card with media
Finish this recipe card so all its media is fast, sharp and accessible:
1. Photo: wrap the image in a <picture> with a <source> offering dal.avif (type image/avif) before the JPEG. Give the <img> an alt text and its size 800 × 600.
2. Video: the cooking video needs player controls, the poster dal-poster.jpg, no preloading, and English captions from dal-en.vtt that are on by default (kind captions, language en, label English).
3. Rating chart: the canvas already has drawing code. Give it a text alternative: role="img" and an aria-label that says the rating (4 out of 5), plus the same sentence as fallback content inside the canvas.
What Check tests
- The photo is a picture with an AVIF source before the JPEG img
- The photo has alt text and is sized 800 × 600
- The video has controls, the poster and no preloading
- English captions are attached and on by default
- The canvas has role img and an aria-label with the rating
- The canvas has fallback text with the rating
- The rating is still drawn (4 gold boxes)
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.