• McMaster
  • McMaster A-Z Index
• Academics
  • Undergraduate Studies/Programs
  • Graduate Studies/Programs
  • Part-Time Studies & Continuing Education
  • Departments & Faculties
• Alumni
  • About the Alumni Association
  • Alumni Events
  • Services & Benefits
  • Programs for Alumni
  • Alumni Networking
  • Keep in Touch
  • Homecoming
  • Alumni Weekend
  • Students & Young Alumni
  • Giving to McMaster
• Discover McMaster
  • About the Campus
  • Fast Facts
  • Governance
  • History of McMaster
  • How to Get to McMaster
  • Policies, Procedures & Guidelines
  • President's Message
  • Provost & Vice-President (Academic)
  • Strategic Plan
  • Teaching and Learning at McMaster
• Future Students
  • Undergraduate
  • Graduate Studies
  • MBA Program
  • Executive Education
  • Continuing Education
  • Parents
  • Student Services
  • Virtual Tour
• Library
  • About the Libraries
  • Contact Us
  • Course Reserves
  • Library Catalogue
  • Library Services
  • My Account / Book Renewal
• Research
  • Canada Research Chairs
  • Endowed & Industrial Chairs
  • Ethics in Human Research
  • McMaster Innovation Park
  • Office of International Affairs
  • Partnership Opportunities
  • Research Centres & Institutes
  • Research Policies & Procedures
  • Research in the City
• Current Students
  • Student Affairs
  • Student Resources
    • Chaplaincy
    • Human Rights & Equity
    • Information Technology
    • Office of Academic Integrity
    • Ombuds
    • Parking & Transit
    • Registrar
    • Safety & Security
    • Student Financial Aid & Scholarships
    • Student Accounts
  • Student Government
    • Graduate Students
    • Part-time Students
    • McMaster Students Union
  • Campus Life
    • Clubs
    • Events

University Technology Services

• WCAG Home
• Perceivable Content
  • Guideline 1.1
    • Section 1.1.1
  • Guideline 1.2
  • Guideline 1.3
  • Guideline 1.4
• Operable Components
• Understandable User Interface
• Robust Content
• Web Page Checklist
• FAQ
• UTS Home

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: 
  

  
  

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

References

• Success Criterion 1.1.1
• Understanding Guideline 1.1