What’s New in Web Content Accessibility Guidelines (WCAG) 2.1 – New AA & AAA Criteria Explained

Introduction

Web Content Accessibility Guidelines was developed through the W3C process with collaboration from individuals, organizations globally with the goal of providing a centralized standard for web content accessibility in an effort to meet the needs of individuals, organizations and governments internationally.

Web content is explained as information on a web page or a web application. This would include natural information such as text, images and sounds as well as background assembly such as code or markup that defines structure, presentation etc.

All success criteria from 2.0 has been included with 2.1 (word for word). WCAG 2.1 now provides 17 additional success criteria addressing:

·        Mobile accessibility

·        People with low vision

·        People with cognitive and learning disabilities

Guideline 1.3 – Adaptable

Addresses – Creating content that can be presented without losing information or structure. A good example would be to make a simpler layout that works for both portrait and landscape modes.

1.3.4 Orientation (AA) – Content will not restrict its view should the orientation of the display cannot be changed unless a specific display is an essential requirement.

1.3.5 Identify input purpose (AA) – Each input field collecting information about the user can be programmatically determined in advance.

The content is implemented with support for identifying the expected meaning of the form data field. In short, each field can be pre-populated with the user’s information in advance to assist in inputting information should the user be unable to or have great difficulty in typing the information.

1.3.6 Identify Purpose (AAA) – The use of markup languages programmatically determined to address icons, regions etc. For example, software that changes word in navigation to symbols on websites.


Guideline 1.4 Distinguishable

Addresses – making it easier for users to see and hear content including the separation of foreground from background sound. For example, a sight impaired person who has difficulty reading text due to constant scrolling right to left to read each line.

1.4.10 Reflow (AA) – Content will be presented without loss of information, functionality and without requiring scrolling in two dimensions. This includes:

·        Vertical scrolling content – width equivalent to 320 CSSS pixels

·        Horizontal scrolling content - height equivalent to 256 CSSS pixels

1.4.11 Non-Text Contrast (AA) – Introduction of a contrast ratio for presentations of at least 3:1 against adjacent colors. A sight impaired individual may have difficulty discriminating between text boxes in a form to be completed. The outline of the textbox (or icons as well) must be contrasted enough to indicate where exactly its borders are.

·        User Interface Components: Visual information used to indicate boundaries of user-based components. This includes the states of the boundaries as well except for inactive components or those not modified by the user.

·        Graphical Objects: Parts of a graphic used to understand the content except when a specific graphic is essential to the information being displayed.

1.4.12 Text Spacing (AA) – Implemented in content using markup languages that support text style properties with no loss of content or functionality. In this case, think of reading text and paragraphs that are very close to each other. The following apply:
 

·        Line height – to at least 1.5 times the font size.

·        Letter Spacing – At least 0.12 times the font size.

·        Spacing – paragraphs to at least 2 times the font size

·        Word spacing – At least 0.16 times the font size.

The exception to this standard are for those text styles (languages) that cannot form to all requirements above.

1.4.13 Content on Hover or Focus (AA) – Content that is displayed on mouse hover or keyboard focus that triggers additional content to become visible then hidden. For example, moving your mouse over to another area of the webpage only to find the mouse activating a pop-up display that blocks the content you are trying to read, and it is not going away.

·        Dismissible: A mechanism in place to dismiss content without moving the mouse or keyboard.


·        Hoverable: if your mouse pointer triggers additional content, then the pointer can move over the additional content without it disappearing.


·        Persistent: Additional content remains visible until the hover or focus trigger is removed or the user dismisses it. In some cases, it will also disappear if the information is no longer valid.

Guideline 2.2 Enough Time

Addresses – Providing users enough time to read and use content. An example here would be moving from a form to complete to another webpage in order to retrieve information needed on the form. When you return to the form you discover it timed out automatically and any information you had put in was lost and must be re-entered.


2.2.6 Timeouts (AAA) – Users are now warned of inactivity that may result in data loss unless data is preserved for more than 20 hours when the user does not take any action.


Guideline 2.3 Seizures and Physical Reactions

Addresses – Content should not be designed in any way that may trigger seizures or physical reactions. In this case we can look at forms for example where as you move your mouse, a pop-up bubble or window appears with each line of the form your move across. This may cause nausea in some cases.


2.3.3 Animation from interactions (AAA) –Motion animation triggered by interaction can be turned off, unless the animation is essential to the functionality or to the information being conveyed.


Guideline 2.5 Input Modalities

Addresses – Making it easier for users to operate functionality through various inputs beyond a keyboard. For example, zooming in on a map my present issues for those with motor skills that cannot be controlled easily. Including buttons on the map to click to zoom in or out will be the alternative to be used. Those buttons must also be a specific size and relative distance in order to not be incorrectly clicked (i.e. cancel button clicked instead of submit button)

2.5.5 Target size (AAA) - Size of the target for pointer inputs is at least 44 by 44 CSS pixels in all cases except:

·        Equivalent: Target is available through an equivalent link or control on the same page and that it is at least 44 by 44 CSS pixels.

·        Inline: When the target is in a sentence or block of text

·        User Agent Control: The size of the target is note modified by the author but is determined by the user agent.

·        Essential: A specific presentation of the target is essential to the information conveyed.

2.5.6 Concurrent Input Mechanisms (AAA) – web content will not restrict the use of concurrent device inputs (keyboard, mouse, stylus, voice recognition) unless it is deemed essential and required to ensure the security of the content.


Guideline 4.1 Compatible

Addresses – The need to maximize compatibility with current and future user agents, to include assistive technologies. For example, a visually user is completing a selection of a class for a conference and after the selection, the user is unaware if the selection is completed successfully. This guideline will enable a confirmation sound to play indicating the class was added to the user’s schedule/calendar.


4.1.3 Status Messages (AA) –In content using markup languages, status messages can be programmatically set through a role or properties in such a way that they can be presented to the user by their assistive technologies without receiving focus.