Using an Image as a Heading
Please note that this practice is not recommended as the image will not be easy to read on a mobile device and coding it correctly is not intuitive. It is better to style headings with CSS; however, some of our courses use images that provide a visually designed heading, such as this one:
To ensure accessibility
- Upload the image
- Insert the image into the page
- Add alt text that matches the image text
- Select the image and choose the appropriate heading level
- In source view, replace the height and width attributes with this code:
style="min-width: 100%;"
to ensure the image displays correctly in all devices.
<h4><img src="linktoimage" alt="Topic Readings" style="min-width: 100%;" /></h4>
Updated August, 2024