How to. Mandatory techniques

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

Additional, Advisory Techniques

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 (CSS)
• 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
• Use metadata to associate text transcriptions with 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

How to. Mandatory techniques

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

Additional, Advisory Techniques

• Provide a transcript of a live audio only presentation after the fact
• 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.)

How to. Mandatory techniques

• Providie open (always visible) captions
• Provide closed captions using any readily available media format that has a video player that supports closed captioning
• Provide closed captions using SMIL 1.0 (SMIL) or SMIL 2.0 (SMIL)

Additional, Advisory Techniques

• Provide a note saying “No sound is used in this clip” for video-only clips
• Use SMIL 1.0 or SMIL 2.0 to provide captions for all languages for which there are audio tracks

How to. Mandatory techniques

• 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 (HTML)
• Provide a second, user-selectable, audio track that includes audio descriptions
• Provide a version of a movie with audio descriptions using SMIL 1.0 or SMIL 2.0 or using any player that supports audio and video
• Provide a movie with extended audio descriptions using SMIL 1.0 or SMIL 2.0 or using any player that supports audio and video

Additional, Advisory Techniques

• Use SMIL 1.0 or SMIL 2.0 to provide audio description in multiple languages

How to. Mandatory techniques

• 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.0 or SMIL 2.0

How to. Mandatory techniques

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

Additional, Advisory Techniques

• Provide audio description in multiple languages in SMIL 1.0 or SMIL 2.0
• Provide audio description for live synchronized media

How to. Mandatory techniques

• 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 1.0 or SMIL 2.0

Additional, Advisory Techniques

• 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.

How to. Mandatory techniques

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

Additional, Advisory Techniques

• Add extended audio description in multiple languages in SMIL 1.0 or SMIL 2.0

How to. Mandatory techniques

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 (HTML)

Situation B: If the content is prerecorded video-only:

• Provide an alternative for time-based media for video-only content

Additional, Advisory Techniques

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

How to. Mandatory techniques

• 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

Additional, Advisory Techniques

• 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.

How to. Mandatory techniques

Situation A: 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 (HTML)
• 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 (HTML)
  • h1-h6 to identify headings (HTML)
  • functions of the Document Object Model (DOM) to add content to a page (Scripting)

  Tables

  • table markup to present tabular information (HTML)
  • caption elements to associate data table captions with data tables (HTML)
  • the scope attribute to associate header cells and data cells in data tables (HTML)
  • the summary attribute of the table element to give an overview of data tables (HTML)
  • id and headers attributes to associate data cells with header cells in data tables (HTML)

  Forms

  • label elements to associate text labels with form controls (HTML)
  • the title attribute to identify form controls when the label element cannot be used (HTML)
  • a description for groups of form controls using fieldset and legend elements (HTML)
  • OPTGROUP to group OPTION elements inside a SELECT (HTML)

Situation B: 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 (TXT)

Additional, Advisory Techniques

• 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 (ARIA)
• 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

How to. Mandatory techniques

• 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 (HTML)
  • Using the dir attribute on an inline element to resolve problems with nested directional runs (HTML)
  • Positioning content based on structural markup (CSS)
  • Using CSS letter-spacing to control spacing within a word (CSS)
• Make the DOM order match the visual order (CSS)

Additional, Advisory Techniques

• 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

How to. Mandatory techniques

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

Additional, Advisory Techniques

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

How to. Mandatory techniques

Situation A: 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

Situation B: If 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

Additional, Advisory Techniques

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

How to. Mandatory techniques

Situation A: text is less than 18 point if not bold and less than 14 point if bold

• Ensure that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
• Don’t specify background color, nor text color, and don’t use technology features that change those defaults
• Provide a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast

Situation B: text is as least 18 point if not bold and at least 14 point if bold

• Ensure that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text
• Don’t specify background color, nor text color, and don’t use technology features that change those defaults
• Provide a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast

Additional, Advisory Techniques

• 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

How to. Mandatory techniques

Situation A: text is less than 18 point if not bold and less than 14 point if bold

• Ensure that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text
• Don’t specify background color, not specifying text color, and not using technology features that change those defaults
• Provide a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast

Situation B: text is as least 18 point if not bold and at least 14 point if bold

• Ensure that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
• Don’t specify background color, not specifying text color, and not using technology features that change those defaults
• Provide a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast

Additional, Advisory Techniques

• 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
• Using 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

How to. Mandatory techniques

• 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

Additional, Advisory Techniques

• 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

How to. Mandatory techniques

Ensure foreground and background colors can be selected by the user

Choose one of the following:

• 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 (CSS)
• Specify borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors (CSS)
• 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)

Choose one of the following:

• 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)

Choose one of the following:

• Specify alignment either to the left OR right in CSS (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

Choose one of the following:

• 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

Choose one of the following:

• 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

Additional, Advisory Techniques

• Use a hover effect to highlight a paragraph, list items, or table cells (HTML, CSS)
• Present text in sans serif font or providing a mechanism to achieve this (CSS)
• 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

How to. Mandatory techniques

• 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

Additional, Advisory Techniques

• Identify informative non-text content
• 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

How to. Mandatory techniques

• 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

Additional, Advisory Techniques

• 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

How to. Mandatory techniques

• 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

Additional, Advisory Techniques

• 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

How to. Mandatory techniques

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

Additional, Advisory Techniques

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