Images Attributes

ALT Text, Pixel Size, Crediting and Backgrounds

What is ALT Text?

Alternate Text (or "ALT text") is the accessible, descriptive text that should be included by faculty or course designers whenever any images are embedded on a webpage, D2L tool, or document.   This practice can help make your pages more accessible for screen-readers.   

We recommend using the latest D2L processes for adding ALT text to any content you create using the Insert Stuff. Alternately, check out these resources:

How does a screen reader handle ALT Text?  

Can I add ALT text using HTML Code?

Images: Width & Pixel Size

Version 10 of D2l Brightspace limited the width of all content to 960 pixels, and many of our PCC master versions of courses further limit the width of the content in HTML pages to 700 pixels for best reading comprehension (studies have shown that reading comprehension decreases with long line lengths). 

For single-column layouts, what should be our maximum graphics width?

Therefore, limiting graphics to 660 pixels wide or less enables them to fit in the space allotted and allows room for margins (white space) on the page which are also important for reading comprehension and visual presentation.

For dual-column layouts, what's our maximum graphics width?

On your Course Home page, with the standard two-column layout for widgets (with one narrow column and one wide column), graphics should be 285 pixels wide or less in the narrow column widgets, and 600 pixels wide or less in the wide column widgets.

Also, due to varying connection speeds available to students, keep the size of any graphics small (kilobyte-wise). 100K in size or smaller is good.

Learn More about ALT Text

 To learn more, read How to Write Great Alt Text - And Why It Matters (2020) by Pamela S. Hogle and Deni Elliott.  This reading is also linked from our LEAD 181 Introduction to HTML course for faculty and staff.   To learn more, visit our Faculty Development & Training page. 

Images: Credit Your Sources

Credit the sources of your images when the sources request that you do so and place the credit line near the image.

Images: Background

Placing text on top of background images makes the text difficult for anyone to read.

As such, don’t use background images behind any text. 

Here's an example illustrating the problem:

Course Usage Note

This page is directly linked in the following Faculty Development Courses:

Click here to return to our Design Accessibility page.