Skip to navigation content (Press Enter).

Perceivable Guidelines

Lesson 1 of Section 3

By this point, you've learned all the content necessary for both Administrators and Web Contributors. If this is the extent of your responsibilities, you may stop here. If you are also responsible for designing and publishing web pages to the Internet, you will need to continue and learn about the various guidelines that help you design a more accessible website.

Text Alternatives

No matter how your web page is designed, there will always be one format that will always be easily interpreted by screen readers and other assistive technologies: text. Simple text provided in the HTML document will always be comprehensible as long as the format is correct and associated correctly with the potentially inaccessible content. This is why the following Perceivable Guideline was created:

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.

The following section is related to the guideline:

All non-text content on your webpage must have a text equivalent.

This is required of all webpages. There is only one section under this guideline, as follows. It is recommended that you refer to the WCAG Success Criterion 1.1.1 since this knowledge is needed to comprehend the rest of WCAG. Look through all of the sufficient techniques and common failures to obtain an idea of what to do and what to not do.

This guideline is a fundamental attribute to the WCAG 2.0 standards and expands into several other guidelines. WCAG provides certain cases where you must describe non-textual elements in a particular way:

  • Images: You must provide an alternative text description for images that convey meaning to the webpage.

    This includes portraits of people, diagrams, and images that provide information to the user. This alternative text must be descriptive enough to provide the same informative experience that a regular user does. Simply using alternative text like "picture of a man" is much less useful than saying "Prime Minister Stephen Harper."

    This is the most common mistake of web accessibility! Don't miss it!

  • Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose.

    This means if you are using a form element or anything that requires user input/interaction, you should use something like the following:

    <label for="first-name">Enter your name here: </label>
        <input name="first-name" id="first-name" />

    This allows a screenreader or other various assistive technologies to notify the user that they should enter their first name in this field. You should note that the value of the for attribute matches the value of the id attribute; without this relationship, the input field will remain unlabeled.

    Other ways of achieving this result is the use of the title attribute in the actual element.

  • Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. See Guideline 1.2 for more information on this.

    What is time-based media? Media that does not remain the same over time. Examples are music, video (without audio), audio-video, and interactive audio-video components (like a Flash based game).

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

    Consider a mathematical equation like the one below. While this image provides a proper mathematical example, a text alternative is needed so those who are visually impaired may be able to answer the question.

    Prove this summation is correct: 
    Math Equation

    This is achieved with the following code (note how the title attribute is used to describe the question):

    Prove this summation is correct: <br />
    <img src="img/testexample.png" title="The summation of i from 1 through n which is equal to n squared plus n all divided entirely by 2." alt="Math Equation" />
  • Sensory: If non-text content has the primary intention of providing a specific sensory experience (performance of a flute solo, works of visual art, etc.), then the text alternative at least provides a description of this content.

  • CAPTCHA: CAPTCHA is mainly used to test whether a web user is a computer or a human. While this is a great way to prevent spam and overloaded scripts, you must ensure that multiple tests are available for different human senses, and that the CAPTCHA image indicates its purpose using a label or title attribute. A great widget to use is the reCAPTCHA Script by Google since it provides an auditory alternative.

  • Decoration, Formatting, Invisible: If the non-text content is pure decoration, then it's implemented so that assistive technologies can ignore it. For example, an image of a decorative border or ruler may be used in a page but you must ensure that you use no unnecessary text in the alt attribute of the tag:

    <img src="images/border.png" alt="">

Test your knowledge!

Take the test or continue to the next lesson.


Service Bulletins

  • MAC ID Password Expiry

    Beginning in May 2016, MAC ID passwords at McMaster expire annually. Learn more at

Service Desk

Client Self Service:
Hours: Monday - Friday
8:30 am - 4:30 pm
Phone: 905-525-9140 x24357 (2HELP)
Location: Main Campus BSB Rm. 245
Service Catalogue:

Great Idea Site

Great Idea