Web A11y: WCAG’s 4 Principles and 13 Guidelines For Web Accessibility

Web A11y — Stepping Towards an Inclusive Digital World for All

Cover Picture — The 4 Principles and 13 Guidelines For Web Accessibility

Web Content Accessibility Guidelines (WCAG) is an international standard that provides principles, guidelines, success criteria and techniques for making the web content accessible. Here, the term ‘web content’ refers to any information in a web-page or web-application including text, images, media and client-side code for developing user interface and interactions. WCAG 2.1 has defined 13 Guidelines and categorized them under the 4 foundational Principles for Web-Accessibility. This blog summarizes these 4 Principles and 13 Guidelines recommended for ensuring web-accessibility while developing products.

The 4 Principles of Web Accessibility — POUR (Perceivable, Operable, Understandable, Robust):

1. Perceivable (P): Users should be able to easily perceive the web content and user interface through their senses — sight or hearing.
2. Operable (O): Users should be able to easily navigate and operate the interactive elements in the web-application.
3. Understandable (U): The content and functionality of the web-application should be easily understandable.
4. Robust (R): The web content should be robust such that various user agents including browsers and assistive technologies like screen readers etc. can interpret and parse the content correctly.

Guidelines for Web Accessibility:

WCAG2.1 has provided 13 guidelines to ensure accessibility while developing products. These guidelines are categorized into the 4 foundational principles of web-accessibility as follows:

Guidelines for ensuring web-content is Perceivable:

• 1.1) Text Alternatives: Provide the equivalent text alternative for any non-text information including images, user interface controls and input fields.
• 1.2) Time-based Media: For time-based multimedia information like video and audio, provide the equivalent alternatives like captions etc. which can be interpreted by assistive technologies.
• 1.3) Adaptable: Web-content should be easily presentable in different forms while keeping the original meaning of the content intact.
• 1.4) Distinguishable: Web-content should be easy for users to see or hear. For example: there should be a high contrast between foreground and background colors such that they are easily distinguishable.

Guidelines for ensuring web-content is Operable:

• 2.1) Keyboard Accessible: All user interactions (including mouse-click interactions and controls) of the web-application should also be completely accessible from the keyboard.
• 2.2) Enough Time: Provide sufficient time to users for viewing time-based content. Also, provide controls to modify the time-limit (pause, rewind, stop etc.).
• 2.3) Seizures and Physical Reactions: Do not show any content which may cause seizures or physical reactions. For example: Any content should not flash more than three times within 1-second.
• 2.4) Navigable: Enable users to easily navigate and obtain content in the web-application.
• 2.5) Input Modalities: Operating the functionality of web-application using input options beyond keyboard (for example: sensors etc.) should be made uncomplicated.

Guidelines for ensuring web-content is Understandable:

• 3.1) Readable: The text and language of the web content should be readable and understandable.
• 3.2) Predictable: Ensure that the operations like navigation, content focus etc. are consistent and predictable throughout the web-application.
• 3.3) Input Assistance: Provide suitable content to users such that they can avoid errors while operating the web-application. Also, include suggestions in order to enable users to identify and correct any errors.

Guideline for ensuring web-content is Robust:

• 4.1) Compatible: Make the content compatible with a wide variety of user agents including browsers, devices and assistive technologies like screen readers.

References and Resources:

• Web Content Accessibility Guidelines (WCAG) 2.1
• W3C — Web Accessibility Initiative (W3C-WAI)

Thank you for reading this blog. Click the link below to continue reading my next blog on 11 Best Practices and Techniques for Developing Accessible Web-Applications:

Web A11y: 11 Best Practices and Techniques for Developing Accessible Web-Applications

You can also click below to read my previous blog about What is Web Accessibility and Why Digital Inclusion Matters:

Web A11y: What is Web Accessibility and Why Digital Inclusion Matters