Well, if you were to look at my home site, you would see pages that validate to XHTML 1.1 (but are served as XHTML 1.0), and WAI-AAA.

This includes an old WordPress blog (gotta update it someday...) and a Gallery 2 installation.

Validation is NOT DIFFICULT. It is damn easy. I do it by habit, and it is a HUGE help in debugging. Especially active code, such as DHTML, PHP and AJAX. I just fixed a bug in a site I'm developing right now because the validator told me that there was an extra </div>. These bugs happen all the time when you are generating dynamic content.

WAI validation is hardly any extra work at all. The people who say that you can't have attractive, active content that validates and is accessible have never visited any of my sites.

Is there ever a compelling reason NOT write valid code?

Not that I would ever endorse sloppy invalid code, I can imagine occasions when it really doesn't matter...

I'm thinking of a page (maybe even a whole site) that is little more than a digital equivalent of a handwritten note pinned to a noticeboard

Not having the tools, skills, time, etc to craft a work of elegance should not preclude anyone from getting *their* message out there...

I'm afraid to find out the answer...

Day 22: Using real lists (or faking them properly)
[diveintoaccessibility.org...]

You should provide alt attributes for all your bullet images. Use an asterisk as the alt text, to simulate what the list would look like if you were using real list markup. (To prevent this from displaying as a tooltip in visual browsers, you should also provide an empty title attribute.)

Validation is NOT DIFFICULT.

Yes it is. That's why 99.9% of the web is invalid.

Its not difficult for you or I because we've validated thousands, tens of thousands, hundreds of thousands of pages. As you say, it becomes habit.

But, for the rest of the world, validation is a daunting task that many avoid. If it works in the two major browsers, that is all that matters.

Just because you validate, doesn't mean that you can automatically wear the WAI badge. In fact, many sites that validate don't pass WAI-A, the most basic level.

Please, don't tell everyone that validation is easy, it is not. For someone who has never validated a site before, being presented with the W3 validation results is a sight to behold. :)

You should provide alt attributes for all your bullet images

I often use a

list-style-image: url

for ULs and/or LIs... anyone know how would I assign an alt attribute?

presented with the W3 validation results is a sight to behold

Indeed. A thought just occured to me... I don't think I've ever seen a tutorial that starts with "Hello World' - which is rather odd, given that a web page is far more likely to be seen by the whole world than anything written in turbo-pascal

Day 22: Using real lists (or faking them properly)
[diveintoaccessibility.org...]

That's what I was afraid of. And I disagree with that article. :)

That's what I was afraid of. And I disagree with that article.

I've never had to implement a solution like that so I can't say that I agree or disagree. I do know that during WAI-AAA manual inspection, that "*" came up. I can't see why anyone would want to use an image inside the <li> and not assign it via CSS. I guess some of it is legacy stuff.

With a list, why can't you simply use a background image where the far left has the "fancy" dot (or whatever), then margin in the text to reveal the “fancy” part. Then, have no bullet displayed. Now, since the “fancy” dot is in the background image, it need not be explained to a reader for accessibility compliance and the list can otherwise be built as normal.

Marshall

With a list, why can't you simply use a background image

Maybe I misunderstand you Marshall, but - to me - that is what list-style-image: url(imagename.xyz) does

Sorry in advance - long post.

Sorry if I was not clear. This “trick” requires a little graphics work and good CSS. The example I show below actually provides a rollover effect for links, but with a little modification, it can be just a plain list.

The CSS
<head>
<style type=”text/css”>
#menuLeft {
width: 200px; /* width subject to need, but 200px is good */
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}
#menuleft img {
border: none
}
#menuleft ul {
list-style: none;
}
#menuLeft li a {
height: 32px; /* This height relates to the height of the image and should be half the background images height if you are doing a hover effect. In the case of just a plain background without hover, I still make the image twice the height in case the <li> wraps */
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menuLeft li a:link, #menuLeft li a:visited {
color: #CCC;
display: block;
background: url('menu.gif');
padding-left:10px; padding-right:0; padding-top:8px; padding-bottom:0 /* Left padding is adjusted to the placement of the background graphic, i.e. a smiley face */
}

#menuLeft li a:hover, #menuLeft li #current { {
color: #FFF;
background: url('menu.gif') 0 -32px;
padding-left:10px; padding-right:0; padding-top:8px; padding-bottom:0
}
</style>
</head>

<body>
<div id="menuLeft">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Stores</a></li>
<li><a href="#">Other Facilities</a></li>
<li><a href="#">Affiliates</a></li>
<li><a href="#">Employment</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">link</a></li>

</ul>
</div>
</body>

Using the above, the overall image would be 62px high. I generally make it twice the width of the <div>, so 400 pixels. Say you want a smiley face instead of a dot or circle, and the smiley is 10px in diameter. Indent it on the background 5px from the left and 11px from the top. Then, adjust the padding-left above to about 20px, and there you have it. The image shows up in place of a bullet and no image description is necessary.

Marshall

Yep...

Add this to your CSS:
UL LI { list-style-image: url(menu.gif) }

change the name of your div to <div id="menu#*$!#*$!XLeft"> and run it...

apart from the padding, color, etc... it's the same :)

--------

PS I had to add
no-repeat;
after the 1st instance of
background: url('menu.gif')
to stop it repeating

While yours is shorter and the end look is the same, I think the difference is that mine hovers the entire <li> background. Either way, they both serve the purpose of not having explain the image, which is the bottom line.

Marshall

the end look is the same

Yes, that's what I meant when I asked _anyone know how would I assign an alt attribute?_ (for ULs and/or LIs with list-style-image: url)

I asked cos I wonder if the the 'bullet' images are 'seen' by screen-readers - and if so, do they 'hiccup'?

-------------

PS... Your code looks fine in FF, but I can't get it w*rk in Opera or IE.... the image repeats on mouse-over :(

(I'm using a 16 by 16px gif)

PPS
Apologies for dragging this thread off-topic

//edit
PPPS
Although I'm glad I did: I discovered the voice-family hack!
Thanks!

Please, don't tell everyone that validation is easy, it is not.

"Validation is difficult." (Paraphrased from the first line of the excellent book "The Road Less Traveled," by M. Scott Peck.)

Like Peck, we can admit that it is difficult, but it is still necessary, and difficulty is a part of life, erm, Web Design.

<soapbox>
Web Design is a complex engineering endeavor that looks like a craft/art. Nevertheless, it is engineering and construction.

We are building infrastructures, tools and homes. Most of the people on this forum actually get paid to do it. I don't, but I am a professional engineer in my "day job." Web Design is a serious hobby for me.

Web Design isn't actually easier than C++ programming. People make it seem as if it is, but I can tell you it ain't. In fact, if you look at the sites created by some of the master engineers of our time, you will see some seriously ugly and primitive stuff. Web Design requires a confluence of creativity, practicality and seriously good problem-solving skills.

Writing valid code is a useful engineering and construction best practice. If you write your C++ code properly, you can plug into an array of code coverage tools and debuggers for compiled code, memory leak tracers, thread monitors, etc. Validation opens up a huge array of tools for Web Design.

For example, I like to write code that validates XHTML 1.1. I may not serve it up as such, but having well-formed XML code means that I can use tools like <oXygen/> and XMLSpy to test, write, format and validate my code. I can transform it with XSLT into RSS and WML, or even into more accessible versions of the page, such as pages customized for the iPhone. Most XSLT processors puke if you try to feed them invalid code.
</soapbox>

Okay, validation is difficult; but well worth it.

#menuLeft li a:hover, #menuLeft li #current{
color: #FFF;
background: url('menu.gif') 0 -32px;
padding-left:10px; padding-right:0; padding-top:8px; padding-bottom:0
}

just to add my little pinch of salt to the discussion :)

I recommend using the a:focus and a:active to all your links to give them the same effect as the hover. This improves keyboard navigation accessibility because your links will 'respond' when the tab focus is on them (for example)