WYSIWYG HTML Editors

WYSIWYG — bad for developers; important for content authors

A while back I posted on whether developers should avoid WYSIWYG editors or not, and what the general problems are.

However, while WYSIWYG HTML editors can be a hindrance to good quality markup for web developers, WYSIWYG HTML editors can be extremely important for effective Content Management Systems (CMSs) where end users (typically with no HTML knowledge) are often expected to contribute content.

Poor quality HTML from WYSIWYG editors

As alluded to in that previous post, various WYSIWYG editors create very poor quality HTML, which can affect things like accessibility, maintainability, and manageability.

Some of the problems include

  • The continued use of bold, italics and underline buttons because word processors have them! (The intentions of those buttons are to produce presentational markup, rather than structural markup.)
  • Not providing ability to set headings (or encouraging users to just increase the font size and make the text bold)
  • Indenting text using HTML elements that were meant for other uses
  • Being difficult to provide alternative text for images

And so on.

Why is all this problematic? In short, tools that process the document cannot offer any additional value to the user.

For example, if a WYSIWYG HTML editor doesn’t have simple headings support, users will typically increase some text size a few times. While it looks like a heading, it is technically not a heading; this can mean a screen reader cannot offer a useful list of headings to a blind user of the information, and that a site-wide visual design/brand may become harder to maintain if there are various elements used inappropriately to achieve the same effect.

Some of the challenges are due to the WYSIWYG editor providers, while other challenges include the education of the content creators to know about these issues.

But various projects are addressing these concerns

Fortunately, there are people trying to address this, so here are a few links (not exhaustive):

Alastair Campbell, a web usability and accessibility expert, provides some useful resources:

XStandard is one of the better WYSIWYG editors that gets most of the issues and tries to provide a better interface for producing good quality markup, efficiently.

WYMEditor takes a good approach by using the term WYSIWYM (What you see is what you mean). The idea behind WYMEditor is to concentrate on a web document’s structure and meaning, while trying to give the user as useful an interface as possible, close to a WYSIWYG editor. This project is in early phases, but looks quite promising.

TinyMCE produces decent markup and offers semantic as well as visual styling. It is used by WordPress as the WYSIWYG HTML editor, too.

FCKEditor seems to produce decent markup too, offering semantic as well as visual styling.

Are there any others projects you know of that follow modern web standards principles for such editors?

Be Sociable, Share!

    One thought on “WYSIWYG HTML Editors

    1. Hey I have a question. I work for a big company and all the wysiwyg editors work perfectly fine. On my associate pc in the cubicle next to me, she cannot use the wysiwyg editor tools. She can creat a table, but nothing else. The buttons simply do not process the command. Since it is only on a single editor, then it makes me believe it’s a browser issue. Any ideas?

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>