Home → TN eCampus Faculty → Accessibility → Decorative Images in Brightspace
8.7. Decorative Images in Brightspace
Course Images
Images can be an important part of any course. Images may enhance information or contribute to the understanding of text content. Those types of images need alternative text to be accessible. Other images are purely decorative and add no content value. Those types of images need to be correctly tagged as decorative in the alt text field add two quotation marks (“”) or "Null" in the alternative text field.
Which images do not need descriptive alt text?
- Images of visual styling such as borders, spacers, and corners
- Images supplementary to link text to improve its appearance or increase the clickable area
- Images that are illustrative of adjacent text but not contributing information (“eye-candy”)
- Images identified and described by surrounding text
You can learn more about decorative images at W3C Web Accessibility Initiative (new window).
Decorative or Substantive
Is this image decorative or substantive to the content?
That is a judgment call. This could be a whimsical or decorative image on a page, but there could be a number of ways to use this image in a meaningful way. The intent of the image depends on the context it is used.
Adding Images
Before you can add an image to a course page, you must add the file to the appropriate folder in Managed Files. Take a look at the steps to add an image and the appropriate alt text. Select and edit the page that needs an image. Choose the image (camera) icon from the menu.
Choose Course Offering Files to access the image file.
*Please note, the other options will add images to your course pages, but the files will not be stored in Brightspace for cloning and future uses of the course.
Navigate to the folder storing the image file. To preview the image, choose the file name first. Choose the radio button and choose Add to place the image on the course page.
If the image is decorative, there are two options:
- Enter Null in the Alternative Text box
- Check This image is decorative
Choose either procedure, but do not use both. This course has the same image twice, but the alt text is different.
Take a look at the HTML code to see the difference.
The first image is enclosed in a green border with the alt text in a red border. The second image is enclosed in a tan border with the alt text in a red border. A screen reader will work with each correctly by skipping the image. The second image will be flagged by Brightspace ’s accessibility checker. Brightspace uses this opportunity to guide users to double-check there is no useful description of the image.