Alt and Title Attributes

Referring back to my previous post about background images, I was presented with another problem. How can I set an alt tag to a background image?

Soon after solving the 100vh issue, I go back to my HTML document soon after, ready to put in an alt attribute, and I cannot find the image. I remember that I made the section have a background image. Well, now how can I put in alt tag? You cannot do this is CSS. Worried that this presents inaccessibility, I Google away. I found that the alternative to an alt attribute is to put a title attribute in the section tag:

<section>some example code</section>

I stumbled upon a great article by Christian Heilmann. The question he gets asked the most is:

The WCAG guidelines state that every image needs alternative text but we are using CSS background images a lot [Ed: sometimes this question is also about CSS sprites] — how do you define alternative text for background images?

He answers by stating:

CSS background images which are by definition only of aesthetic value — not visual content of the document itself. If you need to put an image in the page that has meaning then use an IMG element and give it an alternative text in the alt attribute…That is it — images in CSS are only visual extras, not page content, hence they never need alternative text.

This is very interesting. I never thought that background images do not have any contextual meaning; they are just there to make a website more visually appealing.

Giving this some more thought, I realize that the image in the green section is important. It related very much to the content to the left of it (in my real world situation). If I do not have an alt tag, is that not good practice? Maybe I should avoid putting any meaningful images inside an area. I guess in this case, you have to compromise the fact that it may not be very accessible, meaning that the user may not see the image in the green section as meaningful.

I will definitely take this into consideration for the future. Also, perhaps I can think of a better way to use images in an HTML document, while having it be 100vh.