In the current torrent of web content development, it is fundamental to be inclusive and not marginalize any group. We shouldn’t go by, “All users are equal, but some are more equal than others”. It goes without saying that when developing a web app one should consider making it friendly for all groups of people, but more specifically people with disabilities.
World Wide Web Consortium (W3C) is an organization founded in 1994 and led by Tim Berners-Lee. It develops standards and guidelines to help everyone build a web-based on the principles of accessibility, internationalization, privacy, and security.
W3C created Web Content Accessibility Guidelines in 1999 and it has been updated several times since. One of the recent updates in Web Content Accessibility Guidelines 2.1 which was renewed in September 2023. So what’s WCAG 2.1 about?
WCAG 2.1 is a set of standards intended to make web content more accessible to people with disabilities. The guidelines follow “the rule of POUR”, perceivable, operable, understandable, and robust which are the factors web developers should follow while building an app. WCAG 2.1 addresses a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological.
.jpg)
Perceivable
The first principle of WCAG 2.1 is perceivability within the Web Content Accessibility Guidelines which makes sure that digital content is displayed in a way that can be perceived by all users, including those with disabilities. Perceivability covers many aspects of making content accessible, particularly for people with limited sensory perception, such as visual or auditory impairments.
One of the main requirements of perceivability is to offer text alternatives for non-text content. This entails having descriptive text for images, transcripts for audio content, and captions or subtitles for video content. These alternatives enable users who cannot see or hear the original content to access the information conveyed by it, ensuring a more inclusive experience.
Another aspect of perceivability is providing ample contrast between text and background colors. This is important for users with low vision or color blindness, as it increases readability and makes content easier to perceive. WCAG 2.1 provides specific guidelines for finding the appropriate contrast ratios to meet accessibility standards.
Moreover, perceivability requires having alternatives for time-based media. For example, writing captions for videos permits users with auditory impairments to grasp the spoken dialogue, while audio captions for visual content help users with visual impairments to understand the visual elements.
Perceivability also focuses on the significance of the presentation of the content in multiple formats or modes. This entails having alternatives for content that depends only on sensory features such as shape, size, or location. For example, providing tangible graphics with visual representations lets users with visual impairments access graphical information.
In general, the idea of perceivability is to have digital content attainable and available to users with various sensory disabilities by providing alternatives, increasing readability, and adapting various modes of perception. By sticking to perceivability guidelines, developers can create more inclusive and accessible experiences for all users.
Operable
The principle of operability of WCAG 2.1, makes sure users can interact with and navigate through web content effectively. Just like with perceivability, the principle of operability needs to include users with various disabilities such as motor impairments, cognitive disabilities, and those who use alternative input methods such as keyboards or voice commands. This principle covers several guidelines and criteria intended to make web content more user-friendly and navigable.
One of the main elements of operability was keyboard accessibility. This characteristic focuses on the functionality and interactiveness of a website and that it can be navigated with a keyboard alone, without a mouse or other pointing devices. Based on this, keyboard focus should be visible and logical and users should be able to effortlessly operate through interactive elements such as links, buttons, form fields, and more through keyboard shortcuts or tab navigation.
The second most important factor of operability is sufficient time. According to this, users should be provided with ample time to read and interact with content, such as time-limited content; slideshows, or auto-playing media. Users with cognitive or learning disabilities disorders who need more time to process the given information should be able to pause and stop the content.
The third crucial consideration for operability is avoiding content which can cause seizures and physical reactions. More specifically, this applies to users with photosensitive epilepsy. This implies that one should avoid flashing or rapidly changing content that could trigger seizures or discomfort in sensitive individuals.
Navigable content is the fourth element of operability. According to this factor, the web content should be presented in a predictable and consistent manner so that the users can navigate through it. This implies clear and consistent navigation menus and site structures, as well as making sure users can find important information without getting lost or disoriented.
Last but not least the web app should support input modalities, such as touchscreens, voice commands, and assistive technologies. This shows that users can navigate through the content using the input method best built for their abilities and preferences.
Understandable
The principle of understandability emphasizes the importance of making the web content clear, concise, and easy to grasp for all users, including those with cognitive, language, or literacy limitations regardless of their background, skills, or the technology they use to access the content.
Some of the key principles and guidelines of understandability are readable content, predictable navigation, input assistance, error prevention and correction, and consistent language and presentation.
Readable content implies that the language of the web content should be succinct and comprehensible, sans jargon and complex terms. The paragraphs shouldn’t be too long and should be presented in smaller chunks. There should also be an option to adjust text size and spacing for users with visual impairments or reading difficulties.
Predictable navigation indicates that the web app should maintain a consistent layout and organization, using descriptive and informative link text, and making sure that navigation menus and controls are predictable across different pages and sections.
Input assistance signifies that there should be assistance and guidance to users when filling out forms or interacting with input fields. Some examples of this are clear instructions, samples, and error messages to help users complete tasks accurately and efficiently.
Web developers should consider minimizing errors and having mechanisms for users to fix errors so that they will feel satisfied. This means validating user input in real time, providing clear feedback on errors, and offering suggestions for resolving issues without causing frustration or confusion.
Consistent language and presentation is another important factor. This means having consistent language, terminology, and presentation styles. Labels, instructions, and content should be presented homogeneously.
Robust
The principle of robustness implies that web content should be compatible with a wide range of user agents, including assistive technologies, different browsers, and various devices. The web content should be accessible and functional across various platforms, technologies, and evolving standards.
The aspect of compatible technologies indicates that web content is created through widely supported technologies that can be operated across different platforms and devices. Standard web technologies such as HTML, CSS, and JavaScript are examples.
Implementing the abilities of Accessible Rich Internet Applications (ARIA) to increase the accessibility and functionality of web content for users of assistive technologies is another aspect of robustness. ARIA transmits semantic information about interactive elements, dynamic content, and user interface controls, making them more accessible to screen readers and other assistive technologies.
According to progressive enhancement, web content should stay accessible and usable even in situations where certain technologies or features are not supported. Web developers should test web content across various browsers and devices to make sure it is rendered and functioning properly on all of them. Developers should also consider future changes in web technologies and be ready for this.
To summarize here is the checklist for WCAG 2.1:
-
non-text content
-
audio-only and video-only
-
captions (prerecorded)
-
audio description or media alternative
-
captions (live)
-
audio description (pre-recorded)
-
info and relationships
-
meaningful sequence
-
sensory characteristics
-
orientation
-
identify input purpose
-
use of color
-
audio control
-
contrast minimum
To find the full list visit here.
Several browser extensions comply to WCAG 2.1 standards:
-
Axe DevTools
-
Accessibility Insights for Web
-
Siteimprove Accessibility Checker
-
Google Lighthouse
-
Color Contrast Analyzer
-
ARIA DevTools
-
EqualWeb Accessibility Checker
WCAG 2.1 and Esterox
Esterox, as a web app development company has proven experience in implementing WCAG 2.1 accessibility standards since we worked on the Academy of Justice website (aoj.am) recently.
During this project, we used AInspector, a tool specifically designed for WCAG assessments within the Firefox browser. AInspector identifies three key categories of accessibility issues: violations, warnings, and manual checks.
-
Violations: Identify critical accessibility errors that may be a hindrance for certain user groups that want to access the content.
-
Warnings: Highlight potential accessibility barriers and limits that could block usability for people with disabilities.
-
Manual Checks: Flag areas where automated tools cannot identify accessibility and require the human factor.
While manual checks are common and require human review, Esterox prioritizes implementing them for a smoother user experience. These checks often involve clarifying content or functionality to enhance accessibility for users with diverse needs.
The POUR principles (Perceivable, Operable, Understandable, and Robust) are the foundation of WCAG 2.1 accessibility standards. At Esterox, the "Perceivability" factor is of great importance to us which will make sure that content is readily available to users with diverse sensory abilities. Here's how we applied this principle during our work on the Academy of Justice website (aoj.am):
-
Enhanced Color Contrast: We implemented a color contrast checker to ensure sufficient contrast between text and background colors. This is crucial for users with visual impairments, particularly those with low vision or color blindness. High-contrast combinations make the text easier to read and distinguish from the background, improving readability and reducing strain.
-
Readable Fonts: We carefully selected clear and legible fonts throughout the website. We avoided decorative or overly stylized fonts that can be difficult for some users to read and comprehend. Clean, well-defined fonts improve overall comprehension for everyone, but especially for users with dyslexia or other reading difficulties.
-
Proper Image Cropping: We made sure all images were properly cropped and resized to fit their assigned areas on the webpage. This eliminates the risk of important information being darkened or cut off, which can be disorienting for users with visual impairments or cognitive disabilities who rely on visual cues for navigation and understanding.
-
Static Downloadable Files: We replaced downloadable files which would appear upon having the cursor on them only with static versions. This ensures users with screen readers or assistive technologies can always find and access the files. Unpredictable changes in file location can be frustrating and hinder user flow for everyone, particularly for those who rely on assistive technologies to navigate websites.
By focusing on these "Perceivability" improvements, we made the aoj.am website more accessible and user-friendly for a wider audience, including people with visual impairments, cognitive disabilities, and other accessibility needs.
Key Takeaways
Having access to web pages and apps is everyone’s right regardless of their abilities. This is why it is important to follow WCAG 2.1 and make your web app compatible for people with disabilities whether those are auditory, visual, cognitive, and more. WCAG 2.1 follows the guidelines of POUR which is perceivable, operable, understandable, and robust.
These principles suggest that web content should always have an alternative for people with disabilities, for example, captions to videos for people with visual impairments. WCAG 2.1 guideline provides a much larger checklist that should comply with the web app, such as non-text content, identifying input purpose, use of color, and more.
There are also several tools and extensions that will assist you in making your web app friendly for people with disabilities, Axe DevTools, Accessibility Insights for Web, Siteimprove Accessibility Checker, and more.
Esterox as a company can help you with this as well since we have a proven case and experience of working with WCAG 2.1 and complying to them. We have recently worked on the web app of the Academy of Justice making it compatible for people with disabilities and following the WCAG 2.1 guidelines.