Another Newbie issue: How do you add alts and target to a background image?

[JoyceOdell]

I'm making progress. Solidly into the; Do it. Now do it over, stage of proceedings, but I' getting more familiar with the program.

Before I start saving templates, I have what I *think* may be a minor issue to deal with.

I have background images. One is a tiled fill over the body area behind the apparant "page" The other  one sits front and center in what I believe would be called the masthead area of the page with the title of that particular collection or the page's purpose. That one is an actual image. I am assuming that it probably ought to be identified?

It's linked through the CSS Designer, and it shows up in the selector's list, and I can go to the CSS code and edit it. But being linked through the CSS designer as a background image, it doesn't show up in source code. Only its continer does. I don't know of any reliable way of making it show up in the properties panel to give it an alt or a target description.

I was fumbling around with it and it turned up once, but I couldn't get get the link to stick by using either the pointer gismo that you drag to the files list *or* through navigating to it through the folder directories. Nor could I get it to stick when I copy/pasted it from one box to the other. It would paste in, but not stay when I hit return.

And then I lost the property panel's recognition that it exists, and since I don't know how I got it to show up the first time, I don't know how to get it back.

I could be chasing a chimera and one needn't bother with giving background images an alt at all. But I don't know that. Thought that it would be reasonable to ask before saying the hell with it and carrying on anyhow.

Anyone?

[Jon Fritz · Accepted solution]

Background images don't get alt attributes. That is only for content that doesn't load, either because the file is missing, or if the viewer is using a screen reader.

There's no way to add an alt attribute to images that are being brought in through CSS. It's only added inside <img> tags.

A general rule of thumb: HTML is for content, CSS is for style. 

[JoyceOdell]

Thank you. That sorts that problem nicely.

[Nancy OShea · Accepted solution]

All depends on what the image is used for. 

Decorations and patterns don't need to be described to screen readers.  But brands, logos, text, products and anything else of importance should be described for accessibility reasons. 

The rule of thumb is this:

• Use CSS background images for decorations only. 
• Use HTML <img> for important foreground images.  Add ALT and TITLE attributes to <img> as required by W3C and WCAG standards.

[JoyceOdell]

Sounds like I'm going to have to go back and rebuild my masthead. I can split the background and foreground elements and save the foreground ones as .pngs. 

I'm definitely in the; "Do it. Now do it over" stage of this.  At least by the end of it, I'll have learned something.