What does WCAG 2.1 Mean for You?

You finally understand WCAG 2.0. You know what your website needs in order to provide a barrier-free website to everyone and stay in compliance with federal regulations. Now that you can finally breathe a sigh of relief, the World Wide Web Consortium (W3C) recently updated success criteria and now recommends WCAG 2.1 as the standard for accessibility. If your website already complies with WCAG 2.0, have no fear! WCAG 2.1 should not be too difficult to apply (especially if you are our client since we do this for you).

First things first. WCAG 2.1 does not replace everything included in 2.0. Everything you learned and applied about 2.0 still applies including:

• the three levels of success (A, AA, and AAA),
• all of the basic principles, and
• the same organization (e.g., text alternatives are still covered in Guideline 1.1).

Now that I have cleared some of your tension, let’s discuss WCAG 2.1. Similar to what the Section 508 refresh is to the original Section 508 standards, WCAG 2.1 is an extension of 2.0. As mentioned above, it does not replace the 2.0 success criteria. Think of it like this: does your mobile phone still look like this?

Neither should your website. (Note: if this is an actual photo of your current phone, please contact us ASAP!) Technology is capable of doing more every day, and we need to be sure we are providing the most efficient way for all users to receive the information we are sending. Keeping up with new standards allows us to do this.

We should look at updates as an extreme benefit to us. We do not need to find a better way. Someone else has already developed this for us. It’s an open book test. Let’s take advantage of the information we have in front of us. 

To help you out, even more, we’re providing an outline of the new A and AA success criteria added in WCAG 2.1. (Please note that this is our interpretation of WCAG 2.1 and should not be used to replace the actual WCAG 2.1 guidelines. We’ve taken the content within the quotes directly from the WCAG 2.1 guidelines.) 

New WCAG 2.1 A and AA Success Criteria

• 1.3.4 – Orientation (AA)
  Have you ever rotated your device in an effort to get a better view of the content only to discover the content does not rotate? This does not necessarily mean your device is broken. Some websites will either lock the screen orientation, preventing the content from adjusting to the new orientation or may not be designed to automatically adjust for various screen widths.
  
  “The intent of this Success Criterion is to ensure that content displays in the orientation (portrait or landscape) preferred by the user.”  We design our responsive websites using a technique called media queries. Media queries allow content to be viewed in any size width, which means our responsive websites already comply to this requirement.
• 1.3.5 – Identify Input Purpose (AA)
  We often fill out online forms, and using autocomplete is highly beneficial to all users. This new success criteria requires that forms allow viewers to use autocomplete for certain types of user information.
• 1.4.10 – Reflow (AA)
  Basically, your website must be responsive. This criteria allows someone to use browser zoom to increase the size of content by 400% without losing content or needing to scroll horizontally. If you are unsure if your website already meets this criteria, view it on a mobile device. Do you have to scroll horizontally to see everything? If your answer is yes, then your website is not responsive. 
  
  Note: This does not apply to content such as maps where the meaning of the content would change if it were reflowed.
• 1.4.11 – Non-Text Contrast (AA)
  Non-text elements such as buttons and graphics require a contrast ratio of at least 3:1 against adjacent color(s). How will everyone know where the submit button is if they cannot see it? The web today provides many infographics. Can everyone see the content of your infographic?  
  
  This contrast requirement does not apply to essential graphics considered to be logotypes, sensory (photos of people or scenery), or graphics used to represent other things (screenshots, medical diagrams using colors found in biology, colors using gradients to represent measurements).
• 1.4.12 – Text Spacing (AA)
  The spacing between letters, lines, and words can be adjusted without losing content or functionality. This will eliminate text overlapping and interactive elements (e.g., buttons) moving someplace that will not allow interaction. 
• 1.4.13 – Content on Hover or Focus (AA)
  When additional content appears using hover (hovering over the content with the mouse) or focus (using the keyboard to tab to and focus on a link), the viewer must be able to perceive additional content as well as have the ability to dismiss the content without disrupting the page experience.
• 2.1.4 – Character Key Shortcuts (A)
  When a website supports keyboard shortcuts in the form of single characters (e.g., letters, symbols, numbers, or punctuations), one of the following three conditions must be met:
  • The shortcut can be turned off.
  • The shortcut can be changed to require using additional keys (e.g., Ctrl, Alt, etc.).
  • The shortcut is only active when the element has focus.
  These new criteria will especially improve the ability for speech input users to browse a website without their assistive technology mistaking speech for specific keystrokes.
• 2.5.1 – Pointer Gestures (A)
  Complex actions such as pinch zooming and swiping must have the capability of being performed with a single point activation unless the gesture is essential to the functionality of the element.
  
  For example,  while using a touch-screen device such as a mobile phone, the user can swipe slideshow images left or right or tap the arrows to view the next or previous image. 
• 2.5.2 – Pointer Cancellations (A)
  When interacting with a screen by using a single action (e.g., clicking, tapping, long-pressing), one of the following must be true:
  • The function is not activated on the down-event.
  • The function is activated on the up-event, and the user can abort the function before completing the action or undo the function after completing the action. 
  • The up-event cancels the action of the down-event.
  • The function of the down-event is essential.
• 2.5.3 – Label in Name (A)
  If an interactive component (e.g., link, button, etc.) includes text or images of text, the text must be presented to assistive technologies such as screen readers and speech recognition software.
• 2.5.4 – Motion Actuation (A)
  When an action such as shaking or panning a device triggers an event, the action must also be able to be triggered in another standard way such as a button, and the result of the action can be disabled except when:
  • the action is supported through an accessible interface or
  • the action is essential to the function.
• 3.2.6 – Status Changes (AA)
  When a status message is presented (such as an alert or update) without receiving focus, the message must be announced to assistive technologies (e.g., screen readers) without receiving focus.

Now that you are up to date on the latest and greatest, you can provide the best experience for everyone visiting your website. Although it will take some time for laws to require everyone to comply to the new standards, smart schools will design and develop their websites using these latest and greatest techniques. Otherwise, they will find themselves redesigning their websites…again. 

Let us know if you need help saving time, saving money, and providing a barrier-free website for all users. Because we at School Webmasters think accessibly, we design and develop our websites so they are both viewable and usable for everyone.