Return to list of success criteria
1.1.1 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. (Level A)Understanding Success Criterion 1.1.1
Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 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.
Note: Other techniques may also be sufficient if they meet the success criterion.
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 for Situation A :
Short text alternative techniques for Situation A:
ARIA6: Using aria-label to provide labels for objects (ARIA)
ARIA10: Using aria-labelledby to provide a text alternative for non-text content (ARIA)
FLASH1: Setting the name property for a non-text object (Flash)
FLASH5: Combining adjacent image and text buttons for the same resource (Flash)
FLASH28: Providing text alternatives for ASCII art, emoticons, and leetspeak in Flash (Flash)
H2: Combining adjacent image and text links for the same resource (HTML)
H86: Providing text alternatives for ASCII art, emoticons, and leetspeak (HTML)
PDF1: Applying text alternatives to images with the Alt entry in PDF documents (PDF)
SL5: Defining a Focusable Image Class for Silverlight (Silverlight)
G95: Providing short text alternatives that provide a brief description of the non-text content using one of the following Short text alternative techniques for Situation B AND one of the following Long text alternative techniques for Situation B :
Short text alternative techniques for Situation B:
ARIA6: Using aria-label to provide labels for objects (ARIA)
ARIA10: Using aria-labelledby to provide a text alternative for non-text content (ARIA)
FLASH1: Setting the name property for a non-text object (Flash)
FLASH5: Combining adjacent image and text buttons for the same resource (Flash)
FLASH28: Providing text alternatives for ASCII art, emoticons, and leetspeak in Flash (Flash)
H2: Combining adjacent image and text links for the same resource (HTML)
H86: Providing text alternatives for ASCII art, emoticons, and leetspeak (HTML)
PDF1: Applying text alternatives to images with the Alt entry in PDF documents (PDF)
SL5: Defining a Focusable Image Class for Silverlight (Silverlight)
Long text alternative techniques for Situation B:
ARIA15: Using aria-describedby to provide descriptions of images (ARIA)
FLASH2: Setting the description property for a non-text object in Flash (Flash)
FLASH11: Providing a longer text description of an object (Flash)
H45: Using longdesc (HTML)
SL8: Displaying HelpText in Silverlight User Interfaces (Silverlight)
G82: Providing a text alternative that identifies the purpose of the non-text content using one of the following Text alternative techniques for controls and input for Situation C :
Text alternative techniques for controls and input for Situation C:
ARIA6: Using aria-label to provide labels for objects (ARIA)
ARIA9: Using aria-labelledby to concatenate a label from several text nodes (ARIA)
FLASH6: Creating accessible hotspots using invisible buttons (Flash)
FLASH25: Labeling a form control by setting its accessible name (Flash)
FLASH27: Providing button labels that describe the purpose of a button (Flash)
FLASH29: Setting the label property for form components (Flash)
FLASH30: Specifying accessible names for image buttons (Flash)
FLASH32: Using auto labeling to associate text labels with form controls (Flash)
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)
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)
Providing a descriptive label using one of the following Short text alternative techniques for Situation D :
ARIA6: Using aria-label to provide labels for objects (ARIA)
ARIA10: Using aria-labelledby to provide a text alternative for non-text content (ARIA)
G68: Providing a short text alternative that describes the purpose of live audio-only and live video-only content using one of the following Short text alternative techniques for Situation D :
G100: Providing a short text alternative which is the accepted name or a descriptive name of the non-text content using one of the following Short text alternative techniques for Situation D :
Short text alternative techniques for Situation D:
ARIA6: Using aria-label to provide labels for objects (ARIA)
ARIA10: Using aria-labelledby to provide a text alternative for non-text content (ARIA)
FLASH1: Setting the name property for a non-text object (Flash)
FLASH5: Combining adjacent image and text buttons for the same resource (Flash)
FLASH28: Providing text alternatives for ASCII art, emoticons, and leetspeak in Flash (Flash)
H2: Combining adjacent image and text links for the same resource (HTML)
H86: Providing text alternatives for ASCII art, emoticons, and leetspeak (HTML)
PDF1: Applying text alternatives to images with the Alt entry in PDF documents (PDF)
SL5: Defining a Focusable Image Class for Silverlight (Silverlight)
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 for Situation F :
Techniques to indicate that text alternatives are not required for Situation F:
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)
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)
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)
Writing for browsers that do not support frame (future link)
Providing alternative content for iframe (future link)
Not using long descriptions for iframe (future link)
Providing redundant text links for client-side image maps (future link)
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)
Using the ARIA presentation role to indicate elements are purely presentational (future link)
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.
This is not specific to HTML5, but covers good practise in writing alt text for a wide range of situations and content types. Of particular note are the sections on charts, diagrams, maps, and CAPTCHA images.