Introduction:

Web Accessibility provides a way toward making the digital web accessible to everyone including people with diverse abilities

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
By Tim Berners-Lee, W3C Director and inventor of the World Wide Web

WCAG Standards

Web Content Accessibility Guidelines (WCAG) is an industry standard for Accessibility, designed by Web Accessibility Initiative (WAI) W3C. WCAG comprises three levels of conformance

• Level A — Minimum level of conformance to satisfy web content
• Level AA — Web content satisfies both Level A & AA success criteria (or a level AA conforming alternate version is provided)
• Level AAA — Web content satisfies all Level A, AA, and AAA success criteria (or Level AAA conforming alternate version is provided)

Core Principles of WCAG

WCAG focused on four underlying principles (POUR)

1. Perceivable — Users must be able to perceive the information being presented
2. Operable — Users must be able to operate the interface
3. Understandable — Users must be able to understand the information as well as the interface
4. Robust — Users must be able to access the content technically advanced (with assistive technologies)

WCAG 2.0 vs 2.1

WCAG 2.0 is the foundation for websites to be accessible to everyone. In 2018, WCAG 2.1 became official from the W3C Web Accessibility Initiative which ultimately become part of ADA Compliance. WCAG 2.1 is not a superseding standard, but an extension of WCAG 2.0

WCAG 2.1 Level AA is an upgraded version of WCAG 2.0 AA -

• WCAG 2.0 AA has 38 success criteria
• WCAG 2.1 AA has 12 new success criteria and a total of 50 guidelines (all 38 of WCAG 2.0 guidelines + 12 new guidelines)
• Nothing in WCAG 2.0 AA has been undone; 2.1 simply adds to it

What’s New in WCAG 2.1 AA

New guidelines of WCAG 2.1 AA add a potential guide to the accessibility issues related to -

• Mobile devices
• Motor disabilities
• Cognitive disabilities
• Visual impairments

Most common guidelines (from newly added) applicable to most of the Websites: Though there are 12 new guidelines added new to WCAG 2.1 AA, the below highlighted (prefixed with *) guidelines are more common and applicable to the responsive websites —

1. * Orientation (1.3.4): Style your website so that it does not lock on or require a single display mode
2. Input Purpose (1.3.5): Make it so forms can autocomplete information for users.
3. * Reflow (1.4.10): Ensure someone can zoom in on your website without requiring scrolling or without causing a poor experience.
4. * Non-text contrast (1.4.11): All meaningful non-text content on your website should have sufficient contrast with the background.
5. * Text spacing (1.4.12): Make sure your text spacing is able to be adjusted without causing a poor experience.
6. * Content on hover or focus (1.4.13): Make it so any additional content (e.g. pop-ups, submenus) can be dismissed or remain visible if the user desires
7. Keyboard shortcuts (2.1.4): If you have a keyboard shortcut, make sure a user can either 1) turn it off, 2) there’s a way to add another key in the shortcut, and/or 3) have the shortcut only active while focusing on a specific component
8. Pointer gestures (2.5.1): Provide simple alternatives (e.g. single tap vs. swipe) to potentially complex finger motions on touch screens
9. Pointer cancellation (2.5.2): Provide a way to cancel the trigger when you click down on a mouse or press down/touch with your finger
10. * Label in Name (2.5.3): Make sure any programmatic labels you make are aligned with the corresponding visual text
11. Motion Actuation (2.5.4): For any functions that are activated by motion, provide a simpler, alternative means of action. Also, give users the option to turn off motion activation.
12. * Status Messages (4.1.3): When a status message appears, it should be coded with role or properties so that people using assistive technologies (e.g. screen readers) are alerted without losing focus

Connect with me on LinkedIn

Follow me @ Medium.com to get more insights and share your experience on Digital Accessibility best practices and solutions

Follow me @Tealfeed.com