Image

Outcome: Complete the task with Image (Image). User context: Une fiche de recette garde de la place pour la photo avant le chargement et utilise la bonne résolution. Son texte alternatif décrit les détails utiles sur la nourriture. Recommended pattern: Image (Image). Why it fits: Utilisez une image lorsqu'elle explique, identifie, enregistre ou transmet une émotion mieux que le texte. Do not use it when: Ne pas mettre de texte clé dans des images. Évitez les fichiers énormes, les sauts de mise en page et les textes alternatifs inutiles. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): La norme couvre uniquement le champ d'application énuméré. Elle ne choisit ni le style visuel, ni la décision de produit, ni l'exemple de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.