An informative image often requires more description than the alt text allows (ideally 120 characters), so a longer description needs to be added. There are two ways to do this. You can include it on the page with the image in a show/hide toggle or link a document below the image.
<figure style="margin: 2.5rem auto; width: 80%;">
<img src="ImageLink" alt="Short description of the image" style="width: 100%; border: 1px solid #000000;"/>
<figcaption>
<details style="border: 1px solid #444444; padding: 15px;">
<summary>Image Caption Text Description</summary>
<p>Full description of the image. This may include a list (this works well for flowcharts) or a table (works well for bar and line charts). </p>
</details>
</figcaption>
</figure>Note: Both the image and the description have borders, and those can be removed or modified.
Long Description in a Linked Document
Another good way to associate a description with an image is to link a document below it.
We recommend this workflow:
- Write the image description in a Word document.
- Give it a descriptive title, such as Accommodation Process Text Description.
- Upload it to the course, and link it below the image.
- In the Link Options, choose Preview inline so that the description can be opened on the page but does not overlay the image as it would with the default link setting.
People can view the document on the page in Preview mode or download it, and Word documents are easier to read than PDFs for people who use assistive technology.
Quick Tip: Seek guidance on describing images
Poet Image Description Training is a very helpful resource for learning to describe images. The image description can be text can include other elements, such as lists or tables.
0 Comments
Add your comment