Joe Clark: Accessibility | Design | Writing

Response to ‘Techniques for WCAG 2.0’

This document contains my comments on the WAI publicationTechniques for WCAG 2.0.


Instant-messaging applications are not Web content

An instant-messaging application uses two simple glyphs to indicate a person’s instant messaging status.

An instant-messaging application is not Web content. (Yes, I know, it’s possible to use the Web as a front end for instant messaging, as with Google Chat and Meebo. Those are not applications.)

Text equivalents

alt=" " is officially permitted alongside the actually correct alt="".

Incorrect CSS or usage

The Techniques document gives incorrect CSS in places, or simply gives unrealistic examples that don’t match the practices of standards-compliant developers.

  1. /* Rules for bidi */
    HEBREW, HE-QUO {direction: rtl; unicode-bidi: embed}
    ENGLISH {direction: ltr; unicode-bidi: embed} 
    /* Rules for presentation */
    HEBREW, ENGLISH, PAR {display: block}
    EMPH  {font-weight: bold}

    Each of those class names must begin with a dot (e.g., .HEBREW), and all-lower-case is preferred, as XML documents have case-sensitive CSS parsing.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     <html xmlns="<url>"></title>">
     <title>A study of population dynamics</title>
     <body bgcolor="white">
     <p> ... document body...</p>

    body bgcolor="" is an incorrect usage; that’s what we have CSS for. (Same for body color="" later.) Note that the DOCTYPE URL (or at least the xlmns) is mangled.

  3. Procedure
    1. Examine the code of the Web unit.

    2. Check to see if a foreground color is specified.

    3. Check to see if a background color is specified.

    Colours may have been specified in preceding selectors. The C in “CSS” does stand for “cascading,” after all. As written, this technique authorizes pedants to write in and complain that not every single element has foreground and background colours explicitly stated. They don’t have to be.

Trivial examples

One of the most common examples of using inconsistent labels for components with the same function is to use a button that says “search” in one page and to use a button that says “find” on another page when they both serve the identical function.

And the words have identical meaning.

Failure Example 4:

An E-commerce application uses a printer icon that allows the user to print receipts and invoices. In one part of the application, the printer icon is labeled “Print receipt” and is used to print receipts, while in another part it is labeled “Print invoice” and is used to print invoices. The labeling is consistent (“Print x”), but the labels are different to reflect the different functions of the icons. Therefore, this example does not fail the success criterion.

So why is it in there?

Testing in browsers

The blink value of the text-decoration property is not supported by Internet Explorer.

For Windows or Mac?

It is supported in Netscape/Mozilla family browsers. Not tested in others (e.g., Safari, Opera).

And why wasn’t it tested in those “others”?

Blinking (but not flashing)

  1. CSS defines the blink value for the text-decoration property. When used, it causes any text in elements with this property to blink at a predetermined rate. This cannot be interrupted by the user, nor can it be disabled as a user-agent preference.

    User stylesheets would seem to be useless in this regard, as they do not permit the rewriting of selectors. However, User Agent Accessibility Guidelines Checkpoint 3.3 requires the ability to toggle blinking text. This appears to be a user-agent problem, in whole or in part.

  2. On a page with moving or scrolling content,

    1. Check that a mechanism is provided in the Web unit or user agent to pause moving or scrolling content.

    2. Use the pause mechanism to pause the moving or scrolling content.

    3. Check that the moving or scrolling has stopped and does not restart by itself.

    4. Check that a mechanism is provided in the Web unit or user agent to restart the paused content.

    5. Use the restart mechanism provided to restart the moving content.

    6. Check that the movement or scrolling has resumed from the point where it was stopped.

    But the Understanding document uses an example of a stock ticker:

    A stock ticker has “pause” and “restart” buttons. Pausing the ticker causes it to pause on the current stock. Restarting causes the ticker to jump ahead to the current stock. Stocks that were updated during the pause will not be displayed.

    So which is it: Once you resume you have to start from where you paused, or can you skip what you missed?


  1. Examples of text streams that are not captions include... subtitles that do not include important sounds

    No “subtitles” are “captions.” By implication, this technique permits subtitling into a foreign language as long as non-speech information is included.

  2. Procedure
    1. View the material with captioning turned on.

    2. Check that all dialog is accompanied by a caption.

    3. Check that all important sounds are captioned.

    And how does a deaf person do this?

Keyboard access


  1. Using a keyboard, navigate through the content.

  2. Check to see that the keyboard focus is not “trapped” and it is possible to move keyboard focus out of the plug-in content without closing the user agent or restarting the system.

What if this depends on the user agent, as it so often does? What if nothing the author can do will ever permit the user to escape from the trapping content? (This was a real example with accessible Flash.)

Popup windows

  1. Failure due to opening new windows when the user does not expect them. New windows take the focus away from what the user is reading or doing. This is fine when the user has interacted with a piece of user interface and expects to get a new window, such as an options dialogue. The failure comes when pop-ups appear unexpectedly.

    Actually, WCAG 2 bans all popup windows without explicit alert beforehand (though at Level 3).

  2. A user clicks on a link, and a new window appears. The original link has no associated text saying that it will open a new window. [...] Check if elements that open new windows have associated text saying that will happen. The text can be displayed in the link, or available through a hidden association such as an HTML title attribute.

    target="_blank" is programmatically determinable and it is up to the user agent to warn the user. JavaScript is another story and should be addressed by the Techniques.

  3. A user clicks on the body of a page and a new window appears. No indication that the area that was clicked has functionality is present.

    If that area were marked up as a or indeed as area, such warning is programmatically determinable and it is up to the user agent to warn the user.

Linguistics & typography

  1. The objective of this technique is to show how using a non-text mark to convey information can make content difficult to comprehend. A non-text mark may be non-text content such as an image, or a font glyph which is not text nor an image of text.

    Font glyphs are text. This whole section is nonsense.

  2. The objective of this technique is to describe how using blank characters, such as space, tab, line break, or carriage return, to format individual words visually can be a failure to present meaningful sequences properly. Blank characters have no appearance when rendered visually

    Yes, they do. They’re blank!

You are here: joeclark.orgCaptioning and media access
Web accessibilityWCAG → Response to ‘Techniques for WCAG 2.0’

Updated 2006.05.23

Homepage: Joe Clark Homepage: Joe Clark Media access (captioning, Web accessibility, etc.) Graphic and industrial design Journalism, articles, book