Restructuring Understanding 1.1.1
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:
- 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 one of the following short text alternative techniques:
- Short Text Alternative techniques
- G196: Using a text alternative on one item within a group of images that describes all items in the group
- H2: Combining adjacent image and text links for the same resource (HTML)
- H37: Using alt attributes on img elements (HTML)
- H35: Providing text alternatives on applet elements (HTML)
- H53: Using the body of the object element (HTML)
- H86: Providing text alternatives for ASCII art, emoticons, and leetspeak (HTML)
- FLASH1: Setting the name property for a non-text object (Flash)
- FLASH28: Providing text alternatives for ASCII art, emoticons, and leetspeak in Flash (Flash)
- FLASH5: Combining adjacent image and text buttons for the same resource (Flash)
- PDF1: Applying text alternatives to images with the Alt entry in PDF documents (PDF)
- SL5: Defining a Focusable Image Class for Silverlight (Silverlight)
- Short Text Alternative techniques
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):
- G95: Providing short text alternatives that provide a brief description of the non-text content using one of the following short text alternative techniques AND G92: Providing long description for non-text content that serves the same purpose and presents the same information using one of the following long description techniques:
- Short Text Alternative techniques
- G196: Using a text alternative on one item within a group of images that describes all items in the group
- H2: Combining adjacent image and text links for the same resource (HTML)
- H37: Using alt attributes on img elements (HTML)
- H35: Providing text alternatives on applet elements (HTML)
- H53: Using the body of the object element (HTML)
- H86: Providing text alternatives for ASCII art, emoticons, and leetspeak (HTML)
- FLASH1: Setting the name property for a non-text object (Flash)
- FLASH28: Providing text alternatives for ASCII art, emoticons, and leetspeak in Flash (Flash)
- FLASH5: Combining adjacent image and text buttons for the same resource (Flash)
- PDF1: Applying text alternatives to images with the Alt entry in PDF documents (PDF)
- SL5: Defining a Focusable Image Class for Silverlight (Silverlight)
- Long Description techniques:
- H45: Using longdesc (HTML)
- H53: Using the body of the object element (HTML)
- FLASH2: Setting the description property for a non-text object in Flash (Flash)
- FLASH11: Providing a longer text description of an object (Flash)
- SL8: Displaying HelpText in Silverlight User Interfaces (Silverlight)
- G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content
- G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description
- Short Text Alternative techniques
Situation C: If non-text content is a control or accepts user input:
- G82: Providing a text alternative that identifies the purpose of the non-text content using one of the following text alternative techniques for controls:
- Alternative text techniques for controls and input:
- H24: Providing text alternatives for the area elements of image maps (HTML)
- H30: Providing link text that describes the purpose of a link for anchor elements (HTML)
- H36: Using alt attributes on images used as submit buttons (HTML)
- H44: Using label elements to associate text labels with form controls (HTML)
- H65: Using the title attribute to identify form controls when the label element cannot be used (HTML)
- FLASH6: Creating accessible hotspots using invisible buttons (Flash)
- FLASH25: Labeling a form control by setting its accessible name (Flash)
- FLASH30: Specifying accessible names for image buttons (Flash)
- FLASH27: Providing button labels that describe the purpose of a button (Flash)
- FLASH29: Setting the label property for form components (Flash)
- FLASH32: Using auto labeling to associate text labels with form controls (Flash)
- SL18: Providing Text Equivalent for Nontext Silverlight Controls With AutomationProperties.Name (Silverlight)
- SL26: Using LabeledBy to Associate Labels and Targets in Silverlight (Silverlight)
- SL30: Using Silverlight Control Compositing and AutomationProperties.Name (Silverlight)
- Alternative text techniques for controls and input:
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:
- Providing a descriptive label using one of the techniques in the Short Text Alternative techniques list below:
- G68: Providing a short text alternative that describes the purpose of live audio-only and live video-only content using one of the techniques in the Short Text Alternative techniques list below:
- G100: Providing a short text alternative which is the accepted name or a descriptive name of the non-text content using one of the techniques in the Short Text Alternative techniques list below:
- Short Text Alternative techniques
- G196: Using a text alternative on one item within a group of images that describes all items in the group
- H2: Combining adjacent image and text links for the same resource (HTML)
- H37: Using alt attributes on img elements (HTML)
- H35: Providing text alternatives on applet elements (HTML)
- H53: Using the body of the object element (HTML)
- H86: Providing text alternatives for ASCII art, emoticons, and leetspeak (HTML)
- FLASH1: Setting the name property for a non-text object (Flash)
- FLASH28: Providing text alternatives for ASCII art, emoticons, and leetspeak in Flash (Flash)
- FLASH5: Combining adjacent image and text buttons for the same resource (Flash)
- PDF1: Applying text alternatives to images with the Alt entry in PDF documents (PDF)
- SL5: Defining a Focusable Image Class for Silverlight (Silverlight)
- Short Text Alternative techniques
Situation E: If non-text content is a CAPTCHA:
- G143: Providing a text alternative that describes the purpose of the CAPTCHA AND G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality
Situation F: If the non-text content should be ignored by assistive technology:
- Implementing or marking the non-text content so that it will be ignored by assistive technology using one of the following techniques to indicate that text alternatives are not required:
- Techniques to indicate that text alternatives are not required:
- H67: Using null alt text and no title attribute on img elements for images that AT should ignore (HTML)
- C9: Using CSS to include decorative images (CSS)
- FLASH3: Marking objects in Flash so that they can be ignored by AT (Flash)
- PDF4: Hiding decorative images with the Artifact tag in PDF documents (PDF)
- Techniques to indicate that text alternatives are not required:
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:
- 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:
- 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 CAPTCHA:
- 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
- H46: Using noembed with embed (HTML)
- Writing for browsers that do not support frame (future link)
- Providing alternative content for iframe (future link)
- H27: Providing text and non-text alternatives for object (HTML)
- Not using long descriptions for iframe (future link)
- Providing redundant text links for client-side image maps (future link)
CSS Techniques
- C18: Using CSS margin and padding rules instead of spacer images for layout design (CSS)
- Using CSS background, :before or :after rules for decorative images instead of img elements (future link)
- Displaying empty table cells (future link)
WAI-ARIA Techniques
- Using the ARIA presentation role to indicate elements are purely presentational (future link)
Silverlight Techniques
Meta data techniques
- 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.
- F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information
- F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image
- F20: Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when changes to non-text content occur
- F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g., filenames or placeholder text)
- F38: Failure of Success Criterion 1.1.1 due to omitting the alt-attribute for non-text content used for decorative purposes only in HTML
- F39: Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology
- F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute on img elements, area elements, and input elements of type "image"
- F67: Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information
- F71: Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative
- F72: Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative