WCAG 2.1: What You Need To Know

At CourseArc, our mission is clear–make the development of high-quality and accessible online courses easy. Our templated approach makes creating engaging and interactive content a snap, with accessibility built in or clearly prompted. This means that content creators do not have to be accessibility experts to develop content that can be used by any student, including students with disabilities and students who use adaptive technology.

Creating an equitable learning experience through the use of accessible digital content is not only critical to student achievement, but it is also the law. Titles II and III of the Americans with Disabilities Act, Sections 504 and 508 of the Rehabilitation Act, and the Individuals with Disabilities Act all require that educators ensure their content is accessible and non-discriminatory to learners with disabilities.  The types of disabilities may be visual, auditory, physical, speech, cognitive, neurological, or a combination of these.

The Web Content Accessibility Guidelines (WCAG), internationally agreed-upon criteria from WC3, are used to measure compliance with these accessibility laws. Since late 2008, WCAG 2.0 AA has been the standard for education. In June, WCAG 2.1 was approved. WCAG 2.1 covers a wide range of recommendations for making Web content even more accessible, while still keeping the WCAG 2.0 AA recommendations intact. These new guidelines will make content more accessible to a wider range of people with disabilities. Also, following WCAG 2.1 will often make Web content more usable and understandable to users and learners in general.

If you want to dig into WCAG 2.1 in depth, here are a couple of great resources we recommend:

The New Guidelines in WCAG 2.1 Explained

New Features in WCAG 2.1

Since accessibility is built in and never an afterthought with CourseArc, the following are the new A and AA* guidelines for WCAG 2.1 and how content created in CourseArc will meet the requirements. Click here to see our full VPAT

1.3.4 Orientation (AA)


mobile phone being held sideways

mobile phone rotated

This guideline states that you must not force users of mobile devices to hold their devices in or rotate them to a certain orientation in order to take part in a website’s content. Following this guideline will improve accessibility for users who mount their tablets and smartphones to their wheelchairs or have trouble rotating them due to limited motor skills or because their hands are busy at the moment. 

✔ CourseArc meets this new criterion.

 

1.3.5 Identify Input Purpose (AA)


To follow this guideline, the meaning of each input field must be able to be determined programmatically. In other words, a piece of code must be able to tell what is expected to be entered by a user or what’s the meaning of a piece of entered information. Doing this correctly will make it possible for a user’s browser to autofill input fields based on data previously entered by the user. Great! Having to enter less input is always nice.

This guideline improves accessibility for users with cognitive disabilities who find it challenging to read and enter text. It also improves accessibility for users who don’t know the language of the website that well.

Criterion does not apply to CourseArc. Most student-facing input fields are dynamic in nature – for example, quiz questions.  Students do not see standardized fields such as email address, name, etc.

 

1.4.10 Reflow (AA)


This guideline states that users must be able to browse a website using a 320-pixel wide screen without having to scroll horizontally. In other words, your website must be responsive.

Why a width of 320 pixels? Probably because this is the smallest device width of a lot of popular smartphones.

Screenshot of a mobile phone with CourseArc content

CourseArc content displaying properly on a mobile phone

✔ CourseArc already meets this new criterion. Our product is 100% responsive.

 

1.4.11 Non-Text Contrast (AA)


Having high contrast between pieces of text and their backgrounds is one of the best and most important things you can do to ensure great accessibility on your website.

In this guideline, the requirement for high contrast extends from regular page text, to text on interface components (buttons) as well as for colors used in non-text content (infographics and diagrams).

 

screenshot of button contrast settings

Color Contrast Settings in CourseArc

 

✔ CourseArc already meets the new criterion. CourseArc provides contextual help for designers who are setting up their theme and provides links to WebAIM to test for contrast.

 

1.4.12 Text Spacing (AA)


This guideline states that distances between paragraphs, rows, words, and characters must be able to be increased to certain values without leading to loss of functionality or loss of content.

Failing at this could result in pieces of text overlapping, hence becoming unreadable. It could also result in components (links or buttons) being moved into places where they can’t be interacted with (outside the viewport or behind other elements).

Following this guideline will improve accessibility for users with visual impairment and dyslexia.

✔ CourseArc already meets the new criterion.

 

1.4.13 Content on Hover or Focus (AA)


This guideline states that if users trigger content in the form of a modal window, tooltip or a similar component, they must be able to:

  • Dismiss the content without moving the mouse cursor or the current keyboard focus (for example by pressing the Esc key).
  • Scroll to the content (thereby moving the mouse cursor) without making the content disappear (when the cursor is moved).
  • Dismiss the content solely on their own terms.

Criterion does not apply to CourseArc.  CourseArc does not use interactions that are triggered by hover or focus.

 

2.1.4 Character Key Shortcuts (A)


This guideline says that if a website supports keyboard shortcuts in the form of single characters like letters, symbols, numbers or punctuation, one of the following three conditions must be met:

  1. The shortcuts can be turned off.
  2. The shortcuts can be changed to also require pressing keyboard keys like Ctrl, Alt and Cmd.
  3. A shortcut for a certain element is only active when that element has focus.

Following this guideline will improve accessibility for people who use speech input for browsing a website. It will also improve accessibility for users who have hand tremors and easily press wrong keyboard keys.

This criterion is not applicable, as CourseArc does not have keyboard shortcuts.

 

2.5.1 Pointer Gestures (A)


This guideline states that actions performed using complex gestures like pinch zooming and swiping must also be able to be performed using simpler gestures like single taps, double taps, and long presses.

different pointer gestures used on an mobile phone

different gestures used on a mobile phone

Following this guideline will improve accessibility for users with limited motor skills or not enough fingers for multi-touch gestures.

✔ CourseArc already meets this new criterion.

 

2.5.2 Pointer Cancellation (A)


This guideline says that when you interact with a screen by clicking, tapping and long pressing at least one of the following statements must be true:

  1. The triggered functionality doesn’t happen on the down-event.
  2. The functionality is triggered on the up-event and it’s possible to either cancel it before the up-event occurs or undo it afterward.
  3. The up-event cancels what happened on the down-event.
  4. Triggering the functionality on the down-event has to occur for some important reason.

✔ CourseArc already meets this new criterion.

 

2.5.3 Label in Name (A)


To meet this guideline, text that is shown on interface components like buttons must be able to be:

  • Read to users of assistive technologies like screen readers.
  • Triggered by voice commands by users who take advantage of speech recognition software.

Following this guideline will improve accessibility for people with visual impairment who use screen readers. It will also improve accessibility for users who use speech input for browsing a website.

✔ CourseArc already meets this new criterion.

 

2.5.4 Motion Actuation (A)


To follow this guideline, functionality that is triggered by moving one’s mobile device must also be able to be triggered by interacting with interface components like buttons and sliders.

Responses to (accidental) motion must also be able to be turned off, unless:

  • The motion is supported through an accessible interface.
  • The motion is essential for the functionality.

Following this guideline will improve accessibility for users who mount their tablets and smartphones to their wheelchairs or have trouble moving them due to limited motor skills or because their hands are busy at the moment.

This criterion is not applicable to CourseArc since our content is designed to be viewed on computers as well as devices. Since motion actuation is not possible on non-mobile devices, we do not utilize motion actuation.

 

4.1.3 Status Messages (AA)


To follow this guideline, content that is updated dynamically must be notified to users of assistive technologies (like screen readers) without getting visual focus.

For example, you’re browsing a news website with a Twitter feed at the top of the site. It would be infuriating if every time a new tweet appears, you would automatically be scrolled back up to the top to see the new tweet.

Following this guideline will improve accessibility for users with visual impairment, especially for those who use screen readers and are likely to zoom in on a website.

This criterion is not applicable, as CourseArc does not have content that is updated dynamically without interaction from the end-user.

 

*Compliance with WCAG 2.1 AAA criteria is not required for federal laws.

To learn more or to see a demo of how easy it is to build fully-accessible online content with CourseArc, contact us at info@coursearc.com.

Credit: Thanks to Alexander Skogberg who gave us permission to use content from his blog, The new guidelines in WCAG 2.1 explained.

2018-09-11T13:04:43+00:00August 21st, 2018|Accessibility, CourseArc, eLearning Tools|0 Comments

Leave A Comment