May 8, 2011

WYSIWYG support for @longdesc today


The @longdesc “discussion” just won’t go away. As HTML5 looms closer and closer towards becoming a Last Call document at the W3C, there is a full-court press to ensure that @longdesc remains in the specification. Meanwhile, there have been a rash of blog posts over the past few weeks that have also emerged, and if you are in any way interested in HTML5 development and/or accessibility you likely know how hot it is in this current kitchen.

Over on the W3C mailing list, Tantek Çelik said something that I wanted to drill into a bit further:

In the case of “longdesc” – the content rot scenario is that a web author changes the image (src) to point to something else, but forgets to update the longdesc to point to a new description because it is hidden metadata and isn’t apparent as being “wrong” when the author refreshes the page in their browser to check it.

The longdesc URL itself may still be fully functional (i.e. no *link* rot may have actually occurred).

The result is a new image, with a long description that no longer applies to it. Doesn’t matter for most users, and those that attempt to access the longdesc get inaccurate information.

This got me thinking about how most people author web content today; certainly if you write your code in TextWrangler or Notepad (or like me, clings to Homesite 5.5 despite Adobe no longer supporting it) then perhaps this argument might hold some credence. But honestly, how many web authors today write their code by hand? Certainly high-functioning developers such as Tantek likely still do, but “out there”, the rank and file have long since moved to WYSIWYG tools, from stand-alone applications like Dreamweaver, to embedded editors in CMSes such as Drupal (which I deal with at work), or (like this blog) WordPress.

So I thought I would investigate Tantek’s assertion with regard to WYSIWYG editing tools, complete with screen captures. While this is by no means a complete list, it does cover environments and situations that I personally encounter almost daily, and is, if nothing else, a good representative sampling.

Dreamweaver

[Screen Capture: Dreamweaver's image tag Accessibility Attributes dialog box]

Dreamweaver is the elephant in the room; I can’t think of anyone who has not used this tool at one time in their web career, and chances are you’ve used it too. While there are other stand-alone HTML editors in the market-place, Adobe’s acquisition of Macromedia in 2005, and their subsequent full bore marketing of the tool, (along with killing of GoLive, and bundling it into their Creative Suite offering) all but ensured that it would emerge the King of the Hill.

Whether adding an image for the first time, or editing and replacing “image A” with “image B”, Dreamweaver’s Accessibility Attributes dialog box prompt’s for both alt text as well as the location of the longdesc file. Visual indications such as pre-populating the input field with the http:// protocol, as well as offering an “browse for the file” icon (a file folder) all but ensure that authors both understand that this is not a location for writing an actual text description, as well as facilitates locating the longdesc file. With regard to Tantek’s assertion that authors might miss updating a long description when updating an image, the dialog box makes it pretty hard to *not* at least think about the issue. Like in all things author related, we can’t hold a gun to their head, but Dreamweaver makes it pretty hard to ignore adding and updating longdesc content when the image requires it.

Score one for the WYSIWYG’s

CKEditor

I’m becoming fairly familiar with CKEditor lately, as I am working with a team on campus to integrate it into our instance of Drupal (my division’s web authoring platform). CKEditor is an extremely accessible WYSIWYG tool, and Richard Schwerdtfeger (CTO for Accessibility at IBM) confirmed recently that IBM provided some support and feedback to the CKEditor team to ensure it met accessibility requirements: IBM is now using CKEditor extensively in many of their web-based tools.

[Screen Capture: the CKEditor image dialog box]

While not quite as intuitive as Dreamweaver, the “Advanced” tab for the image dialog box allows for adding a number of important attributes to the image, including styling classes (common), direct styling (also common), title (common), language and language direction (not so common), and of course an input for the “Long Description URL”. Since most authors will likely want to add at least one of CSS classes, direct styling or @title, it would be hard to not notice the ability to add a long description. (Sadly it does not have a “browse to locate” feature).

With CKEditor, when replacing “image A” with “image B”, you literally remove the initial image, and then via the dialog box add a new image, at which point all of the tabs are once again presented to the author. Activating the dialog box on an existing image (to perhaps make an adjustment to the alt text) preserves all of the current other associated attributes, including the link to the long description file. In other words, if you change an image, you start from the beginning, if you change attributes of a current image, all other attributes remain fixed at their current values.

Since the “Long Description URL” input is under the Advanced tab (rather than on the “Main” tab) I guess there is a chance that some authors might miss out, but given the other common attributes that are edited from the Advanced tab, I would suspect that likelihood is fairly small.

While I can’t give full marks, score another one for the WYSIWYGs.

TinyMCE

[Screen Capture: the TinyMCE image dialog box]

TinyMCE is another common embedded WYSIWYG editor found in a number of CMSes in the market today. It too has a 3-tab image dialog box, and once again under the “Advanced” tab there are a number of additional attributes that can be applied to the <img> element, including ID, language code &language direction, the ability to integrate an image map, and “Long Description Link”.

The ability to add @longdesc clearly indicates that it is requiring a “link” although again, like CKEditor, there is no “browse to locate” the html file containing the longer description. TinyMCE functions very similar to CKEditor, preserving settings when any individual attribute is edited, but completely removing all data if/when you choose to update the actual image, in direct contrast to the assertion that updating an image results in a long description that no longer applies to it.

There are a number of other embeddable WYSIWYG editors out there that provide support for the @longdesc attribute (such as XStandard, screen capture shown here) [Screen Capture: the XStandard image dialog box] that I didn’t test, but they all appear to function in a similar fashion: they clearly indicated that the long description is a URL/link (removes ambiguity), they all appear to remove any historical link if/when the image is updated (i.e. contrary to Tantek’s assertion), and/but sadly they also seem to lack the ability to navigate to (“browse to”) the long description file. While this is not a critical failure, it would be a nice enhancement to these editors that would make working with longer descriptions even easier and more manageable.

Despite this minor point however, it seems that the embeddable WYSIWYG editors are doing a good job of managing the accuracy of the long description files.

WordPress Plugin

[Screen Capture: the WordPress image dialog box]

To round out this review, I wanted to finish with a WordPress plugin that I am using on this blog that makes adding long descriptions a simple process for authors.

Unlike the other WYSIWYG editors I reviewed, this plugin leverages the fact that WordPress, like virtually all CMSes today, writes content directly to a database, and uses those entries plus some common templates to create ‘pages’ on the fly. The plugin prompts authors to add a Description as part of the image insertion process, but then takes the description and creates a separate ‘page entry’ that can be referenced as a longdesc file. It generates the following code directly in the editor:

<img src="http://john.foliot.ca/wp-content/uploads/2011/05/wordpress.png" 
        alt="[Screen Capture: the WordPress image dialog box]" 
	 
	longdesc="http://john.foliot.ca?longdesc=421&referrer=371" 
	width="400" height="310" class="alignright size-full wp-image-421" />
	<a id="longdesc-return-421"></a>

Since the description data is just another database entry associated with the image, it is always directly associated to that particular image. Another advantage is that the image (and related data fields) are now part of the CMS’ ‘Gallery’ – should an author choose to reuse this image on another page, all of the associated date remains with it as well, an important Use Case previously identified (for example the Logo).

Of all of the testing I have done, this is perhaps the most intelligent and useful solution I’ve encountered to overcoming the initial assertion that …a web author changes the image (src) to point to something else, but forgets to update the longdesc to point to a new description…, since the long description is directly and visually linked to the image at the authoring stage – authors have to specifically ignore the description in the image dialog box to break the association noted above.

Conclusion

There is no doubt that in the early history of longdesc on the web, when authors wrote HTML in vanilla text editors, the chance that they would miss updating long description text when updating images was a real potential problem. However in the decade or so since the introduction of longdesc (in HTML 4.0), WYSIWYG editors have looked at this problem, and developed solutions to address it. While some developers will continue to hand-craft their HTML the “old fashioned way”, moving forward more efficient and intelligent authoring solutions can and will provide authors with the tools they need to do their jobs correctly, and preserving accurate long descriptions, even today, is one of those problems that has workable solutions. Suggesting that longdesc is flawed because the possibility that The result is a new image, with a long description that no longer applies to it however does not stand up to scrutiny. It’s a problem already solved.

  1. #1 by Cliff Tyllick on May 9, 2011 - 1:12 pm

    Well said, John!

    I must say I’ve always seen this argument that “because people misunderstand and misuse longdesc, we must get rid of it” to be a red herring. Yes, it is taking us longer to get people to understand when and how to use longdesc. But it’s far from the only part of the HTML specification that has been widely misunderstood and misused. For example, one website I inherited had exactly the same meta data on every page — even the title, description, and keywords were the same for every page of their website.

    But least each of those pages had a title, description, and set of keywords that were relevant to that website. The prior webmaster didn’t understand them completely, but he did have a rough idea of their purpose.

    Unlike the creators of most of the over 2,000,000 Web pages you’ll find if you search the Web for “Joomla! – the dynamic portal engine and content management system”.

    So, should we rid ourselves of “description”?

    (By the way, I don’t mean to pick on Joomla! It’s purely coincidental that a site I was looking for the same day you posted this turned out to have that description. To be fair, do another search with the default content of the description tag for any other widely used template for Web pages. You’ll probably get comparable results.)

  2. #2 by Allie on June 10, 2011 - 8:30 pm

    I’m just a newbie,can I ask what WYSIWYG stands for?..I read this article because it sound great and informative. Thanks for this post.I get a new insights.

You must be logged in to post a comment. Here's Why.