Office of Accessibility Services

Working with the WCAG Guidelines

What you need to know to make your digital content accessible.

What's WCAG, and Why It Matters

What's WCAG, and Why It Matters

The Web Content Accessibility Guidelines (WCAG) are a set of international recognized guidelines for digital accessibility. And they're coming to UVM.

As a public entity, subject to the revised Title II section of the Americans with Disabilities Act (ADA), the University of Vermont needs to get all websites, multimedia, documents, social media, and courses to conform with all WCAG version 2.1 AA-level guidelines by April 2027. 

About the WCAG Levels

What does "AA-level guidelines" mean? The WCAG has three levels of conformance: A-level, AA-level, and AAA-level. 

  • A-level: these are the basic fundamentals of accessibility. If they are not met, a majority of people with disabilities cannot access this content.
  • AA-level: these are reasonable levels of accessibility. It is reasonable to ask that public entities conform with all AA-level requirements.
  • AAA-level: these are the gold standards of accessibility. These are the standards that must be met for digital content to be as fully accessible as possible.

Let's go through each of the 13 major WCAG requirements that make up version 2.1 AA-level accessibility standards.

The 13 WCAG Guidelines (And How To Meet Them)

1.1 Text Alternatives

Body

Provide text alternatives for all non-text content.

All images and other non-text content (like icons, charts, graphs, CAPTCHAs, or controls) must have a descriptive text alternative that conveys their meaning. 

This includes images of text. Images of text are extremely inaccessible. If you do want to use an image of text (say for a social media post), realize that you must also provide plain, useable text for everything shown in the image. Useable text is the default text on a webpage or in a document, or in the text field of a social media post. You can usually interact with useable text with a mouse (by highlighting it) or via keyboard (by using commands to select it).

1.2 Time-Based Media

Body

Offer alternatives for audio and video.

Multimedia -- most often audio and video files -- must have text alternatives. The type of multimedia determines what kind of alternative you need to provide. 

Requirements by type of multimedia

  • Video with dialogue: must have fully accurate captions. These are the majority of videos on the internet. Any time people speak, you need to provide a caption track, that includes non-speech sounds that are meaningful to the video. Automated captions do not (at this point) provide enough accuracy to qualify as "fully accurate". OAS provides human-edited captioning services for free for UVM students, staff, faculty, and departments.
  • Video without dialogue: must have audio description. Audio description is an audio track where a narrator describes the visual content of the video in plain language. This is incredibly helpful for blind and low vision viewers; the CDC estimates that as of 2022, that's nearly 7.1 million Americans. OAS provides human-edited audio description services for free for UVM students, staff, faculty, and departments.
  • Audio with dialogue: must have a transcript. Transcripts are useable text descriptions of what's been said in the audio file. They're usually broken out by speaker, and laid out like a movie script, or magazine interview. OAS provides human-edited audio description services for free for UVM students, staff, faculty, and departments.
  • Audio without dialogue: must have a text description. This can usually be a few sentences of useable text that summarizes what kinds of sounds are in the audio file. An example of this would be a recording of whale sounds; that file would need a short useable text description such as "This is a recording of whale sounds".

A note about American Sign Language (ASL) Interpretation

As of 2025, WCAG lists ASL interpretation of videos as AAA-level: it's a best practice, but it's not legally required. That said, consider including it anyway, to increase the accessibility of your videos.

1.3 Adaptable

Body

Build content that can adapt to different layouts and formats.

This guideline covers:

  • Information and Meaningful Relationships
  • Meaningful Sequence
  • Sensory Characteristics
  • Orientation
  • Identify Purpose

Information and Meaningful Relationships

This WCAG guideline largely pertains to the code underlying web accessibility and mobile applications. If you are using UVM's Drupal 10 web publishing system, this guideline is being met.

Meaningful Sequence

This WCAG guideline largely pertains to the code underlying web accessibility and mobile applications. If you are using UVM's Drupal 10 web publishing system, this guideline is being met.

Sensory Characteristics

Don't use any one sense alone to convey meaning. For instance, don't use color alone to convey meaning. An example of this would be if you said, "Click the purple button to go to registration, and click the green button to contact us." Anyone who cannot see purple and green, or who is unable to access images will not be able to use your work. 

Another example would be if you said, "In the sound file whales1.mp3, you can hear orcas. In the sound file whales2.mp3, you can hear gray whales. Which whales sing at a higher pitch?" Anyone who cannot hear, will not be able to use your work (or answer your question).

Orientation

Websites, multimedia, documents, and social media should be fully accessible in both landscape and portrait modes. For websites, if you are using the Drupal 10 web publishing system, this guideline is being met. But this is something to watch out for when you're creating documents and multimedia, creating social media posts, and evaluating new tech platforms. 

Identify Purpose

There are two requirements under this sub-guideline, and they largely pertain to forms. If you use the Qualtrics form creation service at UVM, these guidelines are being met. These guidelines may not be being met if you use Google Forms, SurveyMonkey, Evite, and other non-UVM form creation tools.

These requirements very much come into play if you are trying to include a form in a .pdf. Consider instead linking out to a Qualtrics form.

 

1.4 Distinguishable

Body

Create content that’s easy to see and hear.

This guideline covers:

  • Use of Color
  • Audio Control
  • Color Contrast
  • Resizing Text
  • Images of Text
  • Reflow

Use of Color

Make sure that your content doesn't use color alone to distinguish meaning. An example of this would be if you said, "Click the purple button to go to registration, and click the green button to contact us." Anyone who cannot see purple and green will not be able to access your work. 

Audio Control

If audio plays automatically for more than 3 seconds, it must be possible to pause, stop, or change the volume of the audio (without using the device settings). A good rule of thumb to make sure you're always meeting this rule is to never play audio automatically for more than 3 seconds.

Color Contrast

Make sure that your content uses good color contrast between text and graphics and their backgrounds. For webpages, if you are using UVM's Drupal 10 publishing system, this guideline is being met. But any content that you create in documents, multimedia, and social media needs to have good color contrast.

Good color contrast is defined as:

  • A 4.5:1 contrast ratio of regular sized text against its background. This counts for pale text on a dark background and dark text on a pale background both.
  • A 3:1 contrast ratio for large text (over 24px, or bold and more than 19px) against its background. This counts for pale text on a dark background and dark text on a pale background both.
  • A 3:1 contrast ratio of graphics against their background.

How to measure color contrast

There are two good tools for measuring color contrast. One is the WebAIM Wave Color Contrast Checker, and the other is the TPGi Color Contrast Analyzer. The WebAIM Color Contrast Checker is a webpage. The TPGi tool is an application you download and install on your Mac or Windows machine. Many people find the TPGi tool slightly easier to use.

Resize Text

Text should remain readable when you zoom into it at 200%. For web content, if you are using UVM's Drupal 10 web publishing system, this guideline is being met.

Images of Text

Images of text are not accessible. If you're going to use them, you must provide a useable text alternative. Every piece of text that appears in the image must also appear as useable text.

Reflow

Content must stay functional when someone zooms to 400% or while being viewed at 320px width, without needing to scroll in two directions. For web content, if you are using UVM's Drupal 10 web publishing system, this guideline is being met. 

There are some exceptions to this rule. They are: tables, maps, charts and graphs. But if you are creating any of those, remember that of your audience, 1 in 4 people will have at least one disability. So design accordingly.

2.1 Keyboard Accessible

Body

Everything should be accessible by using a keyboard alone.

Many people both with and without disabilities navigate websites, multimedia, documents, and social media using a keyboard alone. But many people with disabilities can only navigate those things using a keyboard. (Screen readers are only operated by keyboard, for example). So everything you create must be accessible by keyboard alone. 

For web content, if you are using UVM's Drupal 10 web publishing system, this guideline is being met. For multimedia, if you are hosting it on the UVM Streaming site or YouTube, this guideline is being met.

This guideline will most often come into play if you are considering creating content with a new web tool or piece of software that has not yet been evaluated by the OAS/ETS Accessible Software Group. It also comes up if you contract with an external vendor for web services.

2.2 Enough Time

Body

Allow enough time to read and use content.

There are two parts to this guideline:

  • Timing Adjustable
  • Pause, Stop, Hide

Timing Adjustable

This rule largely pertains to when a user must log into a service in order to complete a task. For example, if someone wants to use a health network's online service to request an appointment.

At UVM, for web content, if you are using UVM's Drupal 10 web publishing system, this guideline is being met. For forms and surveys, if you are using UVM's Qualtrics system, this guideline is being met.

For courses and in-class exercises, some students with disabilities may need additional time during a timed exercise, or may not be able to work with a timed exercise. If you are a faculty member who has a student with either of these requests, please refer them to Student Accessibility Services. 

Pause, Stop, Hide

If you have animations of any kind -- anything that moves on a screen for 5 seconds or more -- users should be able to control those animations.

2.3 Seizures and Physical Reactions

Body

Some users have photosensitivity reactions to objects on a digital screen. Photosensitivity disabilities mean that the way certain patterns of light interact with their eyes or brain can trigger negative health effects. Photosensitivity reactions can range from mild headaches to migraines, all the way up to seizures.

The good news is that it's easy not to trigger people's photosensitivity disabilities: content must not flash, blink, or flicker more than three times per second. 

When you are choosing a video to add to a web page header in UVM's Drupal 10 web publishing system, please evaluate the video you are adding to make sure it does not contain flashing, blinking, or flickering more than three times per second. For videos, this includes cuts between scenes. 

A good rule of thumb is not to add videos to the web page headers in UVM's Drupal 10 web publishing system.

2.4 Navigable

Body

Help users find their way and know where they are in the website.

Buckle in, this one has a lot of parts. They are:

  • Bypass Blocks
  • Page Titles
  • Focus Order
  • Link Purpose (In Context)
  • Multiple Ways
  • Headings and Labels
  • Visible Focus
  • Focus Not Obscured

Bypass Blocks

It must be possible to skip repeated blocks of content (e.g. navigation, header) and jump directly to the main part of the page. At UVM, for web content, if you are using UVM's Drupal 10 web publishing system, this guideline is technically being met. If you are working with an external vendor on creating web content, or if you are evaluating a new web tool that has not yet been reviewed by the OAS/ETS Accessible Software Group, this is something to bear in mind.

Page Titles

Every webpage you create, and every document you create must have a unique title.

Focus Order

When a user is navigating by keyboard alone, they must be able to move through a webpage or a document in the same approximate order as someone would move through the same webpage or document visually. At UVM, for web content, if you are using UVM's Drupal 10 web publishing system, this guideline is being met. 

Link Purpose (In Context)

Users should be able to figure out where a link goes, and what it does, before they use it. This takes two general forms. 

Specify file formats other than webpages

One is that if you are linking to any file format other than a webpage, you need to indicate what that file format is right there in the link. 

Say you want people to register online for an event by downloading and filling out a .pdf. Instead of having a link that says simply "Registration" and goes to that .pdf (that automatically downloads onto people's devices), your link should say "Registration (.pdf)". Same if it's going to a Word document, or an Excel spreadsheet (with the appropriate file endings).

If your link goes to a video or audio file, you need to include that in the link, or in the surrounding text.

For example, if you want users on your homepage to watch a welcome video from the department chair, your link shouldn't just say "Welcome from Our Chair" and link directly to the video file. Instead, your link could say "Welcome Video from Our Chair" or "Video Message from Our Chair", or even "Welcome from Our Chair (video)".

Do not use "click here"

In order for users to figure out where a link goes and what it does before they use it, you cannot use "click here".

Instead, create links that tell users what to expect at that link. 

Say you want people to register online for an event. Instead of creating a link that says "click here to register", just use "Online Registration" as the link, then have the page title match that. 

Multiple Ways

You must have at least two different ways for users to find pages or content. This means that users must be able to find all your pages or content not just through a menu, but also through either a site map, or a search feature. At UVM, for web content, if you are using UVM's Drupal 10 web publishing system, this guideline is being met. 

Headings and Labels

You must use headings to break up your text in a document, or your content on a webpage. And those headings should accurately describe the contents of each section of the document or webpage. At UVM, for web content, if you are using UVM's Drupal 10 web publishing system, this guideline is being met. For all non-spreadsheet documents (Word, PowerPoint, .pdf), you must use headings. (Headings do not apply to multimedia).

Labels and buttons must also accurately describe what happens if a user interacts with the label, or pushes the button. Do not label any buttons "click here".

Visible Focus

When users are navigating your content using a keyboard, the item that the cursor is currently on must have a visible indicator showing that that is where the cursor is focused. This is known as a "visible focus". At UVM, for web content, if you are using UVM's Drupal 10 web publishing system, this guideline is being met. If you create a Word document, an Excel spreadsheet, or a PowerPoint file, this guideline is being met for documents. This guideline is most applicable if you are considering using a web service or tool that has not been reviewed by the OAS/ETS Accessible Software Group.

Focus Not Obscured

When an element receives focus, it must be at least partially visible. At UVM, for web content, if you are using UVM's Drupal 10 web publishing system, this guideline is being met. If you create a Word document, an Excel spreadsheet, or a PowerPoint file, this guideline is being met for documents.  This guideline is most applicable if you are considering using a web service or tool that has not been reviewed by the OAS/ETS Accessible Software Group.

2.5 Input Modalities

Body

Support input methods beyond a keyboard and mouse.

This guideline applies to the code for websites, multimedia, documents, and social media, to make sure that all these things can be operated by users who use such assistive technology as eye-gaze trackers, mouth sticks, and switches. 

At UVM, for web content, if you are using UVM's Drupal 10 web publishing system, this guideline is being met. If you are working with an external vendor on creating web content, or if you are evaluating a new web tool that has not yet been reviewed by the OAS/ETS Accessible Software Group, this is something to bear in mind.

Additionally, there are two related rules to consider.

Motion

If an action can be triggered by motion (like shaking or tilting the device), it must also work without motion, and be possible to turn off motion-based input.

Target Size

If you have created something a user must interact with in order to accomplish a task -- like a QR code to scan -- that object must be a minimum of 24 pixels by 24 pixels big.

3.1 Readable

Body

Make text easy to read and understand.

This guideline has two parts:

  • Language of Page
  • Language of Parts

Language of Page

Every webpage must have a piece of code that tells the web browser what language the page is written in. At UVM, for web content, if you are using UVM's Drupal 10 web publishing system, this guideline is being met. If you are working with an external vendor on creating web content, or if you are evaluating a new web tool that has not yet been reviewed by the OAS/ETS Accessible Software Group, this is something to bear in mind.

For documents, you must manually set the language in each document as part of the document's metadata. This applies to Word documents, Excel spreadsheets, .pdf documents, and PowerPoint documents.

This guideline does not apply to multimedia or social media.

Language of Parts

Any parts of the content in a different language must be marked with the correct lang attribute. Expressions borrowed from another language (like “déjà vu” in English) do not need this, unless pronunciation or understanding would be affected.

3.2 Predictable

Body

Make sure websites and apps behave in consistent and expected ways.

This guideline has five parts:

  • On Focus
  • On Input
  • Consistent Navigation
  • Consistent Identification
  • Consistent Help

On Focus

When a user who is navigating with a keyboard navigates to an item, that item should not behave unexpectedly. For instance, it would not be accessible for a user to use their keyboard to focus on a "Contact Us" link and, as soon as their keyboard focus got there, the link opened Facetime and dialed a phone number. That would be unexpected and terrible. "Unexpected" and "terrible" are good synonyms for "inaccessible".

On Input

When a user activates an item, that item should not behave unexpectedly. For instance, it would not be accessible for a user to activate "Contact Us" link and, as soon as they did, the link opened Facetime and dialed a phone number. That would also be unexpected and terrible. 

At UVM, for web content, if you are using UVM's Drupal 10 web publishing system, this guideline is being met. If you are working with an external vendor on creating web content, or if you are evaluating a new web tool that has not yet been reviewed by the OAS/ETS Accessible Software Group, this is something to bear in mind.

Consistent Navigation

Navigation elements (like menus, links, search) must appear in the same place and order across pages. At UVM, for web content, if you are using UVM's Drupal 10 web publishing system, this guideline is being met. If you are working with an external vendor on creating web content, or if you are evaluating a new web tool that has not yet been reviewed by the OAS/ETS Accessible Software Group, this is something to bear in mind.

Consistent Identification

Elements with the same function should look and behave the same across multiple pages.

At UVM, for web content, if you are using UVM's Drupal 10 web publishing system, this guideline is being met. If you are working with an external vendor on creating web content, or if you are evaluating a new web tool that has not yet been reviewed by the OAS/ETS Accessible Software Group, this is something to bear in mind.

Consistent Help

Help options such as a Contact link, the postal address of a place, or a chat widget, should appear the same and appear in the same place across multiple pages of a website or document.

At UVM, for web content, if you are using UVM's Drupal 10 web publishing system, this guideline is being met. If you are working with an external vendor on creating web content, or if you are evaluating a new web tool that has not yet been reviewed by the OAS/ETS Accessible Software Group, this is something to bear in mind.

3.3 Input Assistance

Body

Help users avoid and easily fix mistakes.

Here are the parts of this guideline:

  • Error Identification, Error Suggestion, and Error Prevention
  • Labels or Instructions
  • Redundant Entry
  • Accessible Authentication

Error Identification, Error Suggestion, and Error Prevention

Errors and validation must be clearly identified and described in text, not just visually (like color or highlighting). Additionally, errors and validation messages must show text that explains the problem and gives suggestions for how to fix it (like “enter at least 8 characters”). And before submitting important actions (like payments or legal forms), the form must allow reviewing the input, correcting mistakes, or confirming.

If you are using the non-credit course setup system, these guidelines are being met. And if you are using Qualtrics for your forms, these guidelines are being met.

If you are setting up forms on an independent WordPress site, look for plugins that provide error messages -- even better if you can customize them.

If you are working with an external vendor on creating web content, or if you are evaluating a new web tool that has not yet been reviewed by the OAS/ETS Accessible Software Group, this is something to bear in mind.

These requirements are one of the reasons OAS strongly encourages UVM community members and departments to use UVM's Qualtrics forms service to create forms rather than adding forms to documents.

Labels or Instructions

Form fields must have clear labels or instructions to avoid confusion and help complete the input correctly. This is a subjective measure, which means that you need to make a judgment call on what qualifies as a "clear" label or instruction.

Again, if you are using the non-credit course setup system, this guideline is being met. And if you are using Qualtrics for your forms, this guideline is being met.

If you are using other systems to create your forms, think about how to label your form fields and give instructions in plain language. Plain language is language at or below a 5th grade reading level. It uses short, active voice sentences, with commonly used words and no jargon. If you do need to use technical language that goes with your program, consider also having a glossary so that users can figure out what the more technical words mean.

Redundant Entry

Don’t ask for the same information twice in the same process. Provide pre-filled fields or selection options if the information was already given.

Again, if you are using the non-credit course setup system, this guideline is being met. And if you are using Qualtrics for your forms, this guideline is being met.

Accessible Authentication

Authentication must not rely on memory alone. Allow copy-paste, password managers, or other options (like email verification). This guideline applies if you are using a system that lets you choose what kind of authentication to add to your forms or webpages. 

 

 

Compatible

Body

Maximize compatibility with assistive tools and browsers.

This guideline largely applies to the code being used to create web publishing systems, including social media platforms. If you are using UVM-approved tools, you are creating work that conforms to this guideline.