chore(media): add alt-text

Author: amyheather

pages/media.qmd

@@ -25,7 +25,7 @@ This shows the image at its default size and alignment:
 ![](../images/south_cloisters.jpg)
 ```
 
-![](../images/south_cloisters.jpg)
+![](../images/south_cloisters.jpg){fig-alt="Default size and alignment example"}
 
 You can control the size of the image with `width`:
 
@@ -35,39 +35,39 @@ TODO: EXPLAIN CURLY BRACES
 ![](../images/south_cloisters.jpg){width=50%}
 ```
 
-![](../images/south_cloisters.jpg){width=50%}
+![](../images/south_cloisters.jpg){width=50% fig-alt="Custom width example"}
 
 To add a caption, put text inside the square brackets:
 
 ```markdown
 ![Photograph of South Cloisters on St Lukes Campus](../images/south_cloisters.jpg)
 ```
 
-![Photograph of South Cloisters on St Lukes Campus](../images/south_cloisters.jpg)
+![Photograph of South Cloisters on St Lukes Campus](../images/south_cloisters.jpg){fig-alt="Caption example"}
 
 We can control alignment using `fig-align`:
 
 ```markdown
 ![](../images/south_cloisters.jpg){fig-align="center"}
 ```
 
-![](../images/south_cloisters.jpg){fig-align="center"}
+![](../images/south_cloisters.jpg){fig-align="center" fig-alt="Centered figure example"}
 
 Adding `.lightbox` lets people click to see a larger version of the image - helpful when you have detailed figures or diagrams.
 
 ```markdown
 ![](../images/south_cloisters.jpg){.lightbox}
 ```
 
-![](../images/south_cloisters.jpg){.lightbox}
+![](../images/south_cloisters.jpg){.lightbox fig-alt="Lightbox example"}
 
 You can also make your figure a hyperlink:
 
 ```markdown
 [![](../images/south_cloisters.jpg)](https://medicine.exeter.ac.uk/research/facilities/southcloisters/)
 ```
 
-[![](../images/south_cloisters.jpg)](https://medicine.exeter.ac.uk/research/facilities/southcloisters/)
+[![](../images/south_cloisters.jpg)](https://medicine.exeter.ac.uk/research/facilities/southcloisters/){fig-alt="Linked image example"}
 
 To add alternative text to your image: