Helping your client maintain markup quality

One thing that is particularly frustrating with caring about Web standards and accessibility is what often happens after your work is done and a site is handed over to the client.

I’m sure most of you have been there. Despite your hard work to educate the client’s editor(s), regardless of the style guide you wrote, and no matter how much time you spent patching the CMS they use, there will be problems.

If you spend enough time working on it (or are one of the few lucky ones to use a CMS + WYSIWYG editor combo that enforces it) you may be able to ensure that the HTML on the site stays valid. In most cases you will not be able to do that, however. And even if you can ensure validity, that alone will in no way guarantee that the site stays accessible.

So what can you do, if rewriting the entire CMS to guide the user through the publishing process is not an option? Well, one idea is to make any errors or suspicious markup obvious to the person working on the document.

One way of doing that is to use CSS the way Marco Battilana describes in the Accessites.org article Big Red Angry Text. The idea is that by inserting the following snippet of CSS in the global stylesheet file, certain markup that shouldn’t be used will be made very obvious to the editor:

font, center, div[align], p[align], table[align], font[color] {
	color:#cd0000;
	font-weight:bold;
	background:#eecc11 url(images/warning.gif) repeat 0 0;
	margin:10px;
	padding:10px;
	border:2px dashed #cd0000;
	font-size:2em;
}

You can use this to clearly mark things like deprecated elements, presentational attributes, and cruft you know that the WYSIWYG editor your particular CMS uses likes to leave behind unless the person using it is very careful.

I’ve been using a similar approach for some time, but only made it visible to the person using the CMS. Instead of inserting the error catching rule or rules in the global stylesheet, I add a few rules to the stylesheet used by the WYSIWYG editor. I also make the errors a little more subtle than Marco’s CSS does.

I’ve found that this approach helps our clients avoid at least some of the many potential problems caused by WYSIWYG editors and/or lack of knowledge.

This idea could also be combined with some of the rules described by Eric Meyer in Diagnostic Styling to catch things like images with no alt attribute and empty list items.

This isn’t ideal of course, but until there is a CMS that does not let editors produce invalid or inaccessible markup it’s a hack that does help.

Posted on October 12, 2007 in Content Management, Accessibility, Web Standards