WCAG 2.2 as a standard and benchmark for websites

The Web Content Accessibility Guidelines (WCAG 2.2) have been published as a W3C Recommendation by the Accessibility Guidelines Working Group (AG WG). WCAG and the accompanying documents explain how to make content more accessible to people with disabilities. WCAG 2.2 introduces 9 new requirements (called success criteria) compared with WCAG 2.1. They improve accessibility for people with visual, physical and cognitive disabilities. For example, they extend the guidelines on touch input.

Why is implementing the WCAG 2.2 accessibility standard important?

Accessibility covers a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning and neurological disabilities. Although these guidelines cover a wide range of issues, they cannot meet the needs of everyone with every type, degree and combination of disability. Adapting web content to these guidelines makes it more usable not only for older people, whose abilities change with age, but often for users in general.

How WCAG 2.2 was created

WCAG 2.2 was developed through the W3C process in cooperation with individuals and organisations around the world. The goal was to create a shared standard for web content accessibility that meets the needs of individuals, organisations and governments worldwide. WCAG 2.2 builds on WCAG 2.0 and WCAG 2.1, which in turn build on WCAG 1.0. They are designed to apply broadly to different web technologies now and in the future, and to be testable with a combination of automated testing and human evaluation.

Significant challenges were encountered while defining additional criteria, particularly for cognitive, language and learning disabilities. They included a short development timeline and difficulty reaching consensus on the testability, implementability and international aspects of the proposals.

The role of browsers and authoring tools in implementing the WCAG accessibility standard

Web accessibility depends not only on accessible content but also on accessible web browsers and other user agents. Authoring tools also play an important role in web accessibility. For an overview of how these components work together in creating and interacting with the web, see:

• Essential components of web accessibility
• User Agent Accessibility Guidelines (UAAG)
• Authoring Tool Accessibility Guidelines (ATAG)

WCAG 2.2 guidelines for the web technologies HTML, CSS and JavaScript

The set of WCAG guidelines for websites is outcome-based, which means that the end user should have tools and techniques in place that deliver these goals. From a development point of view, however, the breakdown is more complex, and we can divide it into 3 logical layers: HTML for the content, CSS for the visual aspects of the content and JS for the functional aspects.

WCAG 2.2 guidelines for HTML

• Combining adjacent image and text links for the same resource
• Providing text alternatives for the area elements of image maps
• Providing a title using the title element
• Providing definitions for abbreviations using the abbr element
• Providing link text that describes the purpose of a link for anchor elements
• Providing submit buttons
• Supplementing link text with the title attribute
• Using Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline
• Using alt attributes on images used as submit buttons
• Using alt attributes on img elements
• Using caption elements to associate data table captions with data tables
• Using description lists
• Using h1-h6 to identify headings
• Using id and headers attributes to associate data cells with header cells in data tables
• Using label elements to associate text labels with form controls
• Using ol, ul and dl for lists or groups of links
• Using semantic markup to mark emphasized or special text
• Using table markup to present tabular information
• Using the body of the object element
• Using the dfn element to identify the defining instance of a word
• Using the dir attribute on an inline element to resolve problems with nested directional runs
• Using the language attribute on the HTML element
• Using language attributes to identify changes in the human language
• Using the link element and navigation tools
• Using the ruby element
• Using the scope attribute to associate header cells and data cells in data tables
• Using the title attribute of the iframe element
• Using the title attribute to identify form controls when the label element cannot be used
• Using null alt text and no title attribute on img elements for images that assistive technology should ignore
• Providing heading elements at the beginning of each section of content
• Using frame elements to group blocks of repeated material
• Providing a description for groups of form controls using fieldset and legend elements
• Ensuring that opening and closing tags are used according to specification
• Ensuring that web pages are well-formed
• Using meta refresh to create an instant client-side redirect
• Identifying the purpose of a link using link text combined with its enclosing list item
• Identifying the purpose of a link using link text combined with its enclosing paragraph
• Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells
• Identifying the purpose of a link using link text combined with the preceding heading element
• Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested
• Using the target attribute to open a new window on user request and indicating this in link text
• Using a button with a select element to perform an action
• Using optgroup to group option elements inside a select
• Providing text alternatives for emojis, emoticons, ASCII art and leetspeak
• Using HTML according to spec
• Using the title attribute to provide context-sensitive help
• Indicating required form controls using label or legend
• Using HTML form controls and links
• Ensuring that id attributes are unique on a web page
• Ensuring that elements do not contain duplicate attributes
• Using the track element to provide captions
• Using the track element to provide audio descriptions
• Grouping related links using the nav element
• Using HTML 5.2 autocomplete attributes
• Providing a mechanism to select a page
• Providing properly marked up email and password inputs
• Using semantic HTML elements to identify regions of a page

WCAG 2.2 guidelines for CSS

• Positioning content based on structural markup
• Using CSS to hide a portion of the link text
• Adjusting inter-letter spacing with the CSS letter-spacing property
• Including decorative images using CSS
• Using percent for font sizes
• Using named font sizes
• Using em units for font sizes
• Using CSS to change the presentation of a user interface component when it receives focus
• Scaling form elements which contain text
• Using CSS margin and padding rules instead of spacer images for layout design
• Specifying left OR right alignment in CSS
• Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized
• Specifying line spacing in CSS
• Using CSS to control visual presentation of text
• Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content
• Using percentage values in CSS for container sizes
• Specifying borders and layout in CSS to delineate areas of a web page while not specifying text and text-background colors
• Making the DOM order match the visual order
• Specifying the size of text containers using em units
• Using a style switcher to provide a conforming alternate version
• Using CSS to replace text with images of text and providing user interface controls to switch
• Using CSS Flexbox to reflow content
• Using media queries and grid CSS to reflow columns
• Allowing for reflow with long URLs and strings of text
• Using media queries to un-fix sticky headers and footers
• Allowing for text spacing without wrapping
• Allowing for text spacing override
• Using CSS max-width and height to fit images
• Using CSS width, max-width and flexbox to fit labels and inputs
• Using the CSS reduce-motion query to prevent motion
• Creating a two-color focus indicator to ensure sufficient contrast with all components
• Creating a strong focus indicator within the component
• Using min-height and min-width to ensure sufficient target spacing
• Using CSS margin and scroll-margin to un-obscure content

WCAG 2.2 guidelines for JavaScript

• Allowing the user to extend the default time limit
• Using redundant keyboard and mouse event handlers
• Using scripts to make nonessential alerts optional
• Providing a script that warns the user a time limit is about to expire
• Providing client-side validation and alert
• Using an onchange event on a select element without causing a change of context
• Using both keyboard and other device-specific functions
• Using functions of the Document Object Model (DOM) to add content to a page
• Using scripts to control blinking and stop it in five seconds or less
• Using progressive enhancement to open new windows on user request
• Inserting dynamic content into the Document Object Model immediately following its trigger element
• Reordering page sections using the Document Object Model
• Using expandable and collapsible menus to bypass a block of content
• Adding keyboard-accessible actions to static HTML elements
• Using scripts to change the link text
• Using a script to change the background color or border of the element with focus
• Providing client-side validation and adding error text via the DOM
• Using script to scroll content, and providing a mechanism to pause it
• Calculating size and position in a way that scales with text size
• Making actions keyboard accessible by using the onclick event of anchors and buttons
• Providing a mechanism to allow users to display moving, scrolling or auto-updating text in a static window or area
• Creating custom dialogs in a device-independent way
• Creating a conforming alternate version for a web page designed with progressive enhancement
• Making content on focus or hover hoverable, dismissible and persistent

More information: https://www.w3.org/TR/WCAG22/