Playing with General Techniques for G1.1 L1 #1 - text alternatives for functional non-text content

Description/overview

Success Criterion: For all non-text content that is functional, such as graphical links or buttons, text alternatives serve the same purpose as the non-text content.

When is non-text content "functional?"

Non-text content is "functional" if the end-user can do something that will cause an action to occur (the user performs an action and the non-text content has a reaction). Functional non-text content may include hyperlinks, form fields, interactive images (image maps, flash animations?), etc. Functional non-text content does not include applets, flash animations, etc. Refer to Guideline 4.2 or Guideline 1.3 Success Criterion #y (John's proposal for a new SC) for information about making applets, scripts, and programmatic objects accessible. @@need to discuss this definition. not consensus.

When does a text alternative serve the same purpose as the non-text content?

When the function of the non-text content is perceivable to the end-user (ala Principle 1) and the end-user can interact with the non-text content ala the Success Criteria of Principle 2 - Operable.

Why did the WCAG WG word it this way?

To highlight that text alternatives must clearly indicate the action that will occur if the user activates the function.

How does this differ from the other Level 1 Success Criteria for Guideline 1.1?

There are four types of non-text content identified in Level 1 of Guideline 1.1:

• functional -
• conveys information -
• specific sensory experience -
• does not provide information, functionality, or sensory experience -

@@explanation of the different types. this explanation would appear in the general guidelines for each of the other 3 success criteria as well. This is intended to help people understand when to apply which criterion.

Other questions that might help the reader properly interpret our intent@@

@@

Examples

@@explanation of examples?

Example 1: An icon as a link.

A navigation bar includes an image of a house that links to the site's home page. The text alternative says "Home" and activating the link takes the user to the home page.

What not to do (bad examples)

• Text alternative should not say, "link" or "click here" or .... (@@that list could get *long*...yet where else do we put it?)
• @@ go down this path?

Techniques

@@thought it might be helpful to link to the specific techniques from within each example to help people determine which techniques apply to which instances/examples

• HTML: Providing text alternatives for images used as links.
• SVG: Providing text alternatives for link regions.

Example 2: An icon and text as a link.

A news report about a press conferences links to an audio recording of the conference as well as a text transcript of the conference. The link to the audio recording is a common "sound" icon as well as the text, "Listen to the press conference." The text alternative for the icon is, "Audio recording."

User scenarios:

1. Because of the combination of text and icon, someone who has a learning disability may have an easier time understanding that the link goes to an audio recording. Also, if they are using a speech synthesizer, the text alternative will help clarify the meaning of the image.
2. Because of the text alternative that is not redundant with the text, ... e.g., a bad example would be, "Listen to the press conference" in the text as well as the text alternative b/c the screen reader user will hear it twice.

Example 3: A graphical button.

A search form includes a button featuring the image of a magnifying glass. The text alternative for the graphic says “Search.”

Example 4: A map of Asia.

A news site includes a map of countries that were struck by the tsunami of December 2004. Each country on the map is a link to information about the tsunami’s impact. Text alternatives for each selectable area give the name of the country.

Techniques

@@even though thought about including techniques up above, though some sort of "index" of all techniques and tests might be helpful here.

Associate functional graphics and buttons with text alternatives that serve the same purpose as the graphic.

Description: @@add something non-technology specific about how writing good text alternatives for functional non-text content?? or, if go with the above format, not need the same "general" techniques here?

General guidelines for writing good text alternatives for functional non-text content

• Avoid redundancy

  If the user agent can identify the non-text content as a "button" then you don't need to include the word "button" in the text alternative. Also, if non-text content and text link are grouped as a single "button," avoid duplicating text in the link text and the text altnerative.

• Avoid placeholder text

  If your authoring tool inserts a placeholder such as, "image" be sure to replace it with something meaningful. ('nbsp', 'spacer' and SRC attribute value (filename).)

• Put something there

  If the text alternative will be redundant with an associated text link, use a null text alternative.Refer to the techniques for Guideline 1.1 Level 1 Success Criterion #4: Non-text content that does not provide information, functionality, or sensory experience is marked such that it can be ignored by assistive technology.

Objective: Associate functional non-text content with text alternatives that serve the same purpose as the non-text content.

Applies: To every delivery unit includes non-text content that provide functionality

Benefits: Text alternatives replace non-text content for people who use screen readers, text-only displays, telephone interfaces, etc. Text alternatives also replace non-text content for people who are temporarily unable to view the screen. Thus when non-text content provides functionality, text alternatives must provide the same functionality.

HTML Techniques and Tests

HTML Techniques are informative examples of how one might satisfy the success criterion using HTML. HTML Tests provide further specifics that may be used to determine if the techniques have been applied correctly and are written at the level that might be most usable by people developing Authoring Tools or Evaluation and Repair Tools.

CSS Techniques

CSS Techniques are informative examples of how one might satisfy the success criterion using CSS in combination with another technology such as HTML or SVG.

• Selecting individual characters or lines
• Creating stylized text with CSS rather than using raster images [John - does that mean that images used as headings? I had been assuming we were only concerned about interactivity and that stylized text conveyed information]

Questions/Thoughts as we draft this/comments on the process used to create

• move benefits and examples out of normative document, put here? Not only can map examples to success criterion, also the benefits. may mean redundancy between general techniques. increases reliance on general techniques for interpretation, but how much help are the examples in the guidelines if not mapped to specific success criteria?
• I was surprised that the list of tests by guideline did not include all of these. Also, many of the tests only link to one success criterion when they should link to several. Therefore, I looked at all of the tests by element to create this list.
• An earlier version of this draft had one section for Techniques and another section for Tests. This earlier draft attempted to list general tests for this success criterion, although after further discussion it appears that the General test is the Success Criterion itself.
• Concerned that this page will grow as we add techniques and tests. Could be long. However, this could be the perfect place to link to other Techniques such as PDF and Flash.
• btw: forsee using the navigation structure ala Shawn's mock-up for the Dublin F2F.