Forget WYSIWYG editors—use WYSIWYM instead

A huge problem with almost every CMS in existence is the extremely poor quality of the code produced by their WYSIWYG editors. There are very few WYSIWYG editors that come anywhere close to creating fully semantic and accessible markup, as noted by Peter Krantz in Evaluation of WYSIWYG-editors.

Since visual gadgetry like WYSIWYG editors sells, every CMS has to have one. Most are based on Internet Explorer’s MSHTML editor, which creates absolutely horrific markup. That, in turn, makes it necessary for Web professionals who want to reduce the risk of clients unknowingly ruining the website’s semantics and accessibility to disable features and implement more or less advanced code cleaning procedures. It is a mess.

Despite any cleaning or filtering you do, there’s the inevitable use of the few features that are still there to create presentational effects. Using data tables to create nice-looking headings, using level 6 headings instead of strong emphasis, and using emphasis to make entire paragraphs italic are just a few real world examples. WYSIWYG editors simply do not work, especially when handed over to untrained people.

Because of the problems caused by WYSIWYG editors I have toyed with the idea of providing a much simpler interface for content editors. Markdown, BBCode, and Textile are a few possible solutions that ensure valid markup and increase the likelihood of it being semantic. The problem would be making clients accept working that way, directly editing pseudo markup. Most clients wouldn’t, so that option is ruled out.

But there is another kind of editor that is better suited than WYSIWYG for content-driven, client-edited sites—the WYSIWYM (What You See Is What You Mean) editor. In Visually Editing Semantics—What You See Is What You Mean, Peter Krantz mentions one such editor: WYMeditor.

From the WYMeditor site:

Our goal is to create a XHTML strict web-based editor which will be usable on many platforms, whith the help of the Open Source Community.

Sounds great! WYMeditor is developed to let editors focus on the meaning of the content they are editing, and thus doesn’t offer any way of changing colours, borders or fonts. Neither does it have a gazillion other sales brochure features. It does just the basics, which is good enough 99 % of the time. The markup it generates is Strict XHTML (if you want HTML instead all you need to do is convert the markup).

A WYSIWYM editor won’t solve the problem of people using their tools the wrong way, but I believe it will give people a better understanding of semantics.

There are a few limitations, of course. This is an early version, after all. Besides the issues Peter notes in his post about WYMeditor, here are a few more things I noticed:

Table accessibility. There is no way to add elements and attributes (th, caption, scope, etc) needed for accessibility to data tables.
Table resizing. It is possible to size tables by dragging handles. Doing so is reflected in the markup. That needs to be filtered out at some stage before saving the page to the database.
Incorrect nesting of lists. When you create nested lists, the current list element is closed before the next level ul or ol is inserted.

Aside from those issues, which are very minor compared to the nightmarish markup most WYSIWYG editors spew out, WYMeditor is looking great. I really hope this editor catches on.

Posted on December 12, 2006 in Content Management, Accessibility