Page Content
The audience for these guidelines are primarily Webmasters who may have some knowledge of HTML or programming. Similar information, less technical information can also be found on the Blockers or Course Guidelines pages.
Organization of WCAG 2.1
As with WCAG 2.0, the Web Content Accessibility Guidelines (WCAG) 2.1 guidelines are organized into general principles that apply to past, present and future technologies—that is, they tend to focus more on the needs of the user than on detailing specific technical guidelines. To assist in interpreting the principles, the WCAG have also provided implementation guidelines, which address common technical implementations of the principles.
WCAG 2.1 is organized into priority levels, ranging from most important (A) to least important (AAA). At Penn State, Web sites should fulfill levels A and AA to be considered compliant.
List of Principles and Implementation Guidelines
Below is a list of principles summarizing WCAG 2.1 principles and guidelines (as of 2011), with simple implementation guidelines and links on where to find more details. These guidelines are not a list of HTML "dos and don’ts", but rather a list of accommodations that must be made for people with different disabilities.
The "How to Implement" column represents a minimum baseline for HTML, video, audio and other common technologies, although adjustments can be made as needed. Note that not every technology may be covered in these guidelines.
Principle 1: Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Examples of Principle 1:
- Visually impaired users must be able to receive information via sound or touch
- Hearing impaired users must be able to receive information via sight
- Low vision users must be able to receive information with alternative formatting or zoomed to larger sizes
- Color deficient users must be able to receive information without use of color
Guidelines 1.1–1.4
Guideline 1.1: Text Equivalent
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.
such as large print, braille, speech, symbols or simpler language.
How to Implement 1.1
- Use ALT tags for images and text descriptions for animations, 3D models and other media. Also see the Charts and Math pages.
- Use CAPTCHA alternatives.
Guideline 1.2: Time Based Media (Audio/Video)
Provide alternatives for time-based media.
How to Implement 1.2
- Provide captions for video.
- Provide audio transcriptions for audio.
- Ensure that videos have sufficient audio description for those unable to see the video.
Guideline 1.3: Adaptable
Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
How to Implement 1.3
- Use appropriate semantic markup whenever possible for HTML documents, including header styles.
- Use appropriate markup for table headers.
- Use appropriate markup, including form LABELS and other techniques, to identify form and application controls.
- Preserve the visual sequence of content even with disabled styles.
- Content is usable on mobile devices when the screen is oriented vertically or horizontally.
- Content can be easily read without horizontal scroll even when a user uses magnification.
- Flash objects are implemented so that a screen reader will read them in the appropriate sequence.
Guideline 1.4: Distinguishable
Make it easier for users to see and hear content including separating foreground from background.
How to Implement 1.4
- Ensure appropriate contrast between the background and the text, graphics, charts or interface elements.
- Ensure that content is distinguishable independent of color.
- Avoid automatically-playing audio, slideshows and animation. Provide play buttons instead.
- Use CSS formatting instead of graphics to format text whenever possible
- Use responsive/liquid design techniques to ensure that text can be read without horizontal scrolling in multiple display sizes.
- Ensure that content opened with a hover effect does not interfere with other content and can easily be opened or closed by all users regardless of manual dexterity or visual acuity.
Principle 2: Operable
"User interface components and navigation must be operable."
Examples of Principle 2:
- Functions triggered via mouse gesture are also available via a keyboard
- Functions triggered by a complex gesture on a touch device are also available by an alternate method such as a button or simplified gesture.
- All users are given sufficient time to read and use content.
- Content does not induce seizures.
- Users are given mechanisms to skip repetitive content.
- Landmarks are provided to assist in screenreader navigation (e.g. meaningful page title, semantic headings, ARIA landmarks) meaningful headers and meaningful and unique link text.
Guidelines 2.1–2.5
Guideline 2.1: Keyboard Accessible
Make all functionality available from a keyboard.
How to Implement 2.1
- All form and application controls can be operated from a keyboard. For example:
- Arrows keys can control sliders, or numbers can be entered to set parameters.
- Tab keys can be used to be navigate between form fields and buttons.
- The ESC key can be used to close a window or menu.
- Keyboard commands can be used to activate and operate video players.
- Keyboard commands can be used to close and control windows.
- Keyboard shortcuts should include a non-printable character (e.g. arrow keys, CONTROL/ALT/OPTION+char, or ENTER/TAB/ESC).
Guideline 2.2: Enough Time
Provide users enough time to read and use content.
How to Implement 2.2
- When appropriate:
- A user can pause
- content in a rotating carousel or other similar technology
- video or animated content (when it’s longer than 5 seconds)
- scrolling text (when it’s longer than 5 seconds)
- The user is warned of time limit expiration and permitted to extend time.
- Users have the option to block an automatic update of content.
- A user can pause
Note: Exceptions are allowed when changes in timing would interfere with an essential function.
Guideline 2.3: Seizures
Do not design content in a way that is known to cause seizures.
How to Implement 2.3
- Flashing objects should be avoided or limited to 3 flashes per second.
- Exceptions are allowed for flashes below the general or red flash threshold.
Guideline 2.4: Navigable
Do not design content in a way that is known to cause seizures.
How to Implement 2.4
- Navigation cues are provided to assist in screen reader navigation such as
- page section headers
- unique link text
- ARIA Landmarks
- meaningful HTML frame titles
- document titles and Web page titles
- Users are given mechanisms to skip repetitive content.
- Keyboard users are able to see a cursor or other indicator of position on the screen (i.e. which item has keyboard focus.
- Multiple paths are provided to navigate through Web site content.
Guideline 2.5: Input Modalities
Make it easier for users to operate functionality through various inputs beyond keyboard.
How to Implement 2.5
Provide alternatives such as buttons or simplified gestures for
- Device gestures with complex paths
- Actions triggered by shaking or moving a device
Principle 3: Understandable
"Information and the operation of user interface must be understandable."
Examples of Principle 3:
- Navigation labels and placement are consistent across a document or web site.
- Status messages and other alerts:
- are detectable to all users including those on a screen reader
- can be closed with a keyboard as needed
- remain open until closed by the users
- do not block
- Form labels are announced with the same text as would be seen by other users.
- Mechanisms are available to detect form submission errors and provide clear instructions to users on fixing errors.
- Separate Submit or Go buttons/links are provided to initiate page changes (versus autosubmit upon selection).
- Language of text is identified as well as changes in page language.
Guidelines 3.1–3.3
Guideline 3.1: Readable
Make text content readable and understandable.
How to Implement 3.1
- Identify language of text or subsection of text with a language code.
- Identify and define unusual words or jargon.
Guideline 3.2: Predictable
Make Web pages appear and operate in predictable ways.
How to Implement 3.2
- Avoid unannounced pop up windows.
- Avoid disabling the browser’s Back button.
- Provide a separate Submit or Go button/link to initiate page changes (versus autosubmit upon selection).
- Allow automatic slideshows, videos and scrolling/blinking text to be paused.
- Give users the option to block automatic updates of content.
Guideline 3.3: Input Assistance
Help users avoid and correct mistakes.
How to Implement 3.3
- Provide appropriate form field validation.
- Provide clear labels for form and application controls.
- Provide usable instructions for entering information into forms and applications (preferably before the form field).
- Provide clear and usable error messages identifying the location of error and information for correcting it.
Principle 4: Robust
Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
Guideline 4.1: Compatible
Maximize compatibility with current and future user agents, including assistive technologies.
How to Implement 4.1
- Use validated markup
- Label the name and role of all user interface components.
- Identify the value for all data fields, including parameters for interface controls.
- Ensure that alerts and notifications are detectable on a screen reader and other devices.