Skip to navigation content (Press Enter).

WCAG 2.0 AA Compliance

Guideline 1.1

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.

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.

Section 1.1.1

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

This includes various things such as images and other multimedia. 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:

  • 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. This is expanded on Section 4.1.2.

  • 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="">


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