Weblog Entries

What you see is what you wreck

Friday, December 26, 2008

Having an accessible framework is one thing, but publishing content using clean, simple and meaningful structure is another important aspect of accessibility.

What you see is what you get

Web based (or inline) WYSIWYG (What You See Is What You Get) editors are used to enter content (such as text, images and tables for data) into areas of a website for presentation and display. Not all editors are problematic but unfortunately many are limited due to a host of platform and technology considerations, and issues working directly within different web browsers.

Keeping a website’s content up-to-date and fresh can unfortunately come with undesirable side effects, many editors can leave your carefully crafted content riddled with problems by generating markup and then not managing it properly. To understand this, we need to take a closer look at that online, inline, rich text, web content editing tool often referred to as WYSIWYG (pronounced wiz-ee-wig).

Layout for typical editor

But it’s what you don’t see that you really get

When adding content directly into your website with an inline editor, the editor will often create potential barriers for accessibility and cause frustrating problems for the person editing the content. It’s important to understand what is going on ‘behind the scene’s’ so you can keep control of your content.

Manually entered and/or pasted content which is then manipulated by customising layout, formatting or styling has structural tags wrapped around it in order to display and retain your customisations. This is known as markup and x/html markup is used to make webpages.

When using some of the editors rich features like bold and italic, indenting, • lists and even doing a carriage return ↵ can make an unwanted mess of the underlying markup and it does not stop there. When content items are moved or deleted the wrapping markup may not be automatically removed. All of this unwanted markup can add some serious problems and weight to your page that you would not normally see .

It’s also important to know that copy and pasting from applications such as Word™ can be very hazardous and best avoided, this can be done by converting the copy to plain text before you add it to the editor, simply copy then paste into a simple text editor such as Notepad, then copy from Notepad and paste in to your inline editor.

What you are looking at

Locate your editor (on a unpublished or test page of course) loaded with some text to check that has been formatted and worked on. Now look for a word or a button that is similar to one of these; HTML Code < >. Using this feature will enable HTML Edit Mode, this is where you can edit the source code (markup) that is used to format your content. Most editors are quite similar and hopefully yours looks like the example below:

Clicking the edit button will create a window displaying the inner workings (x/html) of your content and you can usually edit the markup directly there. Editing the markup by hand is a very good way to control simple formating that your editor may be having trouble with, also cleaning out unnecessary markup will always be a big help. Take the time to learn some Basic XHTML.

In HTML edit mode you should still be able to read plenty of your own text, if what you see is a incomprehensible jumble, you most likely have poor markup and you should start by validating your page. If you get stuck, search. There are many good forums around the Internet.

What you shouldn’t see

If you are looking at a lot of markup and not much of your own text then there is a high chance that what you have will likely cause accessibility problems. Example:

What you should see...

The same code when corrected should look something like:

Delete erroneous markup if it exists, it’s good to remove unwanted and unnecessary tags.

Simple things to look for

Look for opening and closing HTML Tags that are empty or unnecessarily duplicated and delete them. If you delete an opening tag, remember to look for the closing tag.

If you are worried about deleting the wrong tags or markup, select all the markup, copy then paste into a simple text editor such as Notepad before you make any changes. If it all goes wrong and you cannot ‘undo’ your edits, you can revert to the original markup by copy and pasting the duplicated markup back into the HTML edit mode window.

Other things you should know

The type of webpage language you are using is important here, this will decide if you need to use HTML or XHTML. If you do not know this the best way to find out is to look at your webpage source code, a source code viewer will help. Enter in the domain name of your website and what you need to see here is at the very top of the displayed results which will be the Doctype (DTD). This will have HTML or XHTML declared in the code. If there is unfortunately no Doctype declared, this is an indication that greater problems exist.

Images

If you are using images to your content, it is important to understand about image sizing. Do not resize your images in your online editor unless you know for certain that it can properly resize images. If not, the result will be a small image with the same file size. Always resize your images in your image editing program.

Tables

WYSIWYG table builders can sometimes be a bit tricky and may not create accessible tables, try using the Accessible Table Builder. If you are using tables make sure that you are not using them for layout, tables are to display tabular data as a general rule.

Cascading Style Sheets (CSS)

If your website was built professionally your job should be easier as the formating and style of your article text, images, tables will be taken care of with CSS. CSS can take care of your website default styles and when used well, seperates your presentation from your markup which gives you more control of how your site is presented. Learn about CSS.

Above all, keep it simple and ALWAYS validate your page.