Reorganizing WCAG 1.1.1 Techniques

Techniques and Failures for Success Criterion 1.1.1 - Non-text Content

Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this Success Criterion. The techniques listed only satisfy the Success Criterion if all of the WCAG 2.0 conformance requirements have been met.

Sufficient Techniques

Instructions: Select the situation below that matches your content. Each situation includes techniques or combinations of techniques that are known and documented to be sufficient for that situation.

Situation A: If a short description can serve the same purpose and present the same information as the non-text content:

  1. G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content using a short text alternative technique listed below

    Short Alternative techniques, click to expand

    1. H2: Combining adjacent image and text links for the same resource (HTML)

    2. H37: Using alt attributes on img elements (HTML)

    3. H35: Providing text alternatives on applet elements (HTML)

    4. FLASH1: Setting the name property for a non-text object (Flash)

    5. PDF1: Applying text alternatives to images with the Alt entry in PDF documents (PDF)

    6. H53: Using the body of the object element (HTML)

    7. H24: Providing text alternatives for the area elements of image maps (HTML)

    8. H86: Providing text alternatives for ASCII art, emoticons, and leetspeak (HTML)

    9. FLASH28: Providing text alternatives for ASCII art, emoticons, and leetspeak in Flash (Flash)

    10. H30: Providing link text that describes the purpose of a link for anchor elements (HTML)

      Note: See Understanding Success Criterion 2.4.4 Link Purpose (In Context).

    11. G196: Using a text alternative on one item within a group of images that describes all items in the group

    12. FLASH5: Combining adjacent image and text buttons for the same resource (Flash)

    13. SL5: Defining a Focusable Image Class for Silverlight (Silverlight)

Situation B: If a short description can not serve the same purpose and present the same information as the non-text content (e.g., a chart or diagram):

  1. G95: Providing short text alternatives that provide a brief description of the non-text content using one short text alternative technique listed below AND one of the techniques for long description listed below:

    Short Alternative techniques, click to expand

    1. H2: Combining adjacent image and text links for the same resource (HTML)

    2. H37: Using alt attributes on img elements (HTML)

    3. H35: Providing text alternatives on applet elements (HTML)

    4. FLASH1: Setting the name property for a non-text object (Flash)

    5. PDF1: Applying text alternatives to images with the Alt entry in PDF documents (PDF)

    6. H53: Using the body of the object element (HTML)

    7. H24: Providing text alternatives for the area elements of image maps (HTML)

    8. H86: Providing text alternatives for ASCII art, emoticons, and leetspeak (HTML)

    9. FLASH28: Providing text alternatives for ASCII art, emoticons, and leetspeak in Flash (Flash)

    10. H30: Providing link text that describes the purpose of a link for anchor elements (HTML)

      Note: See Understanding Success Criterion 2.4.4 Link Purpose (In Context).

    11. G196: Using a text alternative on one item within a group of images that describes all items in the group

    12. FLASH5: Combining adjacent image and text buttons for the same resource (Flash)

    13. SL5: Defining a Focusable Image Class for Silverlight (Silverlight)

    2. Long Description techniques, click to expand

    1. H45: Using longdesc (HTML)

    2. H53: Using the body of the object element (HTML)

    3. FLASH2: Setting the description property for a non-text object in Flash (Flash)

    4. FLASH11: Providing a longer text description of an object (Flash)

    5. SL8: Displaying HelpText in Silverlight User Interfaces (Silverlight)

Situation C: If non-text content is a control or accepts user input:

  1. G82: Providing a text alternative that identifies the purpose of the non-text content using a short text alternative technique listed below

    Alternative text techniques for controls and input, click to expand

    1. H36: Using alt attributes on images used as submit buttons (HTML)

    2. H44: Using label elements to associate text labels with form controls (HTML)

    3. H65: Using the title attribute to identify form controls when the label element cannot be used (HTML)

    4. FLASH32: Using auto labeling to associate text labels with form controls (Flash)

    5. FLASH29: Setting the label property for form components (Flash)

    6. FLASH25: Labeling a form control by setting its accessible name (Flash)

    7. FLASH30: Specifying accessible names for image buttons (Flash)

    8. FLASH27: Providing button labels that describe the purpose of a button (Flash)

    9. FLASH6: Creating accessible hotspots using invisible buttons (Flash)

    10. SL18: Providing Text Equivalent for Nontext Silverlight Controls With AutomationProperties.Name (Silverlight)

    11. SL26: Using LabeledBy to Associate Labels and Targets in Silverlight (Silverlight)

    12. SL30: Using Silverlight Control Compositing and AutomationProperties.Name (Silverlight)

Situation D: If non-text content is time-based media (including live video-only and live audio-only); a test or exercise that would be invalid if presented in text; or primarily intended to create a specific sensory experience:

  1. Providing a descriptive label using a short text alternative technique listed below

    Short Alternative techniques, click to expand

    1. H2: Combining adjacent image and text links for the same resource (HTML)

    2. H37: Using alt attributes on img elements (HTML)

    3. H35: Providing text alternatives on applet elements (HTML)

    4. FLASH1: Setting the name property for a non-text object (Flash)

    5. PDF1: Applying text alternatives to images with the Alt entry in PDF documents (PDF)

    6. H53: Using the body of the object element (HTML)

    7. H24: Providing text alternatives for the area elements of image maps (HTML)

    8. H86: Providing text alternatives for ASCII art, emoticons, and leetspeak (HTML)

    9. FLASH28: Providing text alternatives for ASCII art, emoticons, and leetspeak in Flash (Flash)

    10. H30: Providing link text that describes the purpose of a link for anchor elements (HTML)

      Note: See Understanding Success Criterion 2.4.4 Link Purpose (In Context).

    11. G196: Using a text alternative on one item within a group of images that describes all items in the group

    12. FLASH5: Combining adjacent image and text buttons for the same resource (Flash)

    13. SL5: Defining a Focusable Image Class for Silverlight (Silverlight)

  2. G68: Providing a descriptive labelshort text alternative that describes the purpose of live audio-only and live video-only content using a short text alternative technique listed below

    Short Alternative techniques, click to expand

    1. H2: Combining adjacent image and text links for the same resource (HTML)

    2. H37: Using alt attributes on img elements (HTML)

    3. H35: Providing text alternatives on applet elements (HTML)

    4. FLASH1: Setting the name property for a non-text object (Flash)

    5. PDF1: Applying text alternatives to images with the Alt entry in PDF documents (PDF)

    6. H53: Using the body of the object element (HTML)

    7. H24: Providing text alternatives for the area elements of image maps (HTML)

    8. H86: Providing text alternatives for ASCII art, emoticons, and leetspeak (HTML)

    9. FLASH28: Providing text alternatives for ASCII art, emoticons, and leetspeak in Flash (Flash)

    10. H30: Providing link text that describes the purpose of a link for anchor elements (HTML)

      Note: See Understanding Success Criterion 2.4.4 Link Purpose (In Context).

    11. G196: Using a text alternative on one item within a group of images that describes all items in the group

    12. FLASH5: Combining adjacent image and text buttons for the same resource (Flash)

    13. SL5: Defining a Focusable Image Class for Silverlight (Silverlight)

  3. G100: Providing a short text alternative which is the accepted name or a descriptive name of the non-text content using a short text alternative technique listed below

    Short Alternative techniques, click to expand
    1. 36: Using alt attributes on images used as submit buttons (HTML)

    2. H2: Combining adjacent image and text links for the same resource (HTML)

    3. H37: Using alt attributes on img elements (HTML)

    4. H35: Providing text alternatives on applet elements (HTML)

    5. FLASH1: Setting the name property for a non-text object (Flash)

    6. PDF1: Applying text alternatives to images with the Alt entry in PDF documents (PDF)

    7. H53: Using the body of the object element (HTML)

    8. H24: Providing text alternatives for the area elements of image maps (HTML)

    9. H86: Providing text alternatives for ASCII art, emoticons, and leetspeak (HTML)

    10. FLASH28: Providing text alternatives for ASCII art, emoticons, and leetspeak in Flash (Flash)

    11. H30: Providing link text that describes the purpose of a link for anchor elements (HTML)

      Note: See Understanding Success Criterion 2.4.4 Link Purpose (In Context).

    12. G196: Using a text alternative on one item within a group of images that describes all items in the group

    13. FLASH5: Combining adjacent image and text buttons for the same resource (Flash)

    14. SL5: Defining a Focusable Image Class for Silverlight (Silverlight)

Situation F: If the non-text content should be ignored by assistive technology:

  1. Implementing or marking the non-text content so that it will be ignored by assistive technology using one of the technology-specific techniques listed below

    Short Alternative techniques, click to expand

Additional Techniques (Advisory) for 1.1.1

Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.

General Techniques for Informative Non-Text Content (Advisory)

General Techniques for Informative Non-Text Content (Advisory), click to expand

  • Identifying informative non-text content (future link)

  • Keeping short descriptions short (future link)

  • Describing images that include text (future link)

  • Providing a longer description of the non-text content where only a descriptive label is required using a technology-specific technique (for an accessibility-supported content technology) for long description listed above (future link)

  • Providing different sizes for non-text content when it cannot have an equivalent accessible alternative (future link)

  • Using server-side scripts to resize images of text (future link)

General Techniques for Live Non-Text Content (Advisory)

  • Linking to textual information that provides comparable information (e.g., for a traffic Webcam, a municipality could provide a link to the text traffic report.) (future link)

General techniques to minimize the barrier of CAPTCHAs

General techniques to minimize CAPTCHA, click to expand

  • Providing more than two modalities of CAPTCHAs (future link)

  • Providing access to a human customer service representative who can bypass CAPTCHA (future link)

  • Not requiring CAPTCHAs for authorized users (future link)

HTML Techniques (Advisory)

HTML advisory techniques, click to expand

CSS Techniques (Advisory)

CSS Techniques (Advisory)

WAI-ARIA Techniques (Advisory)

  • Using the ARIA presentation role to indicate elements are purely presentational (future link)

Metadata Techniques (Advisory)

Meta data techniques, click to expand

  • Using metadata to associate text transcriptions with a video (future link)

  • Using metadata to associate text transcriptions with audio-only content (future link)

    • EXAMPLE: Providing, in metadata, URI(s) that points to an audio description and a text transcript of a video.

    • EXAMPLE: Providing, in metadata, URI(s) that point to several text transcripts (English, French, Dutch) of an audio file.

Common Failures for SC 1.1.1

The following are common mistakes that are considered failures of Success Criterion 1.1.1 by the WCAG Working Group.

Failure techniques, click to expand