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:

Topic readings

To ensure accessibility

  1. Upload the image
  2. Insert the image into the page
  3. Add alt text that matches the image text
  4. Select the image and choose the appropriate heading level
  5. 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