As a screen reader user I want workout images and body maps to have text descriptions so I understand the visual content

[ChristopherRotnes]

Summary

Preview images of uploaded workout programs in MuscleMap.jsx (line 295) use alt=\"\", marking them as decorative when they are in fact content images. The BodySVG and HeatmapBodySVG components in bodymap.jsx render without a <title>, <desc>, or aria-label, giving screen reader users no understanding of what the body map represents or which muscles are highlighted.

Priority

High

Acceptance criteria

• Preview images in MuscleMap.jsx have a meaningful alt attribute (e.g. \"Bilde av treningsprogram {index + 1}\")
• BodySVG <svg> element has aria-label that describes the view and context (e.g. \"Frontside: primære og sekundære muskler for gjeldende økt\")
• HeatmapBodySVG <svg> element has aria-label appropriate to its context (report view, history view, etc.) — passed in as a prop so callers can customise it
• Purely decorative uses of BodySVG (e.g. template thumbnails in Bibliotek) set aria-hidden=\"true\" on the SVG

[ChristopherRotnes]

Fixed in PR #88 (a11y/semantic-markup): added role="img" and aria-label to BodySVG and HeatmapBodySVG. Verified by developer.