Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

The Principle Explained

People must be able to perceive the content on a Web page. When a person cannot perceive the content, the page is not accessible.

Content may not be perceivable if the Web authors...

• Choose small or hard-to-read fonts.
• Specify colours for fonts that are similar to the colour of the background.
• Leave out a description of a photograph. Without a text alternative, people who surf the Internet with a screen reader will not be able to tell what is in the photograph.

"User interface components" are objects that people interact with to perform tasks. Familiar examples on Web pages include:

• Hypertext links (or "links")
• Checkboxes, and
• Buttons.

On many on-line forms, there is a "Submit" button and a "Cancel" button. Some buttons may be graphical, and require alternative text. If a Web content author forgets to write alternative text for these buttons, screen reader users will not be able to tell which button is which. Unless an author specifies the alternative text for each button on a Web page, the buttons may not be perceived by screen reader users.

Most people perceive Web content through sight and sound. When content is communicated exclusively through one sense, some people will not be able to perceive it.

For example, a person who has a slow internet connection may set their browser to hide images. Web pages load faster when images are not displayed. Images contain more data than text, so take longer to download. If Web content authors give each photograph a text alternative, photographs can be perceived by people who choose to not display images. Similarly, a photograph with a text alternative is accessible to people who are blind.

Perceptual barriers occur when information is communicated entirely through one of:

• Sight
• Sound
• Colour
• Size

Perceptual barriers also occur when information is updated too quickly for people to read.

Reasons for Principle 1

Guideline 1.1 Text Alternatives

Why do I always need alternatives to images in my Web site?

If a Web site has photographs, artwork, drawings, and other graphic elements, adding text alternatives is an easy way to make the site accessible to people with certain disabilities. In addition, text alternatives benefit people who use text-based browsers and who have slow internet connections. Finally, text alternatives make it possible to search the Web for images.

1. Many people who are blind use a screen reader to access computers. But screen reading programs only understand text; they cannot interpret images. By writing a description for each image on a web page, screen reader users gain access to the images. In most cases, the description need not be elaborate. The text alternative for a photograph of a sunset can be as simple as "sunset on Georgian Bay." The text alternative for a reproduction of a Picasso painting might be, "painting of an old man with a guitar, by Pablo Picasso."
2. Text-based browsers do not display images. By providing text alternatives, people who use text-based browsers will see the descriptions displayed in place of the images.
3. Similarly, people with slow Internet connections sometimes set their browser to not display images. (Web pages load faster when images are not displayed.) By providing text alternatives, users will see the descriptions displayed in place of the images.
4. When search engines "crawl" Web sites to catalogue their content, they cannot determine what is contained in images. Search engines only "understand" text. By including text alternatives, search engines are able to catalogue images, which makes the images searchable.

Guideline 1.2 Time-based Media

Why do I need to include alternatives for "time-based media" (multimedia)?

If a Web site includes a multimedia presentation like a movie or video, some people will be unable to perceive — or have difficulty perceiving — the visuals, the audio, or both. By providing alternatives, web content authors improve accessibility for a wide range of individuals with and without disabilities:

1. Individuals who have trouble understanding the visual track include people with visual impairments, certain cognitive disabilities, language disabilities, and learning disabilities. Text alternatives make the multimedia presentation accessible to these people.
2. Individuals who have trouble understanding the audio track include people who are hard of hearing and deaf; or have certain cognitive, language, and learning disabilities. Text alternatives and captioning are the two most common ways to enhance accessibility for people who have trouble processing the audio portion of a multimedia presentation.
3. People who are deaf and blind may have trouble (or be unable to) understand the visual track, the audio track, or both. A special type of text alternative, the alternative for time-based media can make multimedia accessible to people who are deaf and blind.
4. Second language learners benefit from text alternatives, especially those who understand a second language better when they read it rather than listen to it.
5. Some people are "visual learners" — they are "wired" to understand best by looking rather than by hearing or doing. Others are "auditory learners" — they learn best by listening rather than seeing or doing. Text alternatives help them all get the most from a multimedia presentation.
6. Text alternatives and captions are convenient. For example, a captioned video can be understood in a noisy environment (like a bar), or in a quiet environment (like a bedroom where one person is sleeping while the other is watching a movie.)
7. Text alternatives make multimedia searchable. When search engines "crawl" Web sites to catalogue their content, they cannot "read" movies and videos. Search engines only deal with text. By including text alternatives, search engines are able to catalogue multimedia presentations, which means they can be found by searching.

Guideline 1.3 Adaptable

Why should I make it possible to present content in different ways?

People need choices in how they use computers. One of the advantages of electronic over paper documents is flexibility. It is — or should be — easy to substitute one font for another, or change colours, line-spacing, margins, and dozens of other formatting characteristics. By following a handful of guidelines, Web content authors make it easy for users to adjust the appearance and organization of Web pages to suit their individual need. For example:

1. An individual with low-vision can read many Web pages when the font is yellow, 400% larger than normal, and displayed on a black background. If Web content authors follow the guidelines, the person can substitute a custom style sheet to display pages in the desired format.
2. A screen reader user accesses an on-line article about Canadian weather. The content includes a data table that shows the number of hours of sunshine per year for every provincial capital. The user can navigate from cell to cell in the table; be certain which cells contain header information and which cells contain data; and determine, for example, that Winnipeg receives an average of 2,372 hours of sunshine per year.
3. A lawyer accesses the Internet from a web-enabled cellphone. Despite the small screen, she can easily read the content on a law library site that conforms to WCAG 2.0 guidelines.

Guideline 1.4 Distinguishable

Why is it important to help users to distinguish foreground from background information?

The ability to distinguish foreground from background information is a cornerstone of accessibility, and applies equally for visual and auditory presentations. Following Guideline 1.4 makes it easier for people with visual and/or hearing disabilities to perceive Web content, but pays dividends in improved usability for everybody.

1. As many as 8% of males have red-green colour blindness (difficulty or inability to distinguish red from green). If a Web site uses these two colours as the only way to differentiate information, people with this common form of colour blindness will not be able to tell them apart.
2. Choosing contrasting colours improves usability for everybody. Light grey text on a dark grey background is never a good idea.
3. Background sounds may hinder access for people who use screen readers and people who are easily distracted. Web content authors are free to include background sounds, but it is preferable to give users the option to turn them on rather than starting them automatically. People who repeatedly visit a site appreciate not having to hear the same music each time they visit.

Guidelines

Guideline 1.1 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.

1.1 Level A

• 1.1.1 Non-Text Content 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 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.

  The best way to make photographs, images, and other non-text content accessible is to provide text alternatives.

  Text alternatives are easily "translated" into forms that individuals, whatever their needs, can understand. For example, a person who is blind can listen to text alternatives for photographs. A person who is deaf can read the text alternative, or a transcript, for a podcast.

  In the future, there will be technologies that translate text alternatives into other languages, sign language, or a simpler form of the same language.

  The only times text alternatives are not required is when the non-text content is:

  1. Purely decorative
  2. Used only for visual formatting
  3. Not presented to users
  4. A test or exercise. It is acceptable to leave out text alternatives that "give away" answers. For example, in an on-line examination to identify artists based on reproductions of their paintings, "Pablo Picasso" should not be used as the text alternative for his painting. (But it would be appropriate to describe the painting: "An old man with a white beard holding a guitar. Painted mostly in shades of blue.")

Additional Resources

For additional information see:

• Understanding Guideline 1.1: Text Alternatives
• Understanding Guideline 1.1.1: Non-text Content

Guideline 1.2 Time-based Media

Provide alternatives for time-based media.

1.2 Level A

• 1.2.1 Audio-only and Video-only (Prerecorded): 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:

  This requirement increases the accessibility of information conveyed through recordings, movies, and animations.

  What is meant by "prerecorded audio-only content" and "prerecorded video-only content?"

  Examples of "prerecorded audio-only content:"

  • An audio recording of a speech
  • An audio recording of a press conference

  Examples of "prerecorded video-only content:"

  • A silent film
  • An animation that is part of a tutorial illustrating the structure of an atom

  This requirement is met by adding text alternatives to the content. Text alternatives make information more accessible because text can be "translated" into other forms. For example, a transcript of a speech can be read by someone who is deaf. An audio track for a silent film that describes the action can be accessed by someone who is blind.

  Sometimes, providing text alternatives for prerecorded audio and video is easy. For a tutorial that features an animation of the structure of the atom, the tutorial text already provides detailed explanations. The text alternative for the animation only need include a brief description of the animation, and refer to the tutorial text for more information.

• 1.2.2 Captions (Prerecorded): 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.

  People who are deaf or hard of hearing can watch synchronized media presentations by reading captions. Captions are an alternative to the audio track.

  Captions identify who is speaking and what they are saying, plus other information conveyed through sound effects, music, and other sounds.

  Captions for synchronized media are not needed when the same content is conveyed through text and the media functions exclusively as an alternative to the text. In other words, if a Web page contains a synchronized media presentation, and the text on the page conveys the same information, then the synchronized media presentation does not need to be captioned

• 1.2.3 Audio Description or Media Alternative (Prerecorded): 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.

  Ensure that visual information in a multimedia presentation is accessible to people who are blind or visually impaired.

  There are two ways to do this:

  1. Create an audio description. The audio description supplements the existing soundtrack. During pauses in the dialog, a voice describes characters, actions, scene changes, and on-screen texts that are important but absent from the soundtrack.

  Example of a training video with audio descriptions

  Narrator: A title appears: "The Art and Romance of the Cheese Quiche." In the middle of a table set for two is a steaming quiche and two crystal glasses half-filled with white wine.
  Bruce: "Today's recipe: Cheese quiche — a savory cooked egg pie."
  Narrator: Bruce Bordeaux, the Executive Chef at Chez Paris, stands in his kitchen at home.
  Bruce: "We start by gathering the equipment and ingredients we will need."
  Narrator: Bruce steps into the pantry, and takes a mixing bowl and measuring cup from the shelf.

  2. Prepare a text version of all information — visual and auditory — in the synchronized media. This text alternative provides a running description of all that is happening in the synchronized media content, and reads something like a screenplay or book. The text alternative can contain photographs and other images, provided that they also have text alternatives.

  Example of a text alternative for a training video that has no pauses in the dialog

  A kitchen appliance manufacturer produces an instructional video on how to use its new food processor, and posts it on the company Web site. The video shows a fast-talking chef demonstrating product features. There are no gaps in the dialog, so no places for audio descriptions. To make this video accessible, the company creates a text alternative that describes all of the features that the chef demonstrates, and posts it next to the video on the company Web site.

1.2 Level AA

• 1.2.4 Captions (Live): Captions are provided for all live audio content in synchronized media.

  People who are deaf or hard of hearing can watch real-time presentations by reading captions.

  Captions identify who is speaking and what they are saying, plus other information conveyed through sound effects, music, and other sounds.

  At present, human transcribers type the captions for real-time presentations. In the future, speech recognition technology may make it possible to automatically generate captions in real-time.

• 1.2.5 Audio Description (Prerecorded): Audio description is provided for all prerecorded video content in synchronized media.

  This is a slightly more stringent version of 1.2.3, which gives authors the option to provide an audio description or a full text alternative in a synchronized media presentation. If authors do one or the other, they are conforming at Level A.

  1.2.5 tells authors how to conform at Level AA: they must provide an audio description, a requirement already met if they chose that alternative for 1.2.3.

  To conform to Level AAA, authors must include an extended audio description. This is covered in 1.2.7.

  No audio description is necessary if all video track information is already provided in the audio track.

1.2 Level AAA

• 1.2.6 Sign Language (Prerecorded): Sign language interpretation is provided for all prerecorded audio content in synchronized media.

  Sign language allows people who are deaf or hard of hearing to understand the audio track of a synchronized media presentation.

  Sign languages are very rich, and convey shades of meanings that are not captured in captions. For this reason, sign language interpretation of synchronized media is considered more equivalent than access via captions.

  Example: A university makes a video of a visiting professor talking to students and faculty, and decides to post it on-line. There was no sign language interpreter during the original lecture. Afterwards, the university produces a second video of a sign language interpreter interpreting the professor's talk, and "splices" the second video into the corner of the original video.

  Some people who are deaf or hard of hearing are not as fluent in written language as they are in sign language. Conversely, not everybody who is deaf or hard of hearing understands sign language. For this reason, access to synchronized media content is improved by providing sign language as well as captions.

• 1.2.7 Extended Audio Description (Prerecorded): 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.

  This is similar to 1.2.5, which states that authors include audio descriptions in synchronized media presentations. Sometimes there are no (or insufficient) pauses to allow audio descriptions. In these cases, provide extended audio descriptions to convey the sense of the video.

  Extended audio descriptions are done by freezing the presentation at key moments, and playing additional audio material. The synchronized media presentation is then resumed.

  Because extended audio descriptions may disrupt viewing for those who do not need them, make it possible to turn the feature on and off. Alternately, two versions of a presentation, one with extended descriptions and the other without, can be provided.

  Example: An art school owns a film of an influential artist describing her approach, and digitizes the film for posting on-line. She speaks rapidly, with few pauses. As she talks, she rapidly draws shapes on a flipchart. After completing each sketch, she flips the flipchart and starts a new drawing, talking all the while.

  To make extended audio descriptions, the video is paused after she completes each drawing, and a narrator describes it and her gestures. The video then resumes.

• 1.2.8 Media Alternative (Prerecorded): An alternative for time-based media is provided for all prerecorded synchronized media and for all prerecorded video-only media.

  An "alternative for time-based media" is a method for making audio-visual materials accessible to people who do not see well enough to read captions, and who do not hear well enough to listen to dialog and audio descriptions.

  To create an alternative for time-based media, describe (in writing) all information in the synchronized media (both visual and auditory). This text is the "alternative for text-based media." It reads something like a book: a running description of everything that happens.

  The alternative for text-based media contains a transcript of all dialog; descriptions of all visual information (e.g., scene changes, actions, and facial expressions); and descriptions of all non-speech sounds (e.g., laughter, off-screen voices, and background music).

  If the presentation requires user interaction (e.g., buttons labeled "Go to next lesson" at the end of every section), include hypertext links to provide the same functionality.

  These techniques make it possible for people who are deaf-blind to access time-based media using a refreshable braille display.

• 1.2.9 Audio-only (Live): An alternative for time-based media that presents equivalent information for live audio-only content is provided.

  To make live events (such as video conferencing, speeches, and radio Webcasts) accessible to people who are deaf or hard of hearing, use text alternatives.

  The best text alternative is live text captioning. A trained human operator listens to what is being said and types a verbatim transcript in real-time. The operator also adds non-spoken details, such as laughter and applause, that are essential to understanding what is happening.

  If an event follows a script, a transcript prepared in advance is a possibility. However, live captioning is preferred because the operator's transcript plays out in real-time, and the operator can adapt when deviations from the script occur.

Additional Resources

For additional information see:

• Understanding Guideline 1.2: Time-Based Media
• Understanding Guideline 1.2.1: Audio-only and Video-only (Prerecorded)
• Understanding Guideline 1.2.2: Captions (Prerecorded)
• Understanding Guideline 1.2.3: Audio Description or Media Alternative (Prerecorded)
• Understanding Guideline 1.2.4: Captions (Live)
• Understanding Guideline 1.2.5: Audio Description (Prerecorded)
• Understanding Guideline 1.2.6: Sign Language (Prerecorded)
• Understanding Guideline 1.2.7: Extended Audio Description (Prerecorded)
• Understanding Guideline 1.2.8: Media Alternative (Prerecorded)
• Understanding Guideline 1.2.9: Audio-only (Live)

Guideline 1.3 Adaptable

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

1.3 Level A

• 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

  If you look "under the hood" of a Web page, you will find a document that consists of all the words that appear on the page - the "content" - thickly interspersed with words, non-words, numbers, and symbols - the "code." The code describes how the content should be formatted, and what purpose it serves. For example, you might find something like this on a recipe Web site:

  <h1>Recipes for Whole Wheat Bread</h1>

  The pair <h1> and </h1> that surrounds "Recipes for Whole Wheat Bread" means that the phrase appears larger and bolder than the text that surrounds it; and the phrase is the most important heading on the page.

  1.3.1 requires Web content authors to use the right code. When they do, browsers and assistive technologies automatically "understand" how content relates to other content on the page. (This is what is meant by "programmatically determined.") For example:

  • On a form with two fields, "Name" and "Email address," using the correct code ensures that browsers and assistive technologies "know" that the first field contains the name, and the second field contains the email address.
  • In a table that displays the population of Canadian provinces, using the correct code ensures that browsers and assistive technologies associate the cell that says "11.4 million" with "Ontario;" and the cell that says "3.3 million" with "Alberta."
• 1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

  There must be a meaningful order to the content of a Web page. For example, when looking up the address for a company, we would expect to find information in this order:

  ABC Company
  123 Main Street
  Suite 456
  Toronto
  Ontario
  M7N 8X9

  We might become confused if the information appeared in this order:

  ABC Company
  Toronto
  123 Main Street
  Ontario
  Suite 456
  M7N 8X9

  Yet this is the presentation order to a screen reader user if the Web content author used this layout table to format the address in two columns:

  ABC Company	Toronto
  123 Main Street	Ontario
  Suite 456	M7N 8X9

  Sometimes content can be presented in any order without compromising comprehensibility. For example:

  • If an on-line magazine article contains a sidebar, it usually does not matter whether a person reads the article first or the sidebar first.
  • If CSS is used to position a main navigation bar, the content, and a secondary navigation bar, understanding the page does not depend on the order of the sections.
• 1.3.3 Sensory Characteristics: 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. Note: For requirements related to colour, refer to Guideline 1.4.

  Some users with disabilities cannot perceive shape, position, colour, or location due to the nature of the assistive technologies they use.

  For example: There are three buttons at the bottom of a survey form. The instructions read, "Click the brown button to exit the survey without saving. Click the square button to save in-progress survey results. Click the large button to submit your results." A screen reader user cannot determine which button is brown, square, or large.

  When including instructions that describe how to act on the content of a Web page, do not state the instructions exclusively in terms of a single sensory characteristic. Instead, provide additional or alternate descriptions.

  The form in the example can be made accessible by labeling the brown button "Exit without saving;" the square button "Save partial results;" and the large button "Submit your results."

Additional Resources

For additional information see:

• Understanding Guideline 1.3: Adaptable
• Understanding Guideline 1.3.1: Info and Relationships
• Understanding Guideline 1.3.2: Meaningful Sequence
• Understanding Guideline 1.3.3: Sensory Characteristics

Guideline 1.4 Distinguishable

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

1.4 Level A

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

  Colour is an important aspect of Web content design. But information communicated exclusively through colour may not be accessible to users who are blind, have low-vision or colourblindness, or use black and white instead of colour displays. Furthermore, some older users may not be able to distinguish certain colours. (As people age, they tend to see colours less well.)

  Examples of information conveyed by colour only:

  • Using yellow highlighting on a form field to indicate that it is a mandatory field
  • Displaying error messages in red
  • Using a chart that shows this year's results in blue, and last year's results in green.

  Examples of indications of an action conveyed by colour only:

  • Using orange links to indicate that they will open a new browser window
  • Changing the font colour from black to grey to indicate that a database was updated.

  An example of prompting a response:

  • Using highlighting on form fields to indicate that a mandatory field was left blank.

  The key to removing these kinds of barriers is to provide redundant information. In other words, information conveyed via colour should be communicated in another way, as well. For example, on a form, use yellow highlighting and text to indicate mandatory fields. Instructions at the top of the form explain that required fields are yellow; and an icon adjacent to the field has a text alternative that says, "Mandatory."

• 1.4.2 Audio Control: 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.

  Provide a mechanism to turn off background sounds when the sounds play for longer than three seconds. An example of a background sound is a musical track that plays when a Web page loads.

  This requirement improves accessibility for three groups:

  1. People who are not interested in the background sounds.
  2. People who are easily distracted by non-essential, background sounds.
  3. People who use screen readers, who may find it hard to hear speech output when other sounds are playing.

  Automatically starting a soundtrack when a page loads may affect a screen reader user's ability to find the mechanism to stop it. It is preferable that the sound be started by an action initiated by the user after they reach the page, rather than requiring that the sound be stopped by an action after the user lands on the page.

1.4 Level AA

• 1.4.3 Contrast (Minimum): 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.

  People with low-vision may have difficulty reading when the colour of the text does not contrast sufficiently with the colour of the background. Having colourblindness lowers the contrast even further.

  Ensuring minimum contrast ratios between text and background increases the legibility of text for individuals who do not see the full range of colours. The contrast ratios also work for individuals who see no colour, and for the many older people who have reduced visual acuity.

  The specified contrast ratios are:

  • Fonts that are 18 points or larger: 3:1
  • Fonts that are 14 point bold or larger: 3:1
  • All other text and images of text: 4.5:1

  Many easy-to-use software tools that measure colour contrasts are freely available.

  By meeting this requirement, authors achieve Conformance Level AA. To achieve Level AAA, the minimum contrast ratios are higher. See 1.4.6.

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

  Ensure that text-size can be doubled without losing the ability to read and interact with a Web-page. Many people with mild visual disabilities can read double-sized characters without screen magnifier software. Although these users may benefit from the ability to increase the size of images, the ability to increase text size is most critical.

  Most browsers have a zoom feature for "scaling" (i.e., increasing and decreasing) the text size. The author's responsibility is to create Web content that does not prevent the browser from doing this.

  A simple way to test this requirement is to view a page in a browser with its zoom level set to the default; zoom to 200%; and check whether all content and functionality is available.

  Authors can support scaling beyond 200%, but pages may be difficult to read and interact with. Common problems include text that overlaps other content; words that are truncated because they are too wide to fit the space available to them; and pages that must be scrolled horizontally to read.

• 1.4.5 Images of Text: 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. Note: Logotypes (text that is part of a logo or brand name) are considered essential.

  As much as possible, use text rather than images to convey information. It is OK to use images of text if text cannot be formatted to achieve a desired effect, or an effect cannot be rendered in most browsers.

  This should not be understood as a requirement for text-only pages. Rather, it is a requirement to give preference to text unless there is good reason not to. For example, instead of using images of words as document headings, use styled <h1>, <h2>, etc. to achieve the same formatting effect. On the other hand, it is acceptable to use images of text for corporate logos, reproductions of historic letters, and samples of non-standard fonts — provided the images have text alternatives.

  By meeting this requirement, authors achieve Conformance Level AA. It applies to visual presentations that can be achieved with the technologies that the author uses. To achieve Level AAA, the requirement applies to visual presentations that the user controls. See 1.4.9.

1.4 Level AAA

• 1.4.6 Contrast (Enhanced): 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.

  This requirement is similar to 1.4.3, which sets minimum contrast levels to achieve Conformance Level AA. Here, authors can achieve Level AAA by using higher minimum contrast ratios.

  People with low-vision may have difficulty reading when the colour of the text does not contrast sufficiently with the colour of the background. Having colourblindness lowers the contrast even further.

  Ensuring minimum contrast ratios between text and background increases the legibility of text for individuals who do not see the full range of colours. The contrast ratios also work for individuals who see no colour, and for the many older people who have reduced visual acuity.

  The specified contrast ratios are:

  • Fonts that are 18 points or larger: 4.5:1
  • Fonts that are 14 point bold or larger: 4.5:1
  • All other text and images of text: 7:1

  Many easy-to-use software tools that measure colour contrasts are freely available.

  Exemptions to this requirement include corporate logos, and incidental text (e.g., photographs of street signs).

• 1.4.7 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.Note: Per the definition of "decibel," background sound that meets this requirement will be approximately four times quieter than the foreground speech content.

  People who are hard of hearing often have difficulty distinguishing speech from background sound. When prerecorded audio content is primarily speech, background sounds must be quiet enough that a user who is hard of hearing can differentiate speech from background sounds.

  When the audio track contains background sounds, they must be at least 20 decibels lower than the foreground speech content. It is acceptable if occasional sounds are louder, provided they last less than two seconds.

• 1.4.8 Visual Presentation: 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.

  Format blocks of text in ways that make it easy for people with low-vision, cognitive, language, and learning disabilities to read text and control the appearance of a page:

  • Limit the line length to 80 characters
  • Left-justify or right-justify paragraphs, but do not use full-justification (i.e., text that is aligned to both the left and right margins)
  • For paragraphs, set line-spacing to 1.5 or more
  • For documents consisting of several paragraphs, set the spacing between paragraphs to at least 1.5 times larger than the line-spacing
  • When using a desktop or laptop computer with the browser window maximized, ensure that text size can be increased by 200 percent without the need to scroll horizontally to read lines of text.
• 1.4.9 Images of Text (No Exception): Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed. Note : Logotypes (text that is part of a logo or brand name) are considered essential.

  This is a more stringent version of 1.4.5, which applies to visual presentations that can be achieved with the technologies that the author uses. Here, the requirement applies to visual presentations that the user controls.

  As much as possible, use text rather than images to convey information. If text cannot be formatted to achieve a desired effect, or an effect cannot be rendered in most browsers, use images of text.

  This should not be understood as a requirement for text-only pages. Rather, it is a requirement to give preference to text unless there is good reason not to. For example, instead of using images of words as document headings, use styled <h1>, <h2>, etc. to achieve the same formatting effect. On the other hand, it is acceptable to use images of text for corporate logos, reproductions of historic letters, and samples of non-standard fonts — provided the images have text alternatives.

  By using text instead of images, people with visual impairments are better able to control the presentation of text to meet their needs. An individual with low-vision may, for example, change the font, font size, foreground and background colours, line spacing, paragraph alignment, and so on.

Additional Resources

For additional information see:

• Understanding Guideline 1.4: Distinguishable
• Understanding Guideline 1.4.1: Use of Color
• Understanding Guideline 1.4.2: Audio Control
• Understanding Guideline 1.4.3: Contrast (Minimum)
• Understanding Guideline 1.4.4: Resize text
• Understanding Guideline 1.4.5: Images of Text
• Understanding Guideline 1.4.6: Contrast (Enhanced)
• Understanding Guideline 1.4.7: Low or No Background Audio
• Understanding Guideline 1.4.8: Visual Presentation
• Understanding Guideline 1.4.9: Images of Text (No Exception)

Experiencing Barriers

The Flash simulation below is intended to demonstrate accessibility problems for people who do not normally experience barriers. For those using assistive technologies, you may find the simulation somewhat inaccessible. This is unavoidable for purposes of demonstrating barriers.

This simulation demonstrates the following barriers:

• Missing Alt text for images
• Insufficient foreground and background contrast.
• Using colour alone to represent meaning.
• Removing the underline from links embedded in surrounding text

Understanding Perceptual Barriers

Web content is perceived by most people through two primary senses: seeing and hearing. In any case where Web content requires the use of one of these senses exclusively, the content must be made available in an alternate form. The most common example is of Web content that requires a single sense is an image, which must be perceived with sight. So the image must have an alternative, either audio or textual, so it can be perceived through hearing or touch for those who do not have sight.

Another example is a recorded speech, which can only be perceive by listening, so a transcript is required to make the audio accessible to users who are deaf or hard-of-hearing.

Another example is a video that must be perceived through sight for the visual track and through hearing for the audio track. In this case a transcript or captioning of the audio track is required so people who are deaf or hard-of-hearing can perceive the audio track by reading. Audio description is also required to describe the actions in the video track that can not be perceived through the audio track or the transcript of the audio track. Audio description describes what's going on in the video, and gets inserted in gaps in the audio track, or in some cases stops the video to present extended audio descriptions of the actions in the video. An example of descriptive audio might be "Susan moves across the room and opens the door." Speech in the audio description track should also be added to the captions and to the transcript.

In most cases the alternate form will be text. Text can be transformed into speech using a screen reader or a text-to-speech application, so people who can not see the text can hear it. Text can also be transformed into Braille, so a person who can not see, or perhaps not see or hear the content, can feel it through a piece of hardware called a Refreshable Braille Display.

Below is a list of common situations where content may not be perceivable for some people, and thus would fail an accessibility test. Review the Common Failures below to understand where barriers are created. Then move on to the Success Criteria which describe strategies for removing these barriers, and then go on to the HTML markup strategies in the Sufficient Techniques pages, that put these success criteria into practice.

Common Failures for Guideline 1.1 (Provide Text Alternatives)

1. due to omitting the alt-attribute for non-text content used for decorative purposes only in HTML
2. due to using text look-alikes to represent text without providing a text alternative
3. due to omitting the alt attribute on img elements, area elements, and input elements of type "image"
4. 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.

Common Failures for Guideline 1.2 (Provide Alternatives for Multimedia)

1. due to captions omitting some dialogue or important sound effects
2. by providing synchronized media without captions when the synchronized media presents more information than is presented on the page
3. due to not labeling a synchronized media alternative to text as an alternative

Common Failures for Guideline 1.3 (Present Content in Different Ways)

1. due to using changes in text presentation to convey information without using the appropriate markup or text
2. due to using structural markup in a way that does not represent relationships in the content
3. due to the association of label and user interface controls not being programmatically determinable
4. due to using an HTML layout table that does not make sense when linearized
5. due to identifying content only by its shape or location

Common Failures for Guideline 1.4 (Make Foreground and Background Distinguishable)

1. due to having a text alternative that does not include information that is conveyed by color differences in the image
2. due to creating links that are not visually evident without color vision
3. due to identifying required or error fields using color differences only
4. due to playing a sound longer than 3 seconds where there is no mechanism to turn it off
5. due to specifying foreground colors without specifying background colors or vice versa
6. due to using background images that do not provide sufficient contrast with foreground text (or images of text)
7. when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured
8. when text-based form controls do not resize when visually rendered text is resized up to 200%
9. due to using text that is justified (aligned to both the left and the right margins)

A more detailed list, including less common failures, can be found in How to Meet WCAG 2.0

Success Criteria

Success Criteria are ways of conforming with WCAG guidelines. For each of the common failures described previously, ways of avoiding each barrier are described below. Study the strategies to understand how Web content is made more perceivable, then move on to the Sufficient Techniques that follow to learn about strategies used to author Accessible Web content.

Guideline 1.1Text 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.

Success Criteria for Guideline 1.1 (Text Alternatives)

1. due to omitting the alt attribute for non-text content used for decorative purposes only in HTML

   If an image in Web content is decorative, and serves no purpose other than modifying the visual appearance or aesthetics, it must include an empty alt attribute (alt="") so assistive technologies will ignore the image.

   If Alt is not included with decorative images, assistive technology will normally read the image's file name, which may cause the person listening to wonder if they are missing something. If Alt contains irrelevant text (e.g. alt="spacer"), this text is read aloud by screen readers, potentially interfere with comprehension of relevant surrounding information.

2. due to using text look-alikes to represent text without providing a text alternative

   If an image contains meaningful text, that text must be reproduced in an Alt attribute for the image, so a person who can not see the image receives the same information as a person who can see it. Ideally however, actual text should be used instead of images of text wherever possible. Actual text will be more accessible and adaptable to a broader range of users and technologies than an image will.

   Using images of text should be reserved for presenting word marks, logos, or other instances where the formatting of the text can not be reproduced exactly using style sheet attributes.

3. due to omitting the alt attribute on img elements, area elements, and input elements of type "image"

   Every image must have an Alt attribute that describes the content of the image, or describe it's purpose. The Alt attribute associated with image map areas must describe what will be found if a person follows the link associated with the map area, and the Alt attribute for an image button must describe the function of the button.

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

   If Alt is included with a decorative image, but has a text value such as alt="right corner" to describe an image used to create a round corner, assistive technologies will read that text, which may interfere with comprehension of the meaningful information surrounding the image. The value assigned to the Alt attribute for such images should always be empty.

Success Criteria for Guideline 1.2 (Time-based Media)

Guideline 1.2Time-based Media: Provide alternatives for time-based media.

1. due to captions omitting some dialogue or important sound effects

   All dialogue contained in pre-recorded video, or other pre-recorded multimedia content, must be made available as synchronized captions so those who cannot hear the dialogue can read along. Captions must include all meaningful information contained in the dialogue, all significant sounds contained in the audio track, and describe all significant actions that can not be determined by listening to the audio track alone.

   For example, car horns honking in the background of an interview taking place on a busy street corner might be inserted into a caption as [car horns honk in the background] to give a person who can not hear the horns, information to suggest the dialogue is taking place on a city street.

   Meaningful actions in the video also need to be inserted into the captions, so those who can not see what is happening, or who can not determine what is happening based on what they hear in the dialogue, are made aware of meaningful actions that are occuring. For example, if in addition to the horns honking above, the video shows a person in the background of the video stepping out into oncoming traffic, including [a person behind the interviewer steps into oncoming traffic] would explain why the car horn was honking, and perhaps why the interviewer was distracted momentarily and the dialogue interrupted.

   Descriptions of significant actions in the video must also be included as "Audio Descriptions." Audio descriptions are added to the audio track where gaps in the dialogue occur, to describe what is happening in the video. Using the example above, a narrator might announce "[a person behind the interviewer steps into oncoming traffic] and [car horns honk in the background] ."

   In some cases it may not be possible to describe actions in the video within the gaps of the dialogue. In such cases "Extended Audio Descriptions" should be used, in which case the video pauses momentarily while the narrator describes the actions.

   Static text transcripts of the audio track and actions in the video can also be provided, but they should not replace captions and audio descriptions, but rather provide an alternative to them for those who may not be able to access captions because their media player does not support them, for instance.

   Tools such as Capscribe, Amara, or Magpie, linked below can be used to synchronize captions and audio descriptions with videos, and can be used to learn more about making multimedia content accessible.

   • Amara
   • Magpie
   • Capscribe

2. by providing synchronized media without captions when the synchronized media presents more information than is presented on the page When multimedia content is provided as an alternative for original text content, captions are required if the multimedia content contains more information than that found in the original text. For example, if the text describes 6 steps required to complete a task, and the video demonstrates those 6 steps, but also includes a brief description of additional considerations when completing each step, then the video should be captioned as described in the previous Success Criteria above. If the video provides no additional information beyond that in the text version of the 6 steps, then captioning is not required. In the latter case, the video is an alternative to or an adaptation of text content, while in the former the video is an enhancement containing additional information.
3. due to not labeling a synchronized media alternative to text as an alternative

   When multimedia content is provided as an alternative, or adaptation for original text content, it must be described as an alternative in the surrounding text. In the example in the previous Success Criteria above, the multimedia alternative demonstrating the 6 steps might be labelled as "A multimedia demonstration of the 6 steps described above."

   If the alternative is not labelled as an alternative, a person who can not see or hear all the content, and is unable to access captioning or descriptive audio, may believe they are missing content in the video. While in fact they may not be missing anything, they many be left wondering if they have. The affect here is similar to the affect when a person encounters a decorative image that does not include an empty Alt attribute, as described in the Success Criteria for Guideline 1.1

Success Criteria for Guideline 1.3 (Adaptable)

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

1. due to using changes in text presentation to convey information without using the appropriate markup or text

   Use appropriate structural HTML to markup headings (i.e. h1, h2, h4, ...), and do not use other stylized elements to produce the appearance of headings. For example, do not put page or section headings in HTML paragraph or span tags and use stylesheet attributes to make the text look like a heading.

   Proper HTML headings can be extracted from a Web page by assistive technologies to produce a summary of the content on a page, and creates a way to quickly navigating through sections of a page. Assistive technology users can select a particular heading and jump directly to that section. When non-structural markup is used, the content may still appear structured to sighted users, but to a screen reader user it will appear as one large block of text, and the only means of navigating the text would be from beginning to end, with no opportunity to move around through sections of the page.

2. due to using structural markup in a way that does not represent relationships in the content

   Do not use structural markup to format the visual appearance of text. For example, if large fonts are required to make text easier to read for people with poor vision, do not use HTML heading markup to make the text larger. Instead, use stylesheet formatting to increase the size of paragraph text, or to increase the size of text contained in an HTML span element, or in other HTML block elements.

3. due to the association of label and user interface controls not being programmatically determinable

   Where in the HTML of a Web page labels are not immediately adjacent to their respective form input elements, include an explicit label using the HTML Label element for each form field of type text, checkbox, radio, file, password, textarea or select.

   Where it is not possible to display a label, for example when space is limited, use CSS to hide it, or put the label in the title attribute for the input element.

4. due to using an HTML layout table that does not make sense when linearized

   Current screen readers read tables from top left to bottom right, reading the full content of each cell, reading each row in its entirety before reading the next row. If tables are used to layout content, content must make sense when read in this sequence.

   For example, a two cell table that lays out labels in the left cell, and form fields in the right cell would fail to linearize because all the labels on the left would be read first, then all the form field on the right would be read. Instead, use a 2 column, 5 row table to layout the first label in column 1, row 1, and its input field in column 2, row 1, and the second label in column 1, row 2, and its input field in column 2, row 2, and so on. This layout will linearize correctly, reading label, form field, label, form field, in the sequence they were intended to be presented.

5. due to identifying content only by its shape or location

   When refering to features on a Web page, do not use location alone, or shape alone, to refer to the feature. Screen reader users will have difficulty determining a location on a page, and determining the shape of a feature.

   For example, instead of saying "click the button at the bottom right," say click the button at the bottom right labelled Submit." Instead of saying "click the triangle button to logout of the system," say "click the triangle button labelled Exit to logout of the system."

Success Criteria for Guideline 1.4 (Distinguishable)

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

1. due to having a text alternative that does not include information that is conveyed by color differences in the image

   Where colour is presented in an image to represent particular meaning, provide an alternative to colour that describes the same meaning. People who are blind or colour blind may not be able perceive colour.

   For example, an image of a bar chart may be used to display the value of imports and exports for each year over the past decade. Instead of saying "the red bar represents imports and the blue bar represents exports" say "the red bar on the left for each years represents imports, and the blue bar to the right for each year represents exports."

   While the language used in the latter example may be accessible to colour blind users, for someone who can see neither red or blue nor left and right, the bar chart will remain inaccessible. In this case a properly marked up table that lays out the numeric values displayed in the bar chart, would provide an accessible alternative for blind persons.

2. due to creating links that are not visually evident without color vision

   Identify links by some means other than colour alone. When links are embedded in the surrounding text of a paragraph for instance, and the standard link underline has been removed with CSS, these links will often become invisible to users who can not distinguish between the colour of the text, and the colour of the link. Include the standard underline with links to make them distinguishable. Other strategies can also be used, such as making links bold, or italic, or changing the font face, but underlines are most common, and more likely to be recognized as links.

   Underlining links is less important in places where it is relatively clear that links are present, such as in a content navigation menu, or a site navigation bar.

3. due to identifying required or error fields using color differences only

   When displaying feedback after an error has occurred, use some feature other than colour alone to represent the error. For example, in addition to displaying error messages in red, include an X or the word Error with the message, so those who can not see red will know the message is an error message. When displaying success feedback, use some feature other than colour alone to represent success. In addition to displaying success feedback messages in green, include a checkmark, and/or the word Success so those who can not see green will know the message is success feedback.

4. due to playing a sound longer than 3 seconds where there is no mechanism to turn it off

   Where a Web page plays a sound that lasts 3 seconds or more, provide a way to stop the sound. When sounds continues beyond 3 seconds, they can interfere with verbal output from screen readers, making it difficult for blind users to perceive the content of the page because two audio streams are playing at the same time.

5. due to specifying foreground colors without specifying background colors or vice versa

   When font colours are set, also set a background colour to ensure sufficient contrast between foreground and background or the contrast ratio between the relative luminance of each. When one of either foreground or background are set by an author, and the other is not, it is possible contrast will be lost if a user has set foreground and background preferences in their Web browser (or User Agent ). For example, if an author forces the background colour to white, but does not set the foreground to black, or some other contrasting colour, the text on the screen may not be visible to a person whose preference is white font on a black background. In such a case the white background set by the author, and the white font set by the user, would cause the white text to disappear into the white background.

   A number of tools are available for measuring contrast between foreground and background colours. See:

   • AccessColor
   • Contrast Analyser
   • Accessibility Color Wheel
6. due to using background images that do not provide sufficient contrast with foreground text (or images of text)

   Prevent text from appearing over top of a background image that result in loss of contrast. For example, if a photo is used as a background image, perhaps a vista with a blue sky, any blue text that might appear over top of the blue sky in the background would loose its contrast an become unreadable. Care should be taken when using background images in which the colour varies significantly from area to area. What may appear as good contrast on one screen, will fail when viewed on another perhaps smaller screen, which may force content to float or reposition over the background image and become partially or completely unreadable.

7. when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured

   To prevent text, images, and controls from being clipped, truncated, or obscured use relative measure to define their sizes, and the sizes of their containers, rather than using absolute measures. Use relative measures including em, %, and size names (smaller, small, large, larger). Avoid using absolute measures including px, pt, and cm.

   When relative measures are used throughout a Web page, when the page is resized all content on the page will resize at the same rate, so for example when the text increases to 200%, so will the containers the text appears in, such as a div, a paragraph, or a table cell. If absolute measures are used for containers, the text size may increase and be forced to fit inside the same space as the originally sized text, thus making it more difficult to read as the text size increase.

8. when text-based form controls do not resize when visually rendered text is resized up to 200% To ensure form controls resize at the same rate as text, use relative measures to define the sizes of both the text, and the form controls. If text size is defined in % or em, then form button text size should also be defined in % or em. Do not define text in % or em and button text in pt or cm
9. due to using text that is justified (aligned to both the left and the right margins) Justified text can be difficult to read for some readers with print disabilities as a result of the spacing between words being inconsistent. Avoid using markup or styles to justify text. If justified text is required, perhaps for publishing purposes, provide a simple way to turn justification off, such as including a link to switch between stylesheets.

Sufficient Techniques

Sufficient Techniques for Guideline 1.1 (Provide Text Alternatives)

These techniques can be used when inserting decorative images into Web content, to conform with WCAG 2.0 Guideline 1.1.

1.Using the HTML [i]alt[/i] attribute with all images

The HTML alt attribute must be used with all images in Web content, in the img and area elements, and with the input element when it uses the src attribute to render an image as a button.

Example 1: Using Alt Text

// Using alt with meaningful images // Here alt is used to provide a meaningful // description of the content in a photograph // Using alt with meaningless images // Here a decorative image includes an empty alt attribute // to force assistive technologies to ignore it // Using alt with map areas // Here each area in the image map has a corresponding alt attribute // Using alt with images used as buttons // Here type="image" is used to create a login button // so the image requires an alt attribute

2. Using CSS to include decorative images

The objective of this technique is to provide a mechanism to add purely decorative images and images used for visual formatting to Web content without requiring additional markup within the content. This makes it possible for assistive technologies to ignore the non-text content. Some user agents can ignore or turn off CSS at the user's request, so that background images included with CSS simply "disappear" and do not interfere with display settings such as enlarged fonts or high contrast settings.

Background images can be included with the following CSS properties:

• background
• background-image,
• content, combined with the :before and :after pseudo-elements,
• list-style-image.

Note: This technique is not appropriate for any image that conveys information or provides functionality, or for any image primarily intended to create a specific sensory experience.

Example 2: Background Image for an HTML Page

Instead of including an image element (img) to insert decoration in the head area of a Web page, use the CSS background attribute, and associate that attribute with the body element, or a div element.

Example 3: Background images with CSS to create rounded corners on tabs or other elements

The stylesheet for a Web page uses the CSS background property to create rounded corners on elements.

Other Considerations

Making space.

It has been common practice for Web content developers to use spacer images to create margins or create space between objects in a Web page. These are often transparent images, resized using height and width attributes to stretch the invisible image and fill in a particular area. With the advent of style sheets, it is no longer necessary to create space this way. Cascading Style Sheet (CSS) should be used instead. Not only is it easier to use CSS once one knows how, it is more efficient, requiring less bandwidth to send text based CSS than spacer images over the Internet, and makes pages a little quicker to load.

In the following example, both pieces of markup create a 32 pixel indent for the heading. In the second markup example, one em, when viewing a page at 100%, is equal to 16 pixels. Not only will the second piece of markup be more efficient from a bandwidth perspective, it will also resize with the surrounding text if a person uses the browser's text resize function to increase font size to make it more readable, the margin increasing in size at the same rate as the text increases in size.

*Do not use:*

Introduction to Web Accessibility

*Instead use:*

Introduction to Web Accessibility

In the above example, a better way still of creating an indent for the heading, is to define the margin element in a stylesheet either in the head area of the HTML, which can be referenced using either class or id within the H2 element, or in a separate CSS file that gets called into the page using the HTML link element. In the following example code, the style is defined in an embedded stylesheet, and references in the H2 element below. This is just one of many potential means of creating space using CSS styles. See the CSS Reference for more about stylesheets

• CSS Reference

Are you human? Hiding from Spammers.

SPAM robots are constantly roaming through sites to find ways of accessing unprotected mail systems so they can be used to send unsolicited mail, or to hide the origins of SPAM emails.

1. To prevent "SPAMbots" from finding their way into Web sites, a common strategy is to use a CAPTCHA task. This strategy requires a task be completed that can only be accomplished by a human being. Figure 1 below shows a typical CAPTCHA task, in which a user identifies randomly generated letters in an image, and enters those letters into a form field, typically done while registering on a system, or using a Web form that sends email.

   
   Figure 1: A typical CAPTCHA task

   CAPTCHAs can be effective for warding off SPAMbots, but they pose access barriers for some users. A person who is blind for instance would not be able to see the characters in the CAPTCHA image, and thus would be prevented from registering on the system without the help of a sighted person. It's not possible to include a text alternative of the characters in the CAPTCHA image because SPAMbots can easily be programmed to find them. CAPTCHAs are available with audio output to get around this problem, so the blind person can hear the characters in a CAPTCHA image. But this still leaves out deaf blind users, who can not see or hear the CAPTCHA characters. For such cases the site maintainer should provide a means for registrants to contact the site administrator, who can register the person manually.

   A variety of CAPTCHA utilities are available on the Web, that can be copied into a site's forms, and free services are available to generate audio CAPTCHAs:

   • Free CAPTCHA Service

2. Another method of confirming a human, and not a SPAMbot, is registering on a Web site is to have registrants confirm their registration by replying to a message sent to their email address This method avoids accessibility issues associated with CAPTCHA, and can be accessible to deaf blind users. Many Web applications today have email confirmation utilities built into them.

Unit Exercise

After you have studied the content for Principle 1, complete Exercise 1.

Write down one example of what you might judge as a well designed, accessible Web site. A site that is visually appealing to sighted users, but also accessible to those who can't see, have low-vision, and cannot use a mouse. Include a sentence or two describing what the developer has done to enhance the accessibility of the site.

Then, give one example of an inaccessible Web site, with a sentence or two describing why the site is not accessible, or perhaps describing parts of the site that are accessible alongside parts that are not.

You can use AChecker to help identify accessible and inaccessible sites.

AChecker