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

An accessibility standard recognized in many countries is the WCAG (Web Content Accessibilty Guidelines) version 2. These guidelines are one of the many web technology guidelines sponsored by the W3C (World Wide Web Consortium). They cover the needs for users with a variety of disabilities and include guidelines for

Priority Levels A, AA, AAA

Each specific guideline is tagged with a priority level A (highest priority), AA and AAA. Penn State, most U.S. universities, the U.S. federal government and other U.S. and international organizations mandate adherence to levels A and AA only.

POUR Model for Guidelines

Below is a list of principles summarizing WCAG 2.1 principles and guidelines 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 guidelines that must be followed in order to optimize access for users with different disabilities.

The How to Implement links provides some recommendations from the W3C on how the guidelines may be implemented in HTML and other technology. Note that not every technology may be covered in these guidelines.

The main guidelines are organized into four groups 1-4 organized by needs for

  • Perception (Guidelines 1.1 to 1.4)
  • Operation (Guidelines 2.1 to 2.5)
  • Understanding (Guidelines 3.1 to 1.3)
  • Robustness (Guidelines 4.1)

The the first letters form the acronym POUR.

Relation of WCAG 2.1 to WCAG 2.0

WCAG 2.1 is a 2018 upgrade to the WCAG 2.0 guidelines originally published in 1998. Version 2.1 includes additions and amendments to WCAG 2.0 meaning that all guidelines from WCAG 2.0 are still in effect.

 

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.

How to Implement 1.1

Guideline 1.1 details

Guideline 1.2: Time Based Media (Audio/Video)

Provide alternatives for time-based media.

How to Implement 1.2

Guideline 1.2 details

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 semantic headings and 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.
  • If content is magnified, it can be viewed without horizontal scrolling.
  • All content is read aloud in an appropriate reading order by screen readers.

Guideline 1.3 details

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/fluid 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.

Guideline 1.4 details

 

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, menu or pop-up box.
    • 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.1 details

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.

Note: Exceptions are allowed when changes in timing would interfere with an essential function.

Guideline 2.2 details

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.3 details

Guideline 2.4: Navigable

Provide ways to help users navigate, find content, and determine where they are.

How to Implement 2.4

Guideline 2.4 details

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

Guideline 2.5 details

 

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.1 details

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.2 details

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.

Guideline 3.3 details

 

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.

Guideline 4.1 details

Top of Page