WCAG 2.1 Accessibility

WCAG 2.1 – Supporting Accessibility Worldwide

Girijesh Tripathi September 20, 2018
Accessibility is a buzzword today, with minds across the globe thinking of how they can make their digital learning products more accessible according to international standards. Enter WCAG. WCAG (Web Content Accessibility Guidelines) is an internationally established set of guidelines for accessible content on the Internet. This act ensures that access to communications, services, and the information is protected as a fundamental human right. These guidelines are laid down to ensure the content is created for people with various disabilities and is accessible via multiple channels. The WCAG established by the World Wide Web Consortium (W3C), is the leading standards organization for the Internet. The previous version (WCAG 2.0) was published in 2008. At Magic EdTech we have evolved the Accessibility Center of excellence that focuses on a full-team approach for building 508 and WCAG 2.0 and 2.1 compliant experiences. WCAG 2.1 has seventeen new guidelines that focus on improving accessibility for users with cognitive disabilities and for users who browse websites on mobile devices like tablets and smartphones. wcag 2.1 guidelines
WCAG Success Criteria 1. Orientation – This criterion intends to ensure that content displays in the orientation (portrait or landscape) preferred by the user. The goal of this Success Criterion is for authors not to restrict content orientation, thus ensuring that it always matches the device display orientation. Following this guideline will help users with dexterity impairments who have a mounted device and low vision impairments to view content in orientations that works the best for them. 2. Input Control – This helps people recognize and understand the purpose of form input fields. When people fill in a web form, they are usually expected to provide information about themselves in various fields. Specifying what the expected data is in a particular field will make filling out forms easier, especially for people with cognitive disabilities. Following this guideline will help users with language and memory-related disabilities helping them benefit from browser auto filling personal information. It also assists users with motor impairments by reducing the need for manual inputs when filling out forms. 3. Personalization – This criterion intends to support customization and preferences so that more people can use the web, communicate, and interact with society. This success criterion requires the author to add the context, purpose, and meaning of symbols, regions, buttons, links, and fields so that user agents know what they do and can adapt them to make them understandable for the user. Following this guideline will help users with memory, focus, attention, and language-related disabilities. 4. Reflow – This guideline states that users must be able to browse a website seamlessly and that the sites must be responsive to different screen sizes. Following this guideline will help users with visual impairments who will zoom in on desktop browsers. 5. Non Text Contrast – This Success Criterion intends to ensure that active user interface components (i.e., controls) and meaningful graphics are distinguishable by people with moderately low vision. The requirement for high contrast extends from regular page text to text on interface components (buttons) as well as for colors used in the non-text content (infographics and diagrams). Following this guideline will improve accessibility for all users with different kinds of visual impairment. 6. Text Spacing – This ensures that people can override text spacing to improve their reading experience. For following this guideline, distances between paragraphs, rows, words, and characters must be able to be increased to certain values without leading to loss of functionality or loss of content. Following this guideline will improve accessibility for users with visual impairment and dyslexia. 7. Content on hover or focus – Additional content that appears and disappears in coordination with keyboard focus or pointer hover often leads to accessibility issues. This condition intends to ensure that the additional material does not interfere with viewing or operating the page’s original content. This condition allows additional content that may appear on hover of a target, to be seen when an individual hovers over the new content. Following this guideline will help users with low vision to view content using hover or focus without reducing their desired magnification. 8. Character Key Shortcuts- If a website supports keyboard shortcuts, one of the following three conditions must be met –
  • Shortcuts can be turned off
  • Shortcuts can also be configured by pressing keyboard keys like Ctrl, Alt, and Cmd
  • A shortcut for certain elements is only active when that element is focused on
  • Following this guideline will help users who have hand tremors and may easily press the wrong keyboard keys 9. Timeouts – When a timeout is used, users know what duration of inactivity will cause the page to time out and result in lost data. Following this guideline will help users with language-related, memory-related and focus or attention-related disabilities. 10. Animation from Interactions – This allows users to prevent animation from being displayed on Web pages. WCAG states that animations triggered by interaction must be able to be turned off unless the animations are essential for the functionality or the content being viewed. Following this guideline will help users with vestibular disorders. 11. Pointer Gestures – This guideline ensures that content can be operated using simple inputs on a wide range of pointing devices. Following this guideline will help users who cannot accurately perform complex pointer gestures to have alternative means for operating the content. 12. Pointer Cancellation – The goal here is to make it easier for users to prevent accidental or erroneous pointer input. For functionality that can be operated using a single pointer, at least one of the following is true –
  • The down event of the pointer is not used to execute any part of the function.
  • 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.
  • The up-event reverses any outcome of the preceding down-even.
  • Completing the function on the down-event is essential.
  • Following this guideline will help users with visual disabilities, cognitive limitations and motor impairments. 13. Label in Name – When people with disabilities rely on visual labels, with this guideline they can also use those labels programmatically. Controls are often labeled with visible text. To successfully use this guideline, text that is shown on interface components like buttons must be able to be read to users of assistive technologies like screen readers and also should be triggered by voice commands by users who take advantage of speech recognition software. 14. Motion Actuation – This guideline ensures that functions that are triggered by moving a device (for example, shaking or tilting) or by gesturing towards the device (so that sensors like a camera can pick up and interpret the gesturing), can also be operated by more conventional user interface components, unless the motion is essential for the function or not using motions or gestures that would invalidate the activity. Following this guideline will help users who may be unable to perform particular motions (such as tilting, shaking, or gesturing) because the device may be mounted or users may be physically unable to perform the necessary movement. This success criterion ensures that users can still operate all functionality by other means (e.g., touch or voice input). 15. Target Size – Target sizes should be large enough for users to activate them easily, even if the user is accessing content on a small handheld touchscreen device, has limited dexterity, or has trouble activating small targets for other reasons. Following this guideline will help users who have hand tremors, large fingers, or use mobile devices with touch input. 16. Concurrent Input Mechanisms – People can use and switch between different modes of input when interacting with web content. Following this guideline will improve accessibility for people with limited motor skills who prefer or must use a certain input mechanism even when it’s uncommon. 17. Status Messages – This allows users to be aware of important changes in content that are not given focus, and to do so in a way that doesn’t unnecessarily interrupt their work. Following this guideline will improve accessibility for users with visual impairment, especially for those who use screen readers and are likely to zoom in on a website. Disabilities covered under WCAG 2.1 disabilities under WCAG 2.1 QA checkpoints as per WCAG 2.1 Guidelines Our certified trusted consultants and testers produce reports that show precisely what a product needs to do to meet compliance with the following checkpoints especially in consideration for being compliant for WCAG 2.1
  • Content should be accessible in both the orientation Landscape and Portrait, in the case of mobile devices
  • Content should be presented on a page to the user without the use of horizontal or vertical scrollers
  • UI and Graphics objects should have at least 3:1 color contrast ratio
  • The spacing between the paragraph, words, and letters should be enough to distinguish them uniquely
  • Tooltip appearance on hovering the pointer over words
  • Character key shortcuts
  • Functionalities can be operated by device motion or user motion
  • Status messages should be announced on completion of a certain action
  • Magic EdTech expertise in WCAG 2.1 can benefit your corporation in designing accessible products and experiences. Contact us today to discuss how we can enable you to succeed!
    WCAG 2.0, WCAG 2.1, WCAG 2.1 Guidelines, Web Content Accessibility, Web Content Accessibility Guideline, Web Content Accessibility Guidelines 2.1
    Girijesh Tripathi

    As a lead consultant for accessibility testing at Magic EdTech, Girijesh is actively engaged in testing of new class digital accessibility solutions for education.