homepage Welcome to WebmasterWorld Guest from 184.73.52.98
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / WebmasterWorld / Accessibility and Usability
Forum Library, Charter, Moderators: ergophobe

Accessibility and Usability Forum

    
CSS and non-content images
Decorative images are great--but most of them don't belong in the markup
bedlam




msg:1582831
 7:42 pm on Feb 18, 2006 (gmt 0)

This post comes out of my comments in another thread [webmasterworld.com] in this forum where I suggested that non-content images should be removed from the HTML markup of a web page. Because some participants in the thread seemed to think I was advocating the complete removal of images, I've decided to expand a bit on the theme here.

The basic idea is that I want all of you webmasters to keep your beautifully-designed pages, but I want you to place the decorative elements where they belong--in the stylesheet.

Getting non-content images out of web pages


The uses of images
Sometimes, images are crucial important parts of the content of webpages. Diagrams on how-to sites, graphs on informational sites, photos of the destination on tourism sites, samples on portfolio site, product images on e-commerce sites are all simply indispensible.*

But there are other uses of images on webpages; whatever your opinions about design on the web, I think you'll agree that none of these types of images are critically important in quite the same way as the categories above:

  • any image that appears on every page,
  • graphical list-item bullets,
  • decorative stock photos,
  • logos,
  • rounded corners,
  • drop shadows,
  • graphical headlines,
  • graphical navigation elements,
  • graphical links,

These are the images that I propose you remove from your pages.

Why would I want to remove images from my pages anyhow?

In fact, this is the wrong question. The question to ask is "why put these non-content images into pages in the first place?" or "Why dilute your content with irrelevant code?"--and the only possible answer is 'to serve the design/branding/CI'. The reasons for not including such images in pages are multiple--and there are many reasons besides accessibility including the possible simplification of site-wide design changes and possible SEO benefits--but I'm going to let the w3c do the talking [w3.org] with respect to the accessibility benefits.

Fine. So what can we do about it?

Two things (which really go hand in hand):

  1. Use correct markup, and
  2. Use a stylesheet!

Using correct, w3-validator checked markup has two main benefits: first, if your stylesheet is absent for any reason, then your web page will look like a plain, but well-organized and quite readable document. Secondly, using correct markup will make the use of css much easier since when you use broken markup, you surrender the rendering of your page to various useragents' error-handling routines {shudder} Nobody wants that.

All right, all right, but HOW do we do it?

Here, I'm just going to provide a couple of code samples along with a few references. I've chosen as representative situations a page header with some 'happy suit people' images, and a list with graphical bullets. I'd have included a nav menu, but I couldn't do half as good a job here as has already been done elsewhere [google.com].

Page header

In the olden days, we all used to code page headers this way:


<table width="760" bgcolor="#FFFFFF">
<tr>
<td width="760" height="50">
<img src="images/company_logo.gif" width="200" height="50" alt="Somecompany logo" />
</td>
</tr>
<tr>
<td width="760" height="100">
<img src="images/happy_suit_people.jpg" width="760" height="100" alt="happy suit people" />
</td>
</tr>
</table>

Simple enough, right? But arguably, neither of those images is actually content as such.** If tasked with producing something that visually corresponded to the above I'd do something like this in the markup:


<div id="header">
<b class="company_logo">Somecompany name</b>
</div>

...that's it.*** Besides that, I'd add this to the css file (css shorthand used to demonstrate how compact it can be...):


#header {
/* Standard css, nice and simple: */
width:760px;
height:150px;
background:#ffffff url(images/happy_suit_people.jpg) no-repeat 0 100%;
}
h6.company_logo {
/* For more information about this technique, search for [url=http://www.google.com/search?q=Leahy%2FLangridge+Image+Replacement]Leahy/Langridge+Image+Replacement[/url] */
width:200px;
height:0;
overflow:hidden;
padding-top:50px;
background-color:#ffffff url(images/company_logo.gif) no-repeat background-position:0 0;
}

Again, that's all. This code should produce something visually identical to the table-based header above, but which will degrade, absent css, to a single line of bold text: Somecompany name****

List

Another favourite. I can't describe how often I've come upon a nicely formatted list that's just a huge table with a billion images added as bullets, something like this:


<table>
<tr>
<td><img src="images/list_bullet.gif" width="10" height="20" alt="" /></td><td>Lorem</td>
</tr>
<tr>
<td><img src="images/list_bullet.gif" width="10" height="20" alt="" /></td><td>Ipsum</td>
</tr>
<tr>
<td><img src="images/list_bullet.gif" width="10" height="20" alt="" /></td><td>Dolor</td>
</tr>
</table>

...which is just plain silly. Aside from accessiblilty, it's much more work to type it... We could approach a visually identical list with this markup:


<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>

...and this css:


ul {
list-style-type:none;
padding:0;
margin:0 0 1.5em 0;
}
ul li {
padding-left:25px;
background-color:transparent url(images/list_bullet.gif) no-repeat 15px 5px;
}

Again, this list will look very similar to the previous one, but will likely make a lot more sense in a screenreader.

You can have it both ways!

Nobody's suggesting a return to a text-only web--graphics are too important and too darned useful in too many situations for anybody to advocate doing away with them. But there are situations where a pure or nearly-pure text document is infinitely preferable to a giant mass of spacer gifs and pointless list-item bullets. The advantage to pulling the purely decorative stuff out of the markup and placing it in the stylesheet instead is that you can have both without coding an extra byte.

-b


*There are other threads in this forum about how to use html's alt [webmasterworld.com] and longdesc [webmasterworld.com] attributes in the service of accessibility.

**Though we could definitely have a discussion about whether this is or should be true of the logo...here, I'm going to assume it's dispensable--but feel free to change my mind in another thread.

***We could also debate the correct markup of a logo--but not here. I've marked it up in an arguably 'nonsemantic' way here, but added a class for the purpose of more accurately describing the marked-up information.

****Just a note about image replacement techniques in general. I like the 'LIR' sort here, but it's important to make an informed choice about them; it can be tricky to come up with a solution that works in any permutation of both of the following circumstances: a) images are/are not disabled, css is/is not disabled...

[edited by: DrDoc at 9:05 pm (utc) on Feb. 18, 2006]
[edit reason] Added link to thread refered to in this post [/edit]

 

le_gber




msg:1582832
 11:46 am on Feb 20, 2006 (gmt 0)

bedlam,

good post here

I would however argue about ... the logo.

most people will clik on the logo to go back to the homepage - it's one of the few 'rules' about designing a website - but by making it a background image in css you cannot click 'on' it.

bedlam




msg:1582833
 5:41 pm on Feb 20, 2006 (gmt 0)

most people will clik on the logo to go back to the homepage - it's one of the few 'rules' about designing a website - but by making it a background image in css you cannot click 'on' it.

Ah. In fact, not everyone agrees [google.com] that logos should be clickable.

But you're right, it was my oversight not to have included the link if only for the purpose of demonstration. I think if you look a bit more carefully, you 'll see it isn't actually a problem. Of course, if you look more carefully, you'll also see that my poor copy and paste technique incorporated several errors into the post above, so don't look too carefully :-o

The logo is still a text object, despite the fact that the text is not visible. Provided you set up the styles correctly, you can have your logo be clickable. I'll give you the 'no image' way, and I'll also give you the compromise way:

No images

<div id="header">
<b class="company_logo"><a href="/" title="Return to home page">Somecompany name</a></b>
</div>

#header {
/* Standard css, nice and simple: */
width:760px;
height:150px;
background:#ffffff url(images/happy_suit_people.jpg) no-repeat 0 100%;
}
b.company_logo {
/* For more information about this technique, search for Leahy/Langridge+Image+Replacement */
position:relative;
display:block;
width:200px;
height:0;
overflow:hidden;
padding-top:50px;
background:#ffffff url(images/company_logo.gif) no-repeat 0 0;
}
b.company_logo a {
display:block;
width:200px;
height:0;
position:absolute;
top:0;
left:0;
padding-top:50px;
}

So, for a linked background image, just add the red code and correct the bolded code. I believe this works everywhere I've tested it except IE5 Mac.

Logo Image Only

Since I agree that logos may be in a gray area, since some like to mark up the text of a logo as <h1>, and since it demonstrates another image replacement technique, here's a way with the image in the source:

<div id="header">
<h1 class="company_logo"><a href="/" title="Return to home page"><img src="images/company_logo.gif" alt="company logo" /><br />Somecompany name</a></h1>
</div>

h1.logo {
width:200px;
height:200px;
overflow:hidden;
position:relative;
}
h1.logo a {
display:block;
width:200px;
height:50px;
position:absolute;
top:0;
left:0;
h1.company_logo a img {
border-style:none;
}
}

This method lets you a) mark up the company name etc as an <h1> element, b) include the image, c) link the image, and d) looks pretty good if, for any reason, the css goes missing.

-b

le_gber




msg:1582834
 4:36 pm on Feb 22, 2006 (gmt 0)

bedlam,

thanks for the post.

I've been looking at some image replacement techniques lately and it is something I am still not too sure about - regarding the logo.

I believe that a visually impaired person wouldn't prefer one method over the other - i.e. hearing:
link to home page > mycompanyname logo
or
link to home page > mycompanyname (or mysiteurl as I have seen very often)

Telling them that their is a logo there would probably allow them to imagine on how the page is laid out.

... but then again I can be wrong

Just as a side note, I noticed that many website are using h1's to hold their site url / company name and use another one for their page title which is not semantically correct - and this is replicated throughout their website as the same image replacement technique is used on all the pages. Is this a know convention - using h1's - or is this used because it

  • appears at the top of the page
  • it is what is used in most tutorials

    you also used h1 in your example ;)

  • bedlam




    msg:1582835
     10:37 pm on Feb 22, 2006 (gmt 0)

    Yep, I used h1 in the example because it's a common practice for people to mark up the site name that way, presumably because they believe it's one of the most important elements on the page.

    At the risk of changing the subject too much, I notice you said this:

    I noticed that many website are using h1's to hold their site url / company name and use another one for their page title which is not semantically correct

    But, as has been discussed at great length here before [webmasterworld.com], this may be too narrow a view of what is 'semantic markup' for HTML to support. It's exactly this kind of response that I was trying to pre-empt by saying this:

    I've marked it up in an arguably 'nonsemantic' way here, but added a class for the purpose of more accurately describing the marked-up information.

    ;-p

    -b

    Global Options:
     top home search open messages active posts  
     

    Home / Forums Index / WebmasterWorld / Accessibility and Usability
    rss feed

    All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
    Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
    © Webmaster World 1996-2014 all rights reserved