Web content, websites, and web applications used or developed at U-M are required to meet digital accessibility standards and provide equitable access for people with disabilities.
Use the table below as a reference for WCAG 2.1 AA requirements that usually apply to websites and web applications, and how to meet them.
Want to test your site or app more fully? Learn to test for web accessibility.
| Requirement | Description |
|---|---|
| Text Alternatives 1.1.1 | Provide alt attributes for meaningful images. An alt attribute is a short description of an image that a screen reader can “read” to the user. |
| Pre-recorded Media. 1.2.1, 1.2.2, 1.2.3, and 1.2.5 | Provide transcripts and synchronized captions for all media with audio content. Also provide an audio description for videos with content that is not described in the audio, for example, charts that appear on the screen but are not described in the audio. |
| Live-Streamed Media. 1.2.4. | Use real-time captioning for all live-streamed media with audio content. |
| Good Code 1.3.1, 1.3.2, 2.4.3, and 4.1.1 | Use good semantic structure and syntax to enable the user to access all information and navigate the page in a logical manner. |
| Sensory Characteristics 1.3.3 | Do not provide instructions that refer solely to visual location or orientation, such as “the blue box on the top left,” or solely use sound, color, or other sensory characteristics. |
| Orientation 1.3.4 | Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. |
| Identify Input Purpose 1.3.5 | The purpose of each input field collecting information from the user can be programmatically determined so that it can be autofilled. |
| Use of Color 1.4.1 | Do not rely on color to convey meaning. Color-blind users may have trouble with a website if color is used to convey important information. Required fields or link text should not be indicated only with color. |
| Audio Control 1.4.2 | Provide a way for users to control audio independent of the computer audio setting. A screen reader user may not be able to hear the screen reader over the audio the application is generating. |
| Contrast 1.4.3 | Ensure appropriate color contrast so that content can be read by people with visual impairments. |
| Resize Text 1.4.4 | Define text using em, not pt or px, to ensure it is resizable. |
| Images of Text 1.4.5 | Do not create graphics that look like text; instead use text and style it with CSS. |
| Reflow 1.4.10 | Content can be presented without loss of information or functionality, and without requiring scrolling in small screens or when the screen is zoomed. |
| Non-Text Contrast 1.4.11 | Contrast of controls and images of text has a ration of at least 3:1. |
| Text Spacing 1.4.12 | Do not prevent the user from increasing line, paragraph, letter or word spacing. |
| Content on Hover 1.4.13 | If an element is shown on hover or focus, the element can be dismissed by the user, operated by the user and the element persists til the user dismisses it. |
| Keyboard 2.1.1 and Bypass Blocks 2.4.1 | Make sure all website functionality is available via keyboard navigation. Also, provide a means for users to skip over repetitive sections of the site. |
| No Keyboard Trap 2.1.2 | Ensure there are no keyboard traps. This occurs when the user can get to a certain point with the keyboard, but then can’t access the rest of the website. |
| Timing Adjustable 2.2.1 | Provide sufficient time for users to respond to timed content and provide users the ability to extend the time if necessary. |
| Pause, Stop, Hide 2.2.2 | Enable the user to control the movement, blinking, or scrolling of any content. |
| Character Key Shortcuts 2.1.4 | If there are keyboard shortcuts activated with a single key, the user can modify the key assignments or turn them off. |
| Flashes 2.3.1 | Ensure content and multimedia do not flicker at a rate known to induce seizures among optically sensitive users. |
| Page Title 2.4.2 | Provide a title for each web page that describes its topic or purpose to ensure the user knows what page they’re on. |
| Focus Order 2.4.3 | If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. |
| Link Purpose 2.4.4 |
Make the purpose of links clear. Use descriptive text for links, and not “click here,” or “read more,” and identify links to PDFs, Word documents, Excel spreadsheets etc. |
| Multiple Ways 2.4.5 | Provide multiple ways for the user to locate content, such as a navigation bar, search, and sitemap. |
| Headings and Labels 2.4.6 | Use headings appropriately to convey content hierarchy. |
| Visible Focus 2.4.7 | Provide a visual indicator of where the cursor is when the mouse is not being used. |
| Pointer Gestures 2.5.1 | If there are gestures (pinch, swipe, expand, etc.), there are also controls available that perform the same function with one click. |
| Pointer Cancellation 2.5.2 | All controls are activated when released (i.e, a link "fires" when you release the mouse button) to avoid errors. |
| Label in Name 2.5.3 | All controls that have text have the same text in the accessible name. |
| Motion Actuation 2.5.4 | For every functionality that depends on physically moving your device (e.g., shaking phone to shuffle playlist) there is a single control that performs the same function. |
| Page Language 3.1.1 | Declare the language, using the language tag, that the website is written in. If there are multiple languages on a page, it is crucial to indicate when the language changes and then when it reverts to the original language. |
| Language of Phrases 3.1.2 | Use language tags around foreign words so that the screen reader uses the correct speech synthesizer. |
| On Focus 3.2.1 and On Input 3.2.2a | Give the user a choice before changing context, such as when a link will open a new browser window or when to submit a form. |
| Consistent Navigation 3.2.3 and Consistent Identification 3.2.4 | Use consistent navigation and identification cues throughout the site. For example, use the same iconography, text cues, templates, and navigational elements. |
| Error Identification 3.3.1 and Error Suggestion 3.3.3 | Provide meaningful error messages that describe the appropriate solution. |
| Labels 3.3.2 | Associate all form elements with a label tag. |
| Error Prevention 3.3.4 | Provide the user an opportunity to confirm information they have entered for impactful transactions, such as legal and financial transactions. For example, “Do you want to transfer $5000?” |
| Name, Role, Value 4.1.2 | Ensure all technologies, including assistive technologies, can determine what an element is and does. Screen reader software must be able to determine, for example, if an element is a menu and if it is expanded or collapsed; or if a magnifying glass icon launches search or zoom functionality. |
| Status Messages 4.1.3 | Status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus. |