Monday, August 16, 2010

WordPress 2.9.2 Editor Options: A Description For JAWS Screen Reader Users

In a previous post I mentioned that WordPress enables the TinyMCE Visual editor by default for writing blog posts. I was curious about the functionality of the editor and what the non-visual version involved. Below are my findings and recommendations for use with JAWS and Internet Explorer.
(Note: I am using the version of WordPress that is provided by my web hosting company, which is 2.9.2; it contains version 2.0.9 of the TinyMCE editor. The latest version of WordPress downloadable from is 3.0.1. I'm not sure if this is the version available on but I know that this site is using version 3.27.7 of TinyMCE there. Be aware that there are several differences between these two versions of the WordPress site admin interface and the TinyMCE editor. To complicate matters further, both software packages are customizable so the interface can vary among installations. Read more on my blog post entitled, Accessibility Issues With, JAWS 11 & Internet Explorer 8.)

Visual Mode Versus Code Mode

You can choose to write your blog postings in one of two modes. If you know how to write HTML markup, choose Code mode whereby you are directly editing your content intermixed with its HTML tags. This will give you the greatest flexibility because some HTML elements aren't available in Visual mode e.g. tables, headings. Also, having access to those tags will give you a better idea of how the page will appear given that the markup is correct.
If you do not know HTML markup, stay with the default Visual mode; it provides a WYSIWYG or What You See Is What You Get view of your content e.g. text formatted as bold looks bold. As a visually impaired user that's not too helpful. But the tool bar in Visual mode is easier to use as it works more like a regular word processor whereby you select text or position the cursor and then select the formatting option. Code mode also contains a tool bar but it outputs the start or end HTML tag instead.

Disabling The Visual Editor

To disable the visual editor for all of your posts, login to your account, select the Users link and then select the Your Profile link to land on the Your Profile and Personal Options form. There is a checkbox here labelled, Use the visual editor when writing; unselect it via pressing the Spacebar. Then Tab to the Update Profile button and press Spacebar to save the changes.
If you only want to use Code mode occasionally, then leave the Visual editor enabled as it allows you to switch between Visual and Code mode via buttons that appear above the tool bar.

Entering Post Text Area

I have discovered two reliable methods of accessing the text area into which you write your blog posting. You can select it from the Forms Field List (Insert+F5); it will be labelled Post Preview >> blank_page if your blog posting is unpublished or Post View >> blank_page if it is. Or you can use the access key, Alt+Z.

Visual Editor Tool Bar

Immediately above the text area is a tool bar containing common HTML tags such as Bold, Italic, Strikethrough, Unordered list, etc. To explore and activate them via the keyboard, use the Alt+Q access key to jump to the start (left-hand side) of the tool bar and then tab through the buttons; the first button on the tool bar is Bold and the last button is Help. You'll hear the name of each plus its hot key e.g. Unordered list (Alt+L). Press the Spacebar to activate the button. Once you learn the hot key, use it while you are in the text area.
Be sure to position the cursor or select the text in preparation for applying the format option.
You may not receive any feedback from JAWS that the formatting option has been applied but you may be able to discern this in others ways e.g. use Insert+F to hear the font characteristics, navigate through the content to hear the list number for an ordered list or Preview/View the content after saving it and use the relevant navigation quick key, if applicable.

Visual Editor Element Path

When in Visual mode, you'll find the element path below the text area. This is the hierarchy of HTML tags that apply to the content the cursor is positioned on. Each tag is a link which if you activate selects the content that applies to that tag (e.g. the paragraph the cursor is in if the path contains a paragraph tag) and puts the keyboard focus back there.

Saving And Publishing

Positioned below the text area are the following buttons: Save and Continue Editing, Save, Publish (if this post is still a draft).

Exiting Post Text Area

Press Tab. If you are in Visual mode, keyboard focus moves to a hidden link of unknown relevance and then the element path area. After this the Tab key unfortunately skips over the Save/Publish buttons and moves into the frame containing form elements for uploading a file. So use the Form Fields List to access these buttons. Remember that you'll need to press Spacebar to activate the button.

Previewing / Viewing Your Post

If your post is in draft mode (i.e. you have not published it yet), there will be a Preview link on the form; if it has been published, the link will be called View. Clicking either of these links will open a new window and display the content as it will appear within your blog. You'll probably want to maximize the window with Alt+Spacebar, X.

Bypassing The TinyMCE Editor

You can also compose your blog posting in a word processor such as Microsoft Word and then copy it into the post text area. However, be aware that Word and WordPress aren't very compatible. When you do the copy and paste, all sorts of formatting markup will be inserted. You won't notice it in Visual mode but it may cause formatting problems for your blog and may compromise its accessibility.
If you just want the content from a Word document, paste it into Notepad first; this causes all formatting to be discarded. Of course it means that you need to use the WordPress editor to format your post because even if you copy in an ordered list, it won't contain the list and item tags to identify it as such and thus won't be navigable using the JAWS navigation quick keys. Your paragraph breaks will disappear as well.
Another option is to use an offline blog editor. I don't have any experience with these, but has an article on the top 5.
Finally, version 3.2.7 of the TinyMCE editor contains a Paste from Word tool bar button on the extended toolbar (activated via the Show/Hide Kitchen Sink button). This produces very clean HTML. I haven't figured out how to access the Paste from Word button with JAWS yet but I noticed that just pasting the content from Word directly into the Visual editor generated the same nice clean HTML.

No comments:

Post a Comment