Showing results for 
Search instead for 
Did you mean: 
Community Member

Page Banners - HTML or PNG file?

I am working on some training courses and am using banner images for each individual item in a module (i.e. Pages, Discussions, Quizzes, etc.). I am wondering if the best approach for adding banners to a template course that might be used by many instructors is with image files or should this be something done in the HTML editor? One good thing about doing it in the HTML is that then the banner text can be editable by the user through the RCE. The problem with that is that the user may try to add too much text and make the banner look weird. Also, a benefit of using image files is that it's easier for individuals to customize their banners as most people are more familiar with using photo editing software than they are with manipulating HTML code. Thoughts? Here is an example of the banner image file that I'm using. I edit the text in Photoshop and export the PNG files. 

Screenshot of Canvas page with banner image.

32 Replies
Community Team
Community Team

kylecage‌, this is an interesting question. Your image didn't come through; could you provide it? Also, are you including very descriptive alt-text along with your PNG file? My immediate thoughts went to accessibility for screen readers.

Forgot to add the image. It's there now. My thinking on accessibility is that the text in the PNG file is just the title of the page so with the proper alt-text, the screenreader would basically just read the same title twice. 

Community Member

Are you expecting faculty to edit a required heading or is this just an optional resource?  I disagree with your comment that most folks are comfortable with graphic editing software. I think most are not. Our faculty tend to add no graphic if it requires editing.  It would look so much better if there was a way to suppress the page title. Alt tag takes care of screen readers so way are we stuck with the title? Otherwise I think you should use the graphic. The days of coding by non-technical folks should be past unless there were a way to make it a fill in the blank.  It's a nice design.

Community Coach
Community Coach

Our faculty tend to add no graphic if it requires editing.

This is our experience as well.

Community Member

I think the idea is that the page banners would match the page titles, so if Faculty are using this template as is, they wouldn't need to change the text in the banners. My thinking is that you get a better quality image if you use Photoshop to export the page banners as PNG files. What I meant is that I feel like more faculty are probably familiar with using SOME kind of photo editing software, not necessarily Photoshop, to create their own course banners from scratch as opposed to how many would be familiar with manipulating HTML code. 

I agree. I provide page banners as PNG files in my course template for online instructors.  

I recently read that not every image needs to be described, like Banners or pure decorative elements. 

Reference: Accessibility testing - W3C Wiki: The spirit of the law.

Unfortunately, many people reading such guidance misunderstand what a genuine text equivalent for a spacer and decorative elements should be, and produce markup like this:

<img alt="fancy border" src="fancy-border.gif" border="0">

In fact, since these images convey no new information and have no functionality, the right text equivalent for those images would be an empty string (alt=""), which causes the screenreader to just skip over the alt attribute and not read it out. It is very annoying for a screenreader user to have to listen to text such as "fancy border" read out over and over again, when it does not provide them with any useful information.

That certainly makes sense,  @Su_UT ‌! I was thinking more along the lines of making sure that the alt text isn't something obscure like 040506004.jpg.

I totally agree, stefaniesanders.  Appropriate alt text is definitely a must.  


I am sharing “The spirit of the law” info, because based on the previous accessibility info I had (e.g., Accessibility within Canvas), I always thought that every image has to have alt text provided. To me, it is a very helpful finding that an empty string is ok, when appropriate, so that the screenreader won’t have to “read the same title twice”, as kylecage mentioned.

Here is another relevant resource: Provide a text alternative for images where appropriate.

(Sorry if this is off topic...) Smiley Wink