Laura Lee Carlson on Longdesc

March 16th, 2013 No comments

HTML5 Accessibilty Task Force findings are that following assistive technology informs users that an image has a long description, at which point the user has the option of reading the description or skipping it.

* Adaptive Multimedia Information System (AMIS)
* AnyDaisy FF Extension
* JAWS Version 4.01 and up.
* LookOUT in combination with WebbIE.
* NVDA will announce the existence of the long description, and a user can press NVDA+d to open it. Works in Gecko (Firefox) and MSHTML (Internet Explorer).
* Sense Reader Professional Edition v1.1.0.6 (Korean)
* SuperNova/Hal
* Thunder in combination with WebbIE.
* Window-Eyes
* Home Page Reader has native support of longdesc and is still used in Japan for longdesc.

Opera, Firefox, Chromium, and Internet Explorer all support longdesc DOM reflection.

Innovative browser vendors and developers provide ways that make longdesc discoverable to sighted users. These include: Global Icon, Context Menu, Direct Replacement, and Links.

FireFox has accessibility API support and partial native support via the image context menu which shows the URI of the longdesc attribute.

FireFox also has excellent tools that provides further support:
* Longdesc Firefox Extension by Patrick H. Lauke, adds a “View Image Longdesc” option to the image context menu that activates the link to the long description.

* Longdesk FireFox Extension by Anthony Ricaud, adds a link to the longdesc under images that provides one.

When used together with assistive technology such as Jaws, Internet Explorer makes longdesc accessible to AT users. And it can be configured to have a context menu:

In addition a powerful longdesc favelet by James Thatcher works ubiquitously in FireFox, Internet Explorer, Chrome, Yandex, Safari, Opera, and iCab. It first announces the number of images on the page that have longdesc attributes and then provides an on page link.

Section 508 Color Usage

March 1st, 2013 No comments

Avoid Using Color as the Only Way to Convey Information

Section 508 Color Usage rules require that web pages shall be designed so that all information conveyed with color is also available without color. It is perfectly acceptable to use red, green or any other color for appearance, as long as the color is not the sole means of conveying information.

When colors are used as the sole method for identifying screen elements or controls, people who are color blind as well as those who are blind or have low vision may find the web page unusable. Since red and green are the colors most commonly associated with actions, it is worth noting that approximately 8% of the male population suffers from red green color blindness. By comparison, less than 1% of the overall population is severely visually impaired.

This is particularly important when color is used to indicate an action. For example, a web page should not display an unmarked green button, and direct a user to “press the green button to start”.

Unacceptable color usage:



Press the Green Button to Start

However, it is acceptable to display a green button labeled “START”, and direct the user to “press the green ‘START’ button to start”.

Good color usage:



Press the Green “Start” Button to Start

Categories: Web Page Compliance Tags:

Using Text Equivalents for Section 508 Compliance

February 7th, 2013 No comments

Using text equivalents for section 508 compliance is the best way to provide long descriptions for images.  The Web Site 508 Compliance guidelines in paragraph 1194.22 suggest the use of the longdesc attribute, but most browsers do not support longdesc well, and HTML5 does not support it at all, so it is better to avoid it.

There are two ways to provide a text equivalent:

  • In line text equivalent
  • Link to a separate text page

The in line text equivalent is often preferable since it can be used to add value to the image by providing more information than can reasonably be included in image captions.

Examples of both approaches are shown in the examples below:

Image Using  In-Line Text Equivalents for Section 508 Compliance

Mars Science Laboratory Landing Sequence

Mars Science Laboratory Landing Sequence

Example of a complex graphic with alternative text below.

The Wiki Commons public domain graphic of the Mars Science Laboratory landing sequence illustrates the three main phases of the process:

  • Parachute Descent
    • Deploy parachute
    • Heat shield separation
    • Entry balance mass ejection
    • Radar activation and mobility deploy
    • MLE warm up
  • Powered Descent
    • Back shell separation
    • Powered descent
  • Sky Crane
    • Cut to four engines
    • Rover separation
    • Rover touchdown
    • Sky crane fly away

The italicized text above provides a detailed explanation of the content and meaning of the MSL landing sequence image.  Note that the explanatory text makes a specific reference to the image to ensure that a user of assistive technologies understands the relationship.

Image with a link to a separate page of Text Equivalents for Section 508 Compliance

Another way to provide a long description is to simply link to a long description page, as in the example below:

Mars Science Laboratory Landing Sequence

Mars Science Laboratory Landing Sequence

Link to text description of Wiki Commons public domain graphic of the Mars Science Laboratory landing sequence

Example of a complex graphic with a link to an alternative text page.

Clicking on the Text description link above will take the user to a separate text page containing the information provided in the in line text equivalent of the previous example. Again, note the use of a specific reference to the image for clarity.

How much information actually needs to be in the text equivalent?

The whole purpose of Section 508 is to provide the same amount of information as is available to sighted users.  So the text information supporting non-text elements should, as far as possible, provide the same information as the original non-text element.

Bear in mind that not all non-text elements convey information.  Web pages often use transparent graphics for spacing, or bars as menu separators.   Adding text description to these elements contributes nothing to the meaning of the page, so the alt attribute should be declared, but left empty, as discussed above.

Using Longdesc for 508 Compliance

February 7th, 2013 5 comments

Repost based on comments by Charles McCathie Nevile (Chaals)

This post was originally titled “Avoid Using Longdesc for 508 Compliance”. Fortunately, two readers kindly pointed out that longdesc is actually a great way to make your web site more accessible. So I have edited the post, leaving in my summary of the way to use longdesc, and following up with a very detailed discussion of the longdesc attribute provided by Chaals.

Section 508, paragraph 1194.22 suggests the using longdesc for 508 compliance. The longdesc attribute is used to provide a link to a page containing a long description of an image:

<img src="graph.jpg" alt="Types of disabilities" longdesc="description.htm">

In this example, the page “description.htm” should contain a long description of the image.

Below is the text of Chaals’ original detailed explanation of longdesc.

Also published at

Charles McCathie Nevile is Co-Chair of W3C’s HTML Task Force on Accessibility.

“Below first I explain the current implementation situation, then how longdesc should be used, why it should be used, and finally I explain why I request that the advice given in this blog post (and repeated) be set aside.

1. Implementation.

While most browsers don’t support longdesc natively, most browser/screen-reader combinations do – whether it is in HTML4 or HTML5 pages. A prime audience in accessibility terms is likely to be screen reader users, and longdesc works for them.

When used correctly a longdesc is generally available to users of screenreaders other than VoiceOver, users of the Opera and iCab browsers, and users of various extensions in Firefox, Chrome, Internet Explorer, Opera, Yandex, and perhaps other browsers.

2. How to use longdesc.
Longdesc is an appropriate part of a solution strategy to ensure accessibility of content whose default communication is through images.

Including a clearly visible link to the description, or the description itself, on the page, tightly associated with the image, is often an improvement on longdesc for a number of users. A longdesc and a normally visible redundant link is probably the best of a range of poor options readily available today. Note that while it is legitimate to use an in-page link with longdesc, such as


this does not work in the JAWS screenreader due to a bug.

As noted elsewhere on this blog it is helpful to ensure that when descriptions are required, they are available to more people than the categories listed above. The strategies offered meet that requirement, and the important requirement to make sure the description is explicitly linked to the image being described. However, they are generally verbose, which makes them far from optimal in many cases.

There are certain techniques using e.g. javascript and iframes to provide a more user-friendly inline description in many cases, but none of these techniques has been shown to provide effective alternative solutions for the range of cases longdesc handles, nor are they as easy to implement and maintain. Authors who do not with to use a longdesc attribute, and do not wish to include the complete description in a way that makes it clearly accessible to all users, should study the alternative techniques, but should carefully study their disadvantages and the situations in which they fail.

Some replacement strategies that have been used, such as using an invisible image are clearly far worse, since they reduce the number of people to whom the description is readily available. Other techniques which involve linking to text on the page which is normally hidden generally cause as many problems as they solve, and are not useful as solutions.

3. Why do it that way?
The question of whether a long description should be directly included in a page, or linked to, depends on two related factors. The first is re-use. If the image is going to be used in multiple places, it helps maintenance and user recognition if the same description is linked each time. (Incidentally, this can also help search engines and similar quality measurements, although that should not be a primary consideration). The second is “cognitive load”. Forcing extra content in the page is in itself usually detrimental. Even for screen-reader users, it adds to the navigational complexity of the page while they probably don’t want to read the entire description every time they encounter the image. Ideally, the alt attribute is enough for them to identify it if they have already read through the description.

Using an invisible image is a terrible idea, since it will only be available to a subset of screenreader users and people who use the keyboard for navigation – possibly a smaller group than those who can directly benefit from a longdesc attribute today (although I am guessing since I don’t have good research on the question).

Using normally hidden elements is generally a bad idea. Most mechanisms fail to take account of significant user groups such as those who use high-contrast or high zoom, and who in many cases will find a description more useful than the original image. They also increase the complexity of navigation, because users who can see and hear the page will lose track of where they are.

4. How is this advice harmful? (The original advice to Avoid longdesc)
Like many important features, longdesc took years to be implemented by screen readers. The most recent implementation in a popular screenreader, NVDA, was held back in the explicit hope that Firefox would introduce native support in the browser, and the authors on reluctantly took on the task themselves when it became clear that this would take far longer.

Browser implementation has been resisted in places because HTML 5 *currently* doesn’t have a longdesc attribute. However, as part of “Plan-2014″, W3C’s official roadmap to complete HTML5 in 2014, there is an “extension specification” describing how to include longdesc. Given that there are a number of important implementations (as well as those mentioned above, it is supported by important authoring software), it is quite possible that HTML5 will include longdesc when it beomes a Recommendation (that’s what W3C calls its completed standards) – or even that the longdesc extension becomes a W3C Recommendation before HTML5.

One part of the discussion hinges on arguments about how much longdesc is used, how often it is used correctly, and how often advice is given to avoid its use. To the extent that this blog is influential, it is likely to have an impact on the future of the longdesc attribute and its usage.

I hope that I have shown why the advice given in this post is detrimental, and I hope that it will be explicitly retracted. While longdesc is not an ideal solution to a complex problem, 5 years of heated discussion have failed to produce an alternative that is as good, while longdesc does seem to meet the requirements of users, authors, implementors, and even specification editors.

Note. I’m co-chair of W3C’s HTML Task Force on Accessibility, the author of the “HTML5 Image Description Extension” specification that defines longdesc for HTML5 (or any other version), I was responsible for getting longdesc natively implemented in the Opera browser, I have written extensions for other browsers, and I have worked on this issue since 1997. So I may be knowledgeable – but I am unlikely to be unbiased.”

Chaals & Laura’s original comments on my advice to avoid longdesc appear below:

508 Compliant Alt Tags with Images

February 7th, 2013 No comments

508 Compliant alt tags with images: Using the alt attribute with images is the best and most common approach for simple images. Other non-text elements which support the alt attribute include graphics, audio clips, or other features that convey meaning through pictures or sound. Common examples include buttons, check boxes, pictures and embedded or streaming audio or video.

508 Compliance using the ALT attribute

A text equivalent is an explanation of the purpose of a non-text element. A common example is the use of an alt attribute associated with an image.  The alt attribute should be used to give a brief description of an illustration, or to explain the action performed by an image button or link.

The examples below show how the alt attribute is used in each of these cases:

1)      The Wiki Commons public domain photograph of a European Robin, below, is coded using an alt attribute with the descriptive value “European Robin”, as shown in the HTML snippet:


<img src=”EuropeanRobin.jpg” alt=”European Robin”>


European Robin

Describing an illustration using the alt attribute.



2)      The Wiki Commons public domain right arrow image, below, is coded using an alt attribute with the descriptive value “Next”, as shown in the HTML snippet:


<img src=”RightArrow.png” alt=”Next”>


Right Arrow

Right Arrow Button

Fig 2: Explaining the action of an image link using the alt attribute.


3)      Non-text elements that do not contribute to the meaning of the page do not need text equivalents.  For example, web page authors often use graphics for spacing.  For these elements an empty alt attribute is used:


<IMG src=”spacer.gif” alt=”">


Note: alt=”" is preferred, but alt=” ” can also be used.