Web Content Accessibility Guidelines 2.1 (WCAG 2.1) expands provisions for
- mobile,
- low vision,
- cognitive and
- learning disabilities;
The Accessibility Guidelines Working Group has published Web Content Accessibility Guidelines (WCAG) 2.1 as a W3C Recommendation. WCAG 2.1 provides recommendations for making web content more accessible to a wider range of people with disabilities, including
- auditory,
- cognitive,
- neurological,
- physical,
- speech,
- visual disabilities.
The guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices.
We’re Enabled.in – We think that everyone should be able to access web content, especially considering that so much of what happens today happens online—be it commerce, conversation, networking, news, bookings, information access, and more.
Do you need Website with Accessibility? Contact us
Following these guidelines also makes your web content more usable to all users in a variety of situations.
What’s New in WCAG 2.1
Guideline 1.3 Adaptable
1.3.4 Orientation (Level AA)
1.3.5 Identify Input Purpose (AA)
1.3.6 Identify Purpose (AAA)
Guideline 1.4 Distinguishable
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)
Guideline 2.1 Keyboard Accessible
2.1.4 Character Key Shortcuts (A)
Guideline 2.2 Enough Time
2.2.6 Timeouts (AAA)
Guideline 2.3 Seizures and Physical Reactions
2.3.3 Animation from Interactions (AAA)
Guideline 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)
2.5.5 Target Size (AAA)
2.5.6 Concurrent Input Mechanisms (AAA)
Guideline 4.1 Compatible
4.1.3 Status Messages (AA)
Guideline 1.3 Adaptable
1.3.4 Orientation (Level AA)
Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
Example
Online video site – A video is shown in either portrait or in landscape based on the user’s chosen orientation.
Messaging website – A messaging website can display messages in both portrait and landscape orientations.
1.3.5 Identify Input Purpose (AA)
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 section; and
- The content is implemented using technologies with support for identifying the expected meaning for form input data.
Example
Providing the autocomplete attribute on suitable inputs – these techniques work on all the specified fields.
1.3.6 Identify Purpose (AAA)
In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.
Example
A website uses ARIA landmarks to identify the regions of the page, and users can hide areas that are not the ‘main’.
The links in the navigation of a website are marked-up so that users can add their own icons.
Icons on a website use are marked-up so that the user can substitute their own icon set into the page.
Guideline 1.4 Distinguishable
1.4.10 Reflow (AA)
Content can be presented without loss of information or functionality, and without requiring scrolling
Example
Increase the text size 400% and it reflowed within the width of the window. Its can read it easily without scrolling back and forth
1.4.11 Non-Text Contrast (AA)
The contrast ratio of at least 3:1
Example
It’s easy for me to see all the icons and buttons and everything — even in the sunlight. People with low vision often have difficulty perceiving graphics that have insufficient contrast. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a relative luminance (lightness difference) of 3:1 or greater can make these items more distinguishable when the person does not see a full range of colors.
1.4.12 Text Spacing (AA)
Line height (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.
Example
- Spacing can be overridden to the SC’s metrics.
- Text fits within the bounds of its containing box without being cut off.
- Text fits within the bounds of its containing box without overlapping other boxes.
- People with low vision who require increased space between lines, words, and letters are able to read text.
- People with dyslexia may increase space between lines, words, and letters to increase reading speed.
- Although not required by this SC, white space between blocks of text can help people with cognitive disabilities discern sections and call out boxes.
1.4.13 Content on Hover or Focus (AA)
Users with low vision who view content under magnification will be better able to view content on hover or focus without reducing their desired magnification
Guideline 2.1 Keyboard Accessible
2.1.4 Character Key Shortcuts (A)
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:
Guideline 2.2 Enough Time
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.
Example
While making a purchase on an e-commerce Web site, the information input by the user is stored for more than 20 hours. This helps ensure that if they need to stop working for a while that they are more likely to be able to continue the purchase when they return.
Guideline 2.3 Seizures and Physical Reactions
2.3.3 Animation from Interactions (AAA)
Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.
Example
A site includes extra animations when the user scrolls. Decorative elements move in and out of view horizontally when the essential page content is scrolled vertically. A control at the top of each page allows the user to turn off unnecessary animations. The ability to turn off non-essential animations is a site-wide setting.
Guideline 2.5 Input Modalities
2.5.1 Pointer Gestures (A)
Good thing there are buttons to zoom in and out.
Example
A web site includes a map view that supports the pinch gesture to zoom into the map content, and drag gestures to move the visible area. User interface controls offer the operation via [+] and [-] buttons to zoom in and out, and arrow buttons to pan stepwise in all directions.
2.5.2 Pointer Cancellation (A)
No Down-Event – The down-event of the pointer is not used to execute any part of the function;
Abort or 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.
Example
A phone dialling application has number keys that are immediately activated on touch (i.e. via the down-event). A user can undo an unwanted number input by hitting the backspace button to delete the erroneous digit.
2.5.3 Label in Name (A)
For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
Example
Text-to-speech users will have a better experience because the labels that they hear match the visible text labels that they see on the screen.
Accessible name matches visible label: The accessible name and visible label of a control match.
2.5.4 Motion Actuation (A)
Supported Interface – The motion is used to operate functionality through an accessibility supported interface;
Essential – The motion is essential for the function and doing so would invalidate the activity.
Example
After text is input in a field, shaking a device shows a dialog offering users to undo the input. A cancel button next to the text field offers the same functionality.
A user can choose an application setting which turns off Shake to Undo features.
2.5.5 Target Size (AAA)
The size of the target for pointer inputs is at least 44 by 44 CSS pixels
Example
Buttons – Three buttons are on-screen and the touch target area of each button is 44 by 44 CSS pixels.
2.5.6 Concurrent Input Mechanisms (AAA)
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.
Example
A user with mobility impairment pairs a mouse and keyboard to her mobile phone with a touchscreen. The phone can thereafter be operated by those input devices and the content does not accept the touchscreen as the only input mechanism.
Guideline 4.1 Compatible
4.1.3 Status Messages (AA)
In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.
Example
After a user presses an Add to Shopping Cart button, a section of content near the Shopping Cart icon adds the text “5 items”. A screen reader announces “Five items” or “Shopping cart, five items”.
Reference
1. https://www.w3.org/TR/WCAG21/