angus/WCAG
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Angus Kola
2025-12-22 00:21:10 -05:00
commit 2bd947dfe5
91 changed files with 3819 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
1-perceivable/1.1.1-non-text-content.md
+87
View File
@@ -0,0 +1,87 @@
[Back to 1 Perceivable index](index.md)
# 1.1.1 Non-text Content
- Level: A
- Guideline: 1.1 Text Alternatives
- Principle: 1 Perceivable
## What it is
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
- **Controls, Input:** If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Success Criterion 4.1.2 for additional requirements for controls and content that accepts user input.)
- **Time-Based Media:** If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
- **Test:** If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
- **Sensory:** If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
- **CAPTCHA:** If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
- **Decoration, Formatting, Invisible:** If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
## How to test
- Check: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Success Criterion 4.1.2 for additional requirements for controls and content that accepts user input.)
- Check: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
- Check: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
- Check: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
- Check: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
- Check: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
- Use the sufficient techniques below as acceptable methods when applicable.
- Confirm none of the common failures apply.
## Sufficient techniques (W3C)
- G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
- ARIA6: Using aria-label to provide labels for objects
- ARIA10: Using aria-labelledby to provide a text alternative for non-text content
- 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
- H37: Using alt attributes on img elements
- H53: Using the body of the object element
- H86: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak
- PDF1: Applying text alternatives to images with the Alt entry in PDF documents
- G95: Providing short text alternatives that provide a brief description of the non-text content
- ARIA15: Using aria-describedby to provide descriptions of images
- 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
- G92: Providing long description for non-text content that serves the same purpose and presents the same information
- G82: Providing a text alternative that identifies the purpose of the non-text content
- ARIA9: Using aria-labelledby to concatenate a label from several text nodes
- H24: Providing text alternatives for the area elements of image maps
- H30: Providing link text that describes the purpose of a link for anchor elements
- H36: Using alt attributes on images used as submit buttons
- H44: Using label elements to associate text labels with form controls
- H65: Using the title attribute to identify form controls when the label element cannot be used
- Providing a descriptive label
- G68: Providing a short text alternative that describes the purpose of live audio-only and live video-only content
- G100: Providing a short text alternative which is the accepted name or a descriptive name of the non-text content
- G143: Providing a text alternative that describes the purpose of the CAPTCHA
- G144: Ensuring that the web page contains another CAPTCHA serving the same purpose using a different modality
- Implementing or marking the non-text content so that it will be ignored by assistive technology
- C9: Using CSS to include decorative images
- H67: Using null alt text and no title attribute on img elements for images that assistive technology should ignore
- PDF4: Hiding decorative images with the Artifact tag in PDF documents
## Advisory techniques (W3C)
- C18: Using CSS margin and padding rules instead of spacer images for layout design
## Common failures (W3C)
- 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 not marking up decorative images in HTML in a way that allows assistive technology to ignore them
- 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 or text alternative 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
## Resources
- WCAG 2.2 SC: https://www.w3.org/TR/WCAG22/#non-text-content
- Understanding: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html
- Quick reference: https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2#non-text-content
[Back to 1 Perceivable index](index.md)