WAI-ARIA showcase: TinyMCE 4.17

Today, on February 26, the TinyMCE team released version 4.17 of the JavaScript/HTML editor for the web. In the release notes, the first item mentioned is much improved accessibility support. For those of you not familiar with TinyMCE: It is the WYSIWYG (What You See Is What You Get), AKA visual or rich editor used in many popular content management systems such as the WordPress blogging software.

Over the past few weeks, I had the pleasure of testing the improved accessibility features and provide feedback to the developers. Here are a few hints to get you going, but for a full experience, I suggest you try it out yourself!

I tested with Firefox and NVDA and JAWS, but you should also get good results with Internet Explorer and other browser/screen reader combinations. Since the two mentioned work so well, it can be trusted that the implementation is very solid.

When you navigate or tab to the sample editor instance linked to above, you’ll land in the content area with some sample text. Arrowing up and down will give you paragraphs, headings and other items such as links. Note that NVDA and Firefox treat links as embedded characters, you have to actually navigate into them to read their texts, but they are accessible.

From the content, you can press Alt+F9 to open a menu bar. Left and Right arrow navigate through the top menu items like in your average desktop app, and Down Arrow will actually open a menu. Note that from there, you cannot go Right or Left through the various drop-down menus, you first have to press Escape once to go back to the top level. When on sub menus, Right Arrow will walk into them, escape will back up.

Alternatively, you can press Alt+F10 to go into the toolbars. You’ll land on the first tool bar and can tab or arrow through the items. Sub menu items will have the sub menus or panels opened via Down Arrow, and closed via Escape. When you reach the end of one toolbar, Right Arrow and LeftArrow wrap to the next and previous tool bars respectively. Escape will bring you back into the main content area.

From either the menus or toolbars, you can open dialogs such as Insert/Edit Image/Video. These are multi-page dialogs with at least two tabs at the top. When in the tab list, Right and Left arrow will move between the tabs, Space will make the current tab active. Tab moves into the panel and through the controls. OK will accept changes, Escape or Cancel will discard.

On the tool bars and in the formatting menu, you can insert emoticons or change the text and background colors. These are panels you open by pressing DownArrow or Enter on their respective menu/toolbar items, and then use the arrow keys to select the actual item you want applied/inserted. All of these items are also made to talk, so a blind person can change the text color as well and know what they’re doing.

All of this is due to the great use of the WAI-ARIA (Accessible Rich Internet Applications) markup. As soon as content management systems start integrating this new version, they’ll automatically benefit from these improvements. This opens the door for even more sites offering better than plain-text editing on the web in an accessible fashion. I cannot even start to count how often I was frustrated in the past because while composing a blog post in plain text, some single symbol missing or fat-fingered markup caused whole posts to fall apart. I personally favor rich editing over plain text editing because I do not have to worry about the markup any more and can concentrate on what I want to say instead. If I want to insert a link or change the formatting of something, I just select the text and apply the formatting I want.

I congratulate the TinyMCE team on this new release and am looking forward to even more good accessible features in the future!

9 comments:

  1. Hi Steve, ahead of what? I know that CKEditor also has good accessibility, and from their change logs, they also frequently fix bugs that are reported. However since CKEditor does not provide an integration into WordPress, I have no experience with that. The demo on the CKEditor home page looks very good, however, so I’d say it’s a matter of taste. :) I think TinyMCE is just much more commonly used.

  2. Did inserting tables work for you? I can get down to the level of insert table option but then just hear “grid” and no info about what kind of table I’d be inserting. I tried JAWSand NVDA.

  3. Are you aware of the incompatibility of ZoomText and Firefox which causes buttons such as those in the TinyMCE editor to display as unicode instead of the actual images? Funny thing is this is caused by a ZT installation regardless of whether ZT is running or not, and is not a problem in Internet Explorer or Chrome. I’ve reported this to AiSquared who claims to be looking into it but I have no details. Any thoughts?

    P.S. I just came across your blog and will definitely be reading more articles.

    1. Hi Steve, no I am not aware of any ZT/FF bug in this area. The ZoomText people haven’t contacted us about any problems. And since I’m blind myself, I can neither verify nor deny that a bug is there. I just can’t test it myself. :)

  4. It’s very difficoult to create table, but possible. I don’t know why they did it this way. For me it was impossible to add media: images and videos. And last – I think it doesn’t work in Chrome at all. A step forward but not enough…

    1. Well, a big part of this editor not working as well in Chrome as it does in Firefox may be due to the fact that Chrome doesn’t expose this many HTML5 and WAI-ARIA accessibility features on Windows, as can be seen on HTML5 Accessibility.

  5. Hi, Marco. Just following up on the ZT compatibility issue. I realized you could not verify it but thought maybe you were in the right circles to get it fixed ;). Anyway, I managed to figure out it occurs whenever a font-icon is displayed via CSS using “content = ‘f123′” selectors, so It’s not just TinyMCE. In fact, it’s all over the WordPress admin screen too. Not sure if ZT or Firefox is to blame, but I submitted a Bugzilla report just in case.

  6. We will probably add a dialog for inserting tables since it’s very hard to get this working in the current browsers/screen readers. Using a grid is a convenient method of inserting tables if you don’t use a screen reader. If you do it’s as much work as typing in the size you want and the support for grid controls are buggy or non existing in most browsers/screen readers.

    We recommend using Firefox since it has the best ARIA support so far hopefully the browser vendors will improve on this.

What are your thoughts?