guideline-14-separate-background-from-foreground

Posted on April 27, 2019 Posted by

guideline-14-separate-background-from-foreground

Guideline 1.4: Separate background from foreground


Make it easier for users to see and hear content including separating foreground from background.

This guideline is about making the default presentation as easy to perceive as possible to people with disabilities: it’s about contrast, not only the ‘colors’ for visual content, but also for the ‘voices’ on audio content.

Best practices

  • Use readable fonts.
  • Text in images should be at least 14 points and has good contrast.
  • Links and controls must be highlighted when they receive keyboard focus.

1.4.1 Use of Color Level A

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Compulsory

If the color of particular words, backgrounds, or other content is used to indicate information:
  • Ensure that information conveyed by color differences is also available in text
  • Include a text cue whenever color cues are used
  • Ensure that additional visual cues are available when text color differences are used to convey information
  • Use a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them (We will see how to calcultate this ratio
If the color is used within an image to convey information:
  • Use color and pattern
  • Ensure that information conveyed by color differences is also available in text

Recommended

  • Convey information redundantly using color
  • Use CSS to change the presentation of a user interface component when it receives focus

Failures

  • Having a text alternative that does not include information that is conveyed by color differences in the image
  • Creating links that are not visually evident without color vision
  • Identifying required or error fields using color differences only

1.4.2 Audio Control Level A

If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.

Since any content that does not meet this success criterion can interfere with a user’s ability to use the whole page, all content on the Web page (whether or not it is used to meet other success criteria) must meet this success criterion. See Conformance Requirement 5: Non-Interference.

Compulsory

  • Play a sound that turns off automatically within three seconds
  • Provide a control near the beginning of the Web page that turns off sounds that play automatically
  • Play sounds only on user request

Recommended

  • Provide a site-wide preference to turn off audio in addition to providing a control near the top of the Web page that turns off sounds that play automatically

Failures

  • Playing a sound longer than 3 seconds where there is no mechanism to turn it off

1.4.3 Minimum Contrast Level AA

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Read also about the enhanced contrast (Level AAA)

Compulsory

  • Use the browser defaults, so do not specify background nor text color.
  • Provide a control with a sufficient contrast ratio that allows users to switch to a sufficient contrast version.
  • Ensure these contrast ratios between text (and images of text) and background behind the text:
    Text size Text weight Contrast ratio Level AA
    Less than 18 points Normal 4.5:1
    Bigger than 18 points Normal 3:1
    Less than 14 points Bold 4.5:1
    Bigger than 14 points Bold 3:1

Recommended

  • Use a technology that has commonly-available user agents that can change the foreground and background of blocks of text
  • Use a higher contrast value for text that is over a patterned background
  • Use Unicode text and style sheets instead of images of text
  • Use a higher contrast values for lines in diagrams
  • Use greater contrast level for red-black text/background combinations
  • Use colors that are composed predominantly of mid spectral components for the light and spectral extremes (blue and red wavelengths) for the dark
  • Use a light pastel background rather than a white background behind black text to create sufficient but not extreme contrast
  • Make icons using simple line drawings that meet the contrast provisions for text
  • Provide sufficient color contrast in graphs and charts
  • Use a 3:1 contrast ratio or higher as the default presentation
  • Provide sufficient color contrast for empty text fields

Failures

  • specifying foreground colors without specifying background colors or vice versa
  • using background images that do not provide sufficient contrast with foreground text (or images of text)

1.4.4 Resize text Level AA

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

Compulsory

  • Use a technology that has commonly-available user agents that support zoom
  • Ensure that text containers resize when the text resizes AND use measurements that are relative to other measurements in the content by using em units for text containers and percent, named or em units for font sizes. Also, you can resize text containers by liquid layouts or calculating calculate size and position in a way that scales with text size
  • Provide controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent
  • Ensure that there is no loss of content or functionality when the text resizes and text containers do not resize

Recommended

  • Provide large fonts by default
  • Use page-percent for container sizes
  • Avoid scaling font sizes smaller than the user-agent default
  • Avoid justified text
  • Provide sufficient inter-line and inter-column spacing
  • Provide different sizes for non-text content when it cannot have an equivalent accessible alternative
  • Avoid the use of text in raster images
  • Use server-side scripts to resize images of text
  • Scale form elements which contain text
  • Ensure that text in raster images is at least 18pt
  • Scale text down to 50%
  • Use relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized
  • Use CSS to control visual presentation of text
  • Provide a mechanism to allow captions to be enlarged

Failures

  • If you resize visually rendered text up to 200% causes the text, image or controls are clipped, truncated or obscured
  • If text-based form controls do not resize when visually rendered text is resized up to 200%

1.4.5 Images of Text Level AA

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:

  • Customizable: The image of text can be visually customized to the user’s requirements;
  • Essential: A particular presentation of text is essential to the information being conveyed, i.e. logotypes (text that is part of a logo or brand name) .

Read also about the images of text without exceptions(Level AAA)

Compulsory

  • Use CSS to control visual presentation of text
  • Use CSS to replace text with images of text and providing user interface controls to switch
  • Separate information and structure from presentation to enable different presentations

Recommended

  • Identify informative non-text content
  • Use server-side scripts to resize images of text
  • Use percent, named or em units for font sizes
  • Use CSS letter-spacing to control spacing within a word
  • Position content based on structural markup
  • Avoid applying text styling to text characters within a word

1.4.6 Enhanced Contrast Level AAA

The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Read also about the minimum contrast (Level AA)

Compulsory

  • Use the browser defaults, so do not specify background nor text color.
  • Provide a control with a sufficient contrast ratio that allows users to switch to a sufficient contrast version.
  • Ensure these contrast ratios between text (and images of text) and background behind the text:
    Text size Text weight Contrast ratio Level AAA
    Less than 18 points Normal 7:1
    Bigger than 18 points Normal 4.5:1
    Less than 14 points Bold 7:1
    Bigger than 14 points Bold 4.5:1

Recommended

Follow the same recommendations as in the minimum contrast success criteria.

1.4.7 Low or No Background Audio Level AAA

Low or No Background Audio: For prerecorded audio-only content that (1) contains primarily speech in the foreground, (2) is not an audio CAPTCHA or audio logo, and (3) is not vocalization intended to be primarily musical expression such as singing or rapping, at least one of the following is true:

  • No Background: The audio does not contain background sounds.
  • Turn Off: The background sounds can be turned off.
  • 20 dB: The background sounds are at least 20 decibels lower than the foreground speech content, with the exception of occasional sounds that last for only one or two seconds.

Per the definition of “decibel,” background sound that meets this requirement will be approximately four times quieter than the foreground speech content.

Compulsory

  • Mix audio files so that non-speech sounds are at least 20 decibels lower than the speech audio content

Recommended

  • Providing a way for users to adjust auditory levels of foreground and background sound independently

1.4.8 Visual Presentation Level AAA

For the visual presentation of blocks of text, a mechanism is available to achieve the following:

  1. Foreground and background colors can be selected by the user.
  2. Width is no more than 80 characters or glyphs (40 if CJK).
  3. Text is not justified (aligned to both the left and the right margins).
  4. Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
  5. Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.

Compulsory

Ensure foreground and background colors can be selected by the user
  • Specify text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content
  • Specify borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors
  • Use a technology that has commonly-available user agents that can change the foreground and background of blocks of text
  • Don’t specify background color, nor specifying text color, and not use technology features that change those defaults
  • Providing a multi color selection tool on the page for foreground and background colors
Ensure width is no more than 80 characters or glyphs (40 if they are Chinese, Japanese and Korean characters)
  • Don’t interfere with the user agent’s reflow of text as the viewing window is narrowed
  • Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized
Ensure text is not justified (aligned to both the left and the right margins)
  • Specify alignment either to the left OR right in CSS
  • Provide a mechanism to remove full justification of text
  • Align text on only one side
Ensure line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing
  • Provide a button on the page to increase line spaces and paragraph spaces
  • Specify line spacing in CSS
Ensure text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window
  • Don’t interfere with the user agent’s reflow of text as the viewing window is narrowed
  • Use liquid layout and measurements that are relative to other measurements in the content by using percent, named font or em units for font sizes or percentage values in CSS for container sizes or calculating size and position in a way that scales with text size (Scripting)
  • Provide options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text

Recommended

  • Use a hover effect to highlight a paragraph, list items, or table cells
  • Present text in sans serif font or providing a mechanism to achieve this
  • Use vertical (bulleted or numbered) lists rather than inline lists
  • Use upper and lower case according to the spelling conventions of the text language
  • Provide large fonts by default
  • Avoid the use of text in raster images
  • Avoid scaling font sizes smaller than the user-agent default
  • Provid sufficient inter-column spacing
  • Avoid centrally aligned text
  • Avoid chunks of italic text
  • Avoid overuse of different styles on individual pages and in sites
  • Make links visually distinct
  • Provide expandable bullets
  • Show/hide bullet points
  • Put an em-space or two spaces after sentences

Failures

  • Specifying foreground colors without specifying background colors or vice versa
  • Using text that is justified (aligned to both the left and the right margins)

1.4.9 Images of Text without exceptions Level AAA

Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed, i.e. logotypes (text that is part of a logo or brand name).

Read also about the images of text without exceptions(Level AA)

More info


guideline-14-separate-background-from-foreground

Posted on April 27, 2019 Posted by Victoria Brooks

guideline-13-present-content-in-different-ways

Guideline 1.3: Present content in different ways


Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

Your website audience has very different needs and preferences, so ensure that your content is available in a way that can be perceived by all users in different ways (visually, audibly, tactilely etc.).

If there is embedded information in a way that the structure and information cannot be rendered by the assistive technology, then it cannot be rendered in other formats as needed by the user. (e.g. text in an image).

WCAG 2 refers to structure as the way the parts of a Web page are organized in relation to each other; and the way a collection of Web pages is organized; and presentation as rendering of the content in a form that can be perceived by users.

1.3.1 Info and Relationships Level A

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Compulsory

If the technology provides semantic structure to make information and relationships conveyed:
  • Use semantic elements to mark up structure AND use semantic markup to mark emphasized or special text
  • Use text to convey information that is conveyed by variations in presentation of text
  • Separate information and structure from presentation to enable different presentations
  • Make information and relationships conveyed using:
    Web page structure
    • semantic markup whenever color cues are used
    • ol, ul and dl for lists
    • h1-h6 to identify headings
    • functions of the Document Object Model to add content to a page
    Tables
    • table markup to present tabular information
    • caption elements to associate data table captions with data tables
    • the scope attribute to associate header cells and data cells in data tables
    • the summary attribute of the table element to give an overview of data tables
    • id and headers attributes to associate data cells with header cells in data tables
    Forms
    • label elements to associate text labels with form controls
    • the title attribute to identify form controls when the label element cannot be used
    • a description for groups of form controls using fieldset and legend elements
    • OPTGROUP to group OPTION elements inside a SELECT
If the technology in use does NOT provide the semantic structure to make the information and relationships conveyed:
  • Use text to convey information that is conveyed by variations in presentation of text
  • Make information and relationships conveyed through presentation programmatically determinable or available in text using standard text formatting conventions for paragraphs, lists and headings

Recommended

  • Use CSS to control visual presentation of text
  • Use CSS rather than tables for page layout
  • Position labels to maximize predictability of relationships
  • Use ARIA to provide a descriptive, programmatically determined label
  • Use ARIA to identify form fields as required
  • Provide labels for all form controls that do not have implicit labels
  • Organize a page using headings

Failures

  • using changes in text presentation to convey information without using the appropriate markup or text
  • insufficient information in DOM to determine one-to-one relationships (e.g., between labels with same id) in HTML
  • using white space characters to create multiple columns in plain text content
  • using white space characters to format tables in plain text content
  • using scripting events to emulate links in a way that is not programmatically determinable
  • using structural markup in a way that does not represent relationships in the content
  • using th elements, caption elements, or non-empty summary attributes in layout tables
  • using the pre element to markup tabular information
  • insufficient information in DOM to determine specific relationships in XML
  • using changes in text presentation to convey information without using the appropriate markup or text
  • association of label and user interface controls not being programmatically determinable
  • inserting non-decorative content by using :before and :after pseudo-elements and the ‘content’ property in CSS

1.3.2 Meaningful Sequence Level A

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

Compulsory

  • Order the content in a meaningful sequence for all the content in the Web page
  • Mark sequences in the content as meaningful using one of the following techniques AND order the content in a meaningful sequence for those sequences:
    • Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline
    • Using the dir attribute on an inline element to resolve problems with nested directional runs
    • Positioning content based on structural markup with CSS
    • Using CSS letter-spacing to control spacing within a word
  • Make the DOM order match the visual order.

Recommended

  • Use left-justified text for languages that are written left to right and right-justified text for languages that are written right-to-left
  • Provide a link to linearized rendering
  • Provide a style switcher between style sheets that affect presentation order

Failures

  • using white space characters to format tables in plain text content
  • using white space characters to create multiple columns in plain text content
  • using white space characters to control spacing within a word
  • using an HTML layout table that does not make sense when linearized
  • changing the meaning of content by positioning information with CSS

1.3.3 Sensory Characteristics Level A

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.

Compulsory

  • Provide textual identification of items that otherwise rely only on sensory information to be understood

Recommended

  • Use an image with a text alternative for graphical symbols instead of a Unicode font glyph with the desired graphical appearance but different meaning

Failures

  • Identifying content only by its shape or location
  • Using a graphical symbol alone to convey information

More Info


guideline-13-present-content-in-different-ways

Posted on April 27, 2019 Posted by Victoria Brooks

guideline-12-time-based-media

Guideline 1.2: Time-based Media


Provide alternatives for time-based media

You can use this guideline both for time-based media and synchronized media (with another format and/or time-based interactive components), including:

  • only audio
  • only video
  • audio and video combined
  • audio and/or video combined with interaction

Best practices

  • Prerecorded audio: Provide an alternative that presents equivalent information for prerecorded audio-only content.
  • Prerecorded video: Provide either an alternative for time-based media or an audio track to present equivalent information for prerecorded video-only content.
  • Prerecorded synchronized media: Provide an audio description or media alternative.
  • Prerecorded audio in synchronized media: Provide captions, and if possible, also sign language interpretation.
  • Live audio content in synchronized media (Live): provide captions.
  • Prerecorded video content in synchronized media (): Provide an audio description.
  • Embed interactive elements (for example links) in the alternative content where appropiate.

1.2.1 Prerecorded audio only and prerecorded video only Level A

For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such:

  • Prerecorded Audio-only: An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content.
  • Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.

Compulsory

  • Provide an alternative for time-based media for prerecorded audio-only content or prerecorded video-only.
  • Provide audio that describes the important video content and describing it as such.

Recommended

  • Provide a transcript of an audio only presentation.
  • Link to textual information that provides comparable information (e.g., for a traffic Webcam, a municipality could provide a link to the text traffic report.)

Failures

  • Alternative text that are not descriptive. E.g. alt="spacer", alt="icon.jpg" or alt="image".
  • Long descriptions that does not present the same information.

1.2.2 Captions for prerecorded audio content Level A

Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

Compulsory

  • Provide open (always visible) or closed captions.

Recommended

  • If the clip has no sound, provide a note saying “No sound is used in this clip”.
  • If there are audio tracks for different languages, provide captions using SMIL.

Failures

  • Captions omitting some dialogue or important sound effects
  • Synchronized media without captions when the synchronized media presents more information than is presented on the page
  • Not labeling a synchronized media alternative as an alternative.

1.2.3 Audio Description or Media Alternative (Prerecorded) Level A

An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

Compulsory

  • Provide an alternative for time based media linking to the alternative for time-based media immediately next to the non-text content; or using the body of the object element
  • Provide a second, user-selectable, audio track that includes audio descriptions
  • Provide a version of a movie with audio descriptions using SMIL or using any player that supports audio and video
  • Provide a movie with extended audio descriptions using SMIL or using any player that supports audio and video

Recommended

  • Use SMIL to provide audio description in multiple languages

1.2.4 Captions (Live media) Level AA

Captions are provided for all live audio content in synchronized media.

Compulsory

  • Create captions for live synchronized media and provide open (always visible) captions.
  • Create captions for live synchronized media and closed captions using any readily available media format that has a video player that supports closed captioning.
  • Create captions for live synchronized media and provide closed captions using SMIL.

1.2.5 Audio Description (Prerecorded media) Level AA

Audio description is provided for all prerecorded video content in synchronized media.

Compulsory

  • Provide a second, user-selectable, audio track that includes audio descriptions
  • Providing a version of a movie with audio descriptions using SMIL or using any player that supports audio and video.
  • Provide a movie with extended audio descriptions using SMIL or using any player that supports audio and video.

Recommended

  • Provide audio description in multiple languages in SMIL.
  • Provide audio description for live synchronized media.

1.2.6 Sign Language (Prerecorded media) Level AAA

Sign language interpretation is provided for all prerecorded audio content in synchronized media.

Compulsory

  • Include a sign language interpreter in the video stream
  • Provide a synchronized video of the sign language interpreter that can be displayed in a different viewport or overlaid on the image by the player using SMIL.

Recommended

  • Use metadata to associate sign language alternatives of a video to enable choice of sign language. E.g. provide, in metadata, URI(s) that point to several English sign language translations (ASL, SASL, BSL, Auslan, ISL, NZSL) of a Web page.

1.2.7 Extended Audio Description (Prerecorded media) Level AAA

Where pauses in foreground audio are insufficient to allow audio descriptions to convey the sense of the video, extended audio description is provided for all prerecorded video content in synchronized media.

Compulsory

  • Provide a movie with extended audio descriptions using SMIL or using any player that supports audio and video

Recommended

  • Add extended audio description in multiple languages in SMIL.

1.2.8 Media Alternative (Prerecorded media) Level AAA

An alternative for time-based media is provided for all prerecorded synchronized media and for all prerecorded video-only media.

Compulsory

If the content is prerecorded synchronized media:
  • Place a link to the alternative for time-based media immediately next to the non-text content OR
  • Link to the alternative using the body of the object element
If the content is prerecorded video-only:
  • Provide an alternative for time-based media for video-only content

Recommended

  • Use noembed with embed (HTML)
  • Provide a corrected script
  • Add detail to audio description

Failures

  • Not labeling a synchronized media alternative to text as an alternative

1.2.9 Audio-only (Live media) Level AAA

An alternative for time-based media that presents equivalent information for live audio-only content is provided.

Compulsory

  • Provide a link to a text transcript of a prepared statement or script if the script is followed
  • Provide text based alternatives for live audio-only content
  • Incorporate a live audio captioning service into a Web page

Recommended

  • Use metadata to associate text transcriptions with audio-only conten. E.g. provide, in metadata, URI(s) that point to several text transcripts (English, French, Dutch) of an audio file.

More info


guideline-12-time-based-media

Posted on April 27, 2019 Posted by Victoria Brooks

guideline-11-provide-text-alternatives

Guideline 1.1: Provide text alternatives


Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Text can be rendered in a visual, oral or tactile way. Even by any combination of them. So text information can be presented and manipulated in whatever form best meets the user needs. For example, a blind person can understand a picture if her browsers reads aloud the text alternative. Or a deaf person can understand an audio file if there is a text alternative on the screen.

1.1.1. Non-text Content Level A

All “non-text content” that is presented to the user has a “text alternative” that serves the equivalent purpose

What is non-text content? How to provide alternatives? Here some examples

  • Data charts: Provide a short label (e.g. “Weather records in Spain from 1909 to 2009”); a longer description with a high-level summary of the data, trends and implications (e.g. “Timeline shows the rising of the temperature while the rain is descending. Most remarkable data are…”); and if possible and practical, the data in a table.
  • Audio recordings: Describe the content of the audio inside the link (e.g. “Barack Obama’s speech at the United Nations, May 2009.”), and inmediately after that, provide a link to a text transcript. If there are two or more speakers, identify when is speaking each one, just as applause, laughter, etc.
  • Sound effects: Provide text indicating what it means (e.g. an error fulfilling a form)
  • Animations that illustrate a subject: Make sure that the text alternative provide the full explanation, the animation must be a complement.
  • Live Web-cams: Provide a short text that identify the camera and how often it reloads the image.
  • Photographs and content images: Provide an alternative text that describes them and their context (the old way “alt” and “longdesc” is ok).
  • Thumbnail images with links : Provide an “alt” with the text you should include if no image is given.
  • Image maps : Provide an “alt” for the image, including its interactive purpose (e.g. “Europe Map. Select the country you want to travel”). Each image map area should include an “alt” .
  • Controls or Input fields: Provide a “name” that describes its purpose. (Guideline 4.1)
  • Time-Based Media: Provide text alternatives that describe the non-text content. (Guideline 1.2)

Exceptions for this rule

  • It is very difficult to give equivalent information for live Audio-only and live video-only content, so provide a descriptive label.
  • If the non-text content would be invalid if presented in text, for example a test or exam,  then text alternatives at least provide descriptive identification of the non-text content.
  • If you use a CAPTCHA, different output modes for different types of sensory perception are provided to accommodate different disabilities. For example, provide two or more modalities of CAPTCHAs, a human customer service representative or not requiring CAPTCHAs for authorized users.
  • If you have used a non-text content to create a specific sensory experience, provide a description and it purpose.
  • Decoration, Formatting, Invisible: Although CSS is strongly recommended, you are allowed to use invisible images to format text or smoothing corners. Just implement them in a way that they can be ignored by assistive technology ( “alt=''“).

Compulsory

Short text alternatives
  • Use alt attributes on images used as submit buttons
  • Combine adjacent image and text links for the same resource
  • Use alt attributes on img elements
  • Provide text alternatives on applet elements
  • Use the body of the object element
  • Provide text alternatives for the area elements of image maps
  • Provide text alternatives for ASCII art, emoticons, and leetspeak
  • Provide link text that describes the purpose of a link for anchor elements
  • Use a text alternative on one item within a group of images that describes all items in the group
Long text alternative
  • Use longdesc
  • Use the body of the object element

Recommended

General Techniques for Informative Non-Text Content
  • Identify informative non-text content
  • Keep short descriptions short
  • Describe images that include text
  • Provide 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
  • Provide different sizes for non-text content when it cannot have an equivalent accessible alternative
  • Use server-side scripts to resize images of text
General Techniques for Live Non-Text Content
  • Link to textual information that provides comparable information (e.g., for a traffic Webcam, a municipality could provide a link to the text traffic report.)
HTML Techniques
  • Use noembed with embed
  • Write for browsers that do not support frames
  • Provide alternative content for iframe
  • Provide text and non-text alternatives for object
  • Not using long descriptions for iframe
  • Providing redundant text links for client-side image maps
CSS Techniques
  • Use CSS box rules instead of spacer images for layout design
  • Use CSS background, :before or :after rules for decorative images instead of img elements
  • Display empty table cells
ARIA Techniques
  • Use the ARIA presentation role to indicate elements are purely presentational
Metadata Techniques
  • Use metadata to associate text transcriptions with a video or audio-only content, e.g. providing, in metadata, URI(s) that points to an audio description and a text transcript of a video or audio file

Failures

  • Using alternative text that are not descriptive. E.g. alt=”spacer” , alt=”icon.jpg”, alt=”image2″…
  • Providing a text alternative that is not null for images that should be ignored
  • Omitting the alt-attribute for non-text content used for decorative purposes only in HTML
  • Not updating text alternatives when changes to non-text content occur, e.g. in a date chart.
  • Using CSS to include images that convey important information
  • Using text look-alikes to represent text without providing a text alternative
  • Using ASCII art without a text alternative
  • Omitting the alt attribute on img, area, and input elements of type “image”
  • Providing long descriptions for non-text content that does not present the same information

More info