WEB Content Accessibility GuideLines Version 2.1 (WCAG 2.1)

After nearly a decade, the global standard for Web Accessibility has modified with a stronger Specialise in Accessibility in reference to mobile devices, People with low vision and people with cognitive and learning disorder. It's a great step to protect for everyone.

The new Specification is called Web Content Accessibility Guidelines Version2.1(WCAG2.1). It covers a wide range of recommendations for creating content or page more accessible.

Web Content Accessibility Guidelines (WCAG):

WCAG2.1 Comparision with WCAG 2.0:

WCAG 2.0 was published on 11 December 2008 and WCAG 2.1 was published on 5 June 2018.

WCAG 2.1 was initiated with the goal to improve accessibility guidance for three major groups: users with cognitive or learning disabilities, users with low vision, and users with disabilities on mobile devices. Many ways to reach these needs were proposed and evaluated, and a set of these were refined by the Working Group.

Structural requirements assumed from WCAG 2.0, clarity and impact of proposals, and timeline led to the final set of success criteria included in this version. The Working Group considers that WCAG 2.1 incrementally advances web content accessibility guidance for all these areas, but underscores that not all user needs are met by these guidelines.

WCAG 2.1 builds on and is backwards compatible with WCAG 2.0, means web pages that conform to WCAG 2.1 also conform to WCAG 2.0. Authors that are required by policy to conform with WCAG 2.0 will be able to update content to WCAG 2.1 without losing conformance with WCAG 2.0. Authors following both sets of guidelines should be aware of the following differences:

What's New in WCAG 2.1?

Guideline 1.3 Adaptable

Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

1.3.4. Orientation: Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

1.3.5. Identify Input Purpose: The purpose of each input field collecting information about the user can be programmatically determined when:

  • The input field serves a purpose identified in the Input Purposes for User Interface Components.

  • The content is implemented using technologies with support for identifying the expected meaning for form input data.

1.3.6. Identify Pupose: In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.

Guideline 1.4 Distinguishable

Make it easier for users to see and hear content including separating foreground from background.

1.4.10. Reflow: Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

  • Vertical scrolling content at a width equivalent to 320CSS pixels;

  • Horizontal scrolling content at a height equivalent to 256 CSS pixels;

Except for parts of the content which require two-dimensional layout for usage or meaning.

1.4.11. Non-Text Contrast: The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color:

  • User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;

  • Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

1.4.12. Text Spacing: In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

  • Line spacing to at least 1.5 times the font size;

  • Spacing following paragraphs to at least 2 times the font size;

  • Letter spacing (tracking) to at least 0.12 times the font size;

  • Word spacing to at least 0.16 times the font size.

1.4.13. Content on Hover or Focus: Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:

  • Dismissable: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;

  • Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;

  • Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.

Guideline 2.1 Keyboard Accessible:

Make all functionality available from a keyboard.

2.1.4. Character Key Shortcuts: If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:

  • Turn off: A mechanism is available to turn the shortcut off;

  • Remap: A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g. Ctrl, Alt, etc).

  • Active only on focus: The keyboard shortcut for a user interface component is only active when that component has focus.

Guideline 2.2 Enough Time

provide users enough time to read and use content.

2.2.6 Timeouts (AAA)

Users are warned of the duration of any user inactivity that could cause data loss, unless the data is preserved for more than 20 hours when the user does not take any actions.

Guideline 2.3 Seizures and Physical Reactions:

Do not design content in a way that is known to cause seizures or physical reactions.

2.3.3 Animation from Interactions

Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.

Guideline 2.5 Input Modalities

Make it easier for users to operate functionality through various inputs beyond keyboard.

2.5.1 Pointer Gestures

All functionality that uses multipoint or path-based gestures for operation can be operated with asingle pointer without a path-based gesture, unless a multipoint or path-based gesture isessential

2.5.2 Pointer Cancellation

For functionality that can be operated using a single pointer, at least one of the following is true:

  • No Down-Event:The down-event of the pointer is not used to execute any part of the function;

  • Undo: Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion;

  • Up Reversal: The up-event reverses any outcome of the preceding down-event;

  • Essential: Completing the function on the down-event is essential.

2.5.3 Label in Name

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

2.5.4 Motion Actuation

Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when:

  • Supported Interface: The motion is used to operate functionality through an accessibility supportedinterface;

  • Essential: The motion is essential for the function and doing so would invalidate the activity.

2.5.5 Target Size

The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:

  • Equivalent: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;

  • Inline: The target is in a sentence or block of text;

  • User Agent Control: The size of the target is determined by the user agent and is not modified by the author;

  • Essential: A particular presentation of the target is essential to the information being conveyed.

2.5.6 Concurrent Input Mechanisms

Web content does not restrict use of input modalities available on a platform except where the restriction is essential, required to ensure the security of the content, or required to respect user settings.

Guideline 4.1 Compatible

Maximize compatibility with current and future user agents, including assistive technologies.

4.1.3 Status Messages

In content implemented using markup languages, status messages can be programmatically determinedthrough role or properties such that they can be presented to the user by assistive technologies without receiving focus.