Late last year I mentioned on Accessibility Tips for Beginners that a new version of the renowned Web Content Accessibility Guidelines (WCAG) was in the works. As of June 5, 2018, we have 17 new guidelines to consider and comply to under WCAG 2.1. These new guidelines bring to awareness pain points that people living in this tech-saturated world have been dealing with by focusing on improvements for mobile accessibility, people with low vision, and people with cognitive and learning disabilities.
Below is a quick summary of the new guidelines:
- Users can have the same experience regardless of the orientation of their device. (AA)
- Give users autocomplete suggestions on form inputs based on the expected meaning such as frequently used data (i.e., addresses, names, phone numbers, emails, et cetera.). (AA)
- Use semantic markup so that the purposes of components, icons, and regions can be programmatically determined and used by assistive technologies. (AAA)
- Keep the content and functionality within the viewport so that there isn’t a side-scroll, even if content increases in font size. (AA)
- Graphical objects required to understand the content as well as visual state queues, component boundaries have a contrast ratio of 3:1. (AA)
- Typography line height, letter, and word spacing, as well as space after paragraphs, should be within the provided threshold, without losing content or functionality. (AA)
- Content revealed on hover or focus is dismissible without having to move the mouse cursor or keyboard focus, and if additional content is present, the information is persistent until dismissed by the user or loss of focus. (AA)
- There is a mechanism in place to turn off keyboard shortcuts as well as to remap them or to only be active on focus of the component that the shortcut effects. (A)
- Inform users of the allowed inactivity duration that may cause data loss. (AAA)
- Motion animation triggered by interactions can be disabled. (AAA)
- Multipoint or path-based gestures for operations can be operated with a single pointer such as providing buttons for zooming in and out on touch devices. (A)
- When using single point operations, either the operation happens on the up-event, there is a mechanism to abort the action or the up-event reverses any outcome of the preceding down-event. Unless completing the function on the down-event is essential. (A)
- The programmatic name of user interface components with labels/text on graphical elements reflect the label/text rendered, such as “send” or “submit”. (A)
- Functionality operated by device motion can be operated by user interface components. If using the components, responding to the motion can be disabled to prevent accidental actuation. (A)
- The size of the target for pointer inputs is 44px by 44px. (AAA)
- Web content does not restrict the use of input modalities available on a platform. (AAA)
- Use semantic markup for status messages so that assistive technologies can present them to the user without receiving focus. (AA)
Like the previous versions, some of these guidelines have exceptions based on content intent or purpose. To learn more about exceptions and acceptance criteria read W3C’s notes on what’s new in WCAG 2.1.
Since W3C’s mission is to develop protocols and guidelines that ensure the long-term growth of the Web, WCAG 2.1 is backward compatible. Which means everything from WCAG 2.0 is included in WCAG 2.1 compliance.
Your level of compliance will determine how much effort is needed to stay or get back into compliance. The detailed documentation provides you with techniques to put you in the right direction.
Were you surprised by any of these new guidelines? I was surprised by “using semantic markup so that the purposes of components, icons, and regions can be programmatically determined and used by assistive technologies”. I didn’t realize there was software out there that changed labels into icons. Are there any new guidelines you hope are added to future versions? I’m thinking perhaps something to do with wearables, what do you think? Let's have a conversation below.