cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
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
Highlighted

Hi Jian,

Do you have a screenshot you could share? I'd love to see what you're using.

KC

Highlighted

Hi Kelley,

We aren't using the images to convey information. They are simply page banners to add some pizazz, the alt text is the same as the page title. 

Do you have an example of the branded banner(s) that you created? That would be awesome. 

Kyle

Highlighted
Community Coach
Community Coach

Hi kylecage

Per accessibility standards, you should never use an image to convey information. Screen-reader tech will just identify it as an image, and not be able to read the text within the image. For a vision disabled person, a picture is not worth a thousand words, only the words are.

jsu1@utk.edu  is correct - add ALT Text with the equivalent info, or use HTML.

I use a branded banners for all of our school's profession development courses, and built them using HTML, then just copy and revise as appropriate wherever needed.

KLM

Highlighted

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

Highlighted

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

Highlighted

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.

Highlighted

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

Highlighted

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. 

Highlighted
Community Coach
Community Coach

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

This is our experience as well.

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.