Website accessibility – what's new in WCAG 2.1?

Visit our website dedicated to WCAG digital accessibility topics: standardwcag.pl

The WCAG standard (“Web Content Accessibility Guidelines”) is a set of rules and principles that a website should meet in order to be accessible to as many users as possible, especially people with disabilities. The standard was created back in 1999, but its first version was not sufficient to allow a person with a disability to navigate a website freely.

That is why WCAG continued to evolve, with new principles and rules being added, which resulted in a new version – WCAG 2.0. The guidelines document was published in 2008 and significantly extended the previous version.

The WCAG 2.0 document is built around four principles:

1. Perceivable – information and user interface components must be presentable to users in ways they can perceive.


2. Operable – user interface components and navigation must be operable.


3. Understandable – information and the operation of the user interface must be understandable.


4. Robust – content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

The second version of the WCAG standard defines three levels of website conformance with the guidelines:

• A – the most basic requirements for a website. A website that conforms to this level allows people with disabilities to navigate it to a limited extent.


• AA – includes all the Level A rules plus a number of additional ones which, when met, make the website largely usable by people with disabilities. Under Polish law, most websites of public sector bodies and public institutions should meet this level of the WCAG standard.


• AAA – the highest level of conformance, which can often only be implemented by companies specialising in this field. It includes, among other things, transcripts of multimedia content embedded on the website.

Over the past 11 years, work continued on extending and optimising the WCAG guidelines, resulting in the publication of WCAG 2.1 in 2018.

List of changes introduced in the new version of the standard:

• Orientation - Content should display and work the same in any screen orientation (portrait/landscape)


• Identify Input Purpose.


• Reflow - Content should be displayed on screen without the need for horizontal scrolling


• Non-text Contrast


• Text Spacing - People with low vision should be able to change the spacing between lines, paragraphs, words and letters


• Content on Hover or Focus


• Character Key Shortcuts


• Timeouts - If inactivity could cause data loss, the user must be informed. An example would be a partially completed bank transfer form being closed after a few minutes of inactivity


• Animation from Interactions


• Pointer Gestures


• Pointer Cancellation - If the user accidentally touches an element, they must be able to cancel the associated action, e.g. by sliding their finger onto another element before lifting it


• Label in Name


• Motion Actuation


• Target Size - If an element can be operated by touch, it must be large enough (at least 44×44 CSS pixels)


• Concurrent Input Mechanisms


• Status Messages

Below are all the principles of the WCAG standard (from version 1.0 to version 2.1)

WCAG 2.1 success criteria by principle and guideline

Principle	Guideline	Success criterion	Level
1 – Perceivable	1.1 – Text alternatives	1.1.1 – Non-text content	A
	1.2 – Time-based media	1.2.1 – Audio-only and video-only (prerecorded)	A
		1.2.2 – Captions (prerecorded)	A
		1.2.3 – Audio description or media alternative (prerecorded)	A
		1.2.5 – Audio description (prerecorded)	AA
	1.3 – Adaptable – Appropriate (understandable) presentation of content	1.3.1 – Info and relationships	A
		1.3.2 – Meaningful sequence	A
		1.3.3 – Sensory characteristics	A
		1.3.4 – Orientation – displaying content in both landscape and portrait	AA
		1.3.5 – Identify input purpose	AA
	1.4 – Distinguishable – Making content easier to perceive	1.4.1 – Use of colour	A
		1.4.2 – Audio control	A
		1.4.3 – Contrast (minimum)	AA
		1.4.4 – Resize text	AA
		1.4.5 – Images of text	AA
		1.4.10 – Reflow	AA
		1.4.11 – Non-text contrast	AA
		1.4.12 – Text spacing	AA
		1.4.13 – Content on hover or focus	AA
2 – Operable	2.1 – Keyboard accessible	2.1.1 – Keyboard	A
		2.1.2 – No keyboard trap	A
		2.1.4 – Character key shortcuts	A
	2.2 – Enough time	2.2.1 – Timing adjustable	A
		2.2.2 – Pause, stop, hide	A
	2.3 – Seizures – Flashing	2.3.1 – Three flashes or below threshold	A
	2.4 – Navigable	2.4.1 – Bypass blocks	A
		2.4.2 – Page titled	A
		2.4.3 – Focus order	A
		2.4.4 – Link purpose (in context)	A
		2.4.5 – Multiple ways to locate a page	AA
		2.4.6 – Headings and labels	AA
		2.4.7 – Focus visible	AA
	2.5 – Input modalities	2.5.1 – Pointer gestures	A
		2.5.2 – Pointer cancellation	A
		2.5.3 – Label in name	A
		2.5.4 – Motion actuation	A
3 – Understandable	3.1 – Readable	3.1.1 – Language of page	A
		3.1.2 – Language of parts	AA
	3.2 – Predictable	3.2.1 – On focus	A
		3.2.2 – On input	A
		3.2.3 – Consistent navigation	AA
		3.2.4 – Consistent identification	AA