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.
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.
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.
firstname.lastname@example.org 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.
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...)
I recently read that not every image needs to be described, like Banners or pure decorative elements.
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.
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.
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.