allerlayAn essential difference between WCAG 2.0 and WCAG 2.1 is: Many success criteria of WCAG 2.0 could be tested automatically with software. However, the new criteria require manual tests. Web offerings and user behavior as well as requirements for usability have changed considerably in recent years. The new success criteria do justice to this change and should help to make websites and apps more accessible for people with visual impairments, learning difficulties and cognitive disabilities.
In this blog post, I would like to explain in particular those success criteria that correspond to conformity levels A and AA. These are therefore criteria that must be met by public authorities and companies.
WCAG 2.1 Success criteria and what they mean in practice
Orientation (AA)
The success criterion “orientation” refers to how your website is displayed on a mobile device and how users can access it. Websites and apps should support both landscape and portrait orientation. This ensures that users can read a website correctly even if their devices are mounted on a heightening or in some other way.
Identify Common Purpose (AA)
If form fields are correctly marked, you make it easier for the visitor to fill them in and enable AutoComplete, i.e. the automatic entry of names, addresses, telephone numbers or birthdays, for example. Once the intended use has been identified, smartphones also automatically switch to the number keyboard if, for example, a telephone number is required.
Magnifications (AA)
You’ve probably already visited a website from a mobile device whose text doesn’t fit the screen size. This leads to tedious zooming and scrolling, not only vertically, but also horizontally. This is annoying and even more frustrating for users who use a large zoom. Therefore, when designing the website, make sure that the content is dynamically adapted to the screen width. In this way, users only have to scroll vertically.
Non-textual contrasts (AA)
Sufficient contrast is one of the most important criteria of WCAG. Depending on the text size, background and text must have a minimum contrast ratio of 3:1 or 4.5:1. WCAG 2.1 goes one step further: Buttons, links, form controls and graphics must also have a ratio of 3:1.
For example, an “X” symbol used to close a window must have sufficient contrast to the background.
For graphics, those parts that are relevant in terms of content must have a minimum ratio of 3:1. This applies, for example, to diagrams, symbols, and other content-related graphics.
Text Spacing (AA)
With this success criterion, WCAG 2.1 ensures that users can individually adjust the distance between paragraphs, words, and letters as well as the line-height without losing the functionality of the website.
Contents of hover or keyboard focus (AA)
On many websites, additional information is displayed when you move the mouse pointer over a graphic or other elements. This can be annoying for some users. In WCAG 2.1 there must be a function to close the additional content. In addition, the content must be displayed until the user actively closes the window. This ensures that the user has sufficient time to read the content. This is especially important for users with learning disabilities.
Interim conclusion
Although WCAG 2.1 serves web accessibility, the new criteria help to make your website and apps easier to use and more attractive for all users. Accessibility is about inclusive website design. Further criteria of WCAG 2.1 are:
- Character Key Shortcuts (A)
- Pointer Gestures (A)
- Pointer Inputs (A)
- Label in the name (A)
- Motion Actuation (A)
- Status Messages (A)
I will discuss further criteria in the next blog post.