View Slideshow [3]

CSS and images enabled

• CSS disabled
• Images disabled

---

Note: If you wish to skip my (possibly unnecessary and yawn-inducing) pre-amble and get straight to my "background-image instead of text" technique, skip to "A solution for now" :)

As discussed in my previous article, I have made some under the bonnet changes to my site, that have also made me a little more aware of some accessibility issues that I had fallen into a habit of overlooking.

The first was my ignorance of the importance of :focus, which had now been addressed.

:focus has also had a bit of exposure in recent articles:

Sam Brown's "Getting rid of the dotted border around links the right way", which also points to a great article on 24ways called "Don't Lose Your :focus".

Anyway ...

The other challenge I faced was how to keep my site usable, navigable and of value, with images disabled. And this threw up a few problems.

The main issue concerns the use of "background-images instead of text" on my pages. There have been many articles over the years over-viewing techniques of this, with many also discussing the pros and cons from various stand points. Here is an article showing 9 commonly used methods: "Nine Techniques for CSS Image Replacement".

Now. I have the following elements that use background-images instead of text:

• Top logo (kevadamson.com)
• Top navigation (Illustration, Web Design, Graphic Design, Animation, Blog)
• Page headings
• Various section headings

The font used is one I have created myself. I have yet to convert the characters into an actual usable font (.ttf/.otf), so I've made the headings by arranging the vectored character forms to form words, and then exported them as images.

I'm excited that, with advancements in @font-face methods, there may soon be a time when the headings will be actual html text. This would be done using:

• @font-face syntax
• Some advanced CSS3 techniques to change individual character sizes / kerning
• Some CSS rotation to get the text displaying as it is now

This would knock the need for any "background-image instead of text" technique on the head. I think that browser support and rendering is still 'early days', plus there would be the issue of keeping my font protected and such. Worth some experimentation, but probably not an option right now.

A solution for now

The issue is this:

With my headings as background images, when CSS is disabled, my content reads nice and clean, with my semantics in pretty good order. But, obviously, with images disabled, that 'content' is not viewable.

I'm of the opinion that: if an image is essentially being used in this way (as an actual heading amoungst text content) then it is not right to be using an actual img tag to display it. An img tag should be used if the content is an actual image (a photo, illustration etc.). To me, that is all part of the importance of keeping layout and content separate, and keeping semantics as solid as possible. But what to do about the obvious issue of 'content' not being available with images disabled?

In a way, it would be nice if CSS had a solution to this, even in the short term. Let's face it, this is a 'real world' situation, with many websites over the years using "background-image instead of text" to get around font limitations that could weaken a brand and the like. Perhaps if something like the following CSS syntax had been introduced:

h2.welcome { title-alt: true; ... or h2.welcome { replaced-text: true; ... or something :)

You would then place a title on the h2 tag which displays like the alt property when images are disabled. Sounds simple to me, but there is probably a million reasons why this is a dumb idea :)

What I've done

After some head-scratching, and some internal brain fights, I came up with the following to cover both bases:

<h1 id="h_welcome" title="Welcome"><span>Welcome<span><img alt="Welcome" src="blank.gif" /></h1>

#h_welcome span { text-indent: -999em; overflow: hidden; font-size: 1px; line-height: 1px; display: inline-block; }
#h_welcome { background: url(welcome_heading.png) no-repeat 0 0; width: 200px; height: 100px; }
#h_welcome img { font: bold 30px/32px Arial, Helvetica, sans-serif; color: #333; }

The images in the slide-show above will show how things look with CSS disabled, and also with images disabled. Or, if you have web developer toolbar for FireFox (or other), use it to disable either CSS or images on this page.

The blank.gif image is a 1px x 1px completely transparent .gif that can be used in all cases.

The styling on #h_welcome img is to replicate, as much as possible, the size, look and feel of the text as it is displayed as an image, and/or to fit the containing space taken up by the background image.

The pros

• Content available when CSS is disabled
• Content available when images are disabled
• The blank.gif image is small and only has to be loaded once

The cons

• Let's face it, this is still a trick / hack
• Having a 1px x 1px transparent image does have semantics issues
• You're doubling up on a message, which may have an impact on SEO and screen-reader considerations
• It's adding extra mark-up to a page

Yet again, 'swings and roundabouts' springs to mind :)

I guess the light at the end of the tunnel is that, with @font-face and CSS3 advancements, and browsers increasing support for them, work-arounds for issues such as these will be replaced with the perfect solution.

Thoughts? I'm sure you have them. C'mon! Spill those constructive beans :)