Web accessibility has come a long way from its humble beginnings. Today, it’s not a luxury afterthought as it once was but a necessity. Ensuring that websites and web applications are accessible to everyone, regardless of their abilities or disabilities, is a fundamental aspect of creating a more inclusive online environment.
This is where the Web Content Accessibility Guidelines (WCAG) come into play, serving as a globally recognized standard for web accessibility. The WCAG provides a comprehensive set of guidelines and principles designed to make web content more inclusive.
In this article, we'll delve into the intricacies of how progressive web apps (PWAs), a cutting-edge approach to web development, inherently align with these accessibility principles. What exactly makes them so well-suited for building accessible web products? Read on to find out.
What are the WCAG?
The WCAG are a set of internationally recognized guidelines for web accessibility. They’re designed to make web content easier to consume, interact with, and navigate through for people with a wide range of disabilities.
Why the WCAG matters
Over the years, the WCAG has become the gold standard when it comes to matters of accessibility. Adhering to its recommendations is, first and foremost, a good design practice. It’s a clear sign that you’re aware of the unique needs of some of your users and are willing to go the extra mile to accommodate them.
However, it can also win you favors with your robotic friends. WCAG-compliant web content is easier to read by web crawlers and, on top of that, also deliberately promoted by the major search engines. You can read all bout the importance of accessibility in eCommerce applications in our dedicated eBook.
How PWAs implement accessibility principles
The WCAG are organized around four core principles. Each of them is then broken down into a set of precise guidelines and success criteria that come into play to determine accessibility. Let’s take a look at each of those principles and see how they apply to PWA technology.
1. Perceivable
The first PWA principle focuses on ensuring that web content is perceivable by all users, regardless of their sensory abilities. In simpler terms, this comes down to presenting content in a way that users can consume it through different senses, such as sight and hearing. When they’re deficient in one of the senses, there are always others to fall back on.
As a negative example, this is an imperceivable piece of content. No matter how many different senses you engage, it’s impossible to make sense of it anyway.
Example of imperceivable content. Image source: Fulcrum
The key guidelines under this principle include:
- Text alternatives: provide text alternatives for non-text content, like images and multimedia. This ensures that screen readers and other assistive technologies can convey the content to users.
- Time-based media: provide captions, transcripts, and audio descriptions for multimedia content to make it accessible to users with hearing or visual impairments.
- Adaptable content: create content that can be presented in various ways, including with different screen sizes and orientations, without loss of information or functionality.
- Distinguishable content: ensure that text and images have sufficient contrast to make it easier for users with low vision or color blindness to perceive content.
What makes PWAs perceivable
Text alternatives
PWAs encourage the use of structured and semantic HTML. This is because PWAs are designed to work well on different devices and platforms, which means they rely on proper HTML markup.
This makes it easier to provide text alternatives for non-text content, such as images and multimedia. By following best practices for HTML markup, PWAs make it easier for developers to include descriptive alt text for images and other non-text elements. In turn, PWAs’ nature ensures that users with disabilities can access this content.
Adaptable content
One of the key characteristics of PWAs is their responsive design. PWAs are built to adapt to various screen sizes, resolutions, and orientations. This adaptability aligns with the principle of adaptable content and allows users to access the content in ways that suit their individual needs and preferences. They can switch between different devices or screen sizes without losing access to the information to ensure that content remains perceivable.
Compatibility
The essence of compatibility is ensuring that content is perceivable by users with disabilities who may use specialized browsers and assistive devices. PWAs are designed to work across various browsers and platforms, including popular screen readers like VoiceOver, JAWS, and NVDA. They can also integrate with voice recognition and voice search technologies.
2. Operable
This principle focuses on making web content operable for all users, including those with mobility or dexterity impairments. It addresses aspects related to how users navigate and interact with web content.
What do I mean by this? The principle might be best illustrated by a bad user interface (UI) in action. So, here’s an example of an input field that’s very inoperable for you to play with.
The key guidelines that will help you avoid designing an interface as above include:
- Keyboard accessibility: ensure that all functionality is operable via keyboard, keeping in mind the fact that some users may not be able to use a mouse.
- Provide sufficient time: give users enough time to read and use content. Provide options to adjust or extend time limits for time-based interactions.
- Navigable: ensure that users can easily navigate and find content, such as through a clear and consistent navigation structure.
What makes PWAs operable
Keyboard accessibility
PWAs inherently promote keyboard accessibility. They’re designed to work seamlessly across a number of devices, including those with keyboard-only input or limited mouse/touch interaction. The focus on responsive design and ensuring that all interactive elements are operable via keyboard results in quality-of-life improvements for users with mobility or dexterity impairments. They can reliably lean on keyboard shortcuts and tab navigation to access and control PWA features.
Responsiveness and adaptability
PWAs are built to be responsive and adaptable to various devices, screen sizes, and orientations. This ensures that users can interact with the PWA using different input methods, including keyboards, touchscreens, and mouse devices. The flexibility in design and interaction options aligns with the principle of providing alternative ways to interact with content.
Navigational consistency
PWAs are rooted in mobile apps and share a general design philosophy with them. This is important because you could argue that mobile apps have mastered the art of consistent and predictable navigation like no other type of software. No matter what app you’re using, you can expect the key navigational elements and gestures to be similar if not identical.
PWAs largely continue this approach. This is essential for users with disabilities because it helps them easily find and move around the content. Clear menus and headings, and a logical layout within the PWA all contribute to an intuitive and “navigable” user experience.
Offline capabilities
The ability to work offline is one of the PWAs’ key selling points. It’s also highly relevant to our discussion on accessibility, though not in an obvious way. It doesn’t improve accessibility in its typical understanding; the notion of working offline is irrelevant to improving the experience of users with disabilities.
However, it can be a game-changer for a massive group of users who are disadvantaged in another way, namely those with limited or unreliable internet access. PWAs can be a crucial stepping stone in bringing certain experiences to users from developing countries that would otherwise need to be completely excluded.
3. Understandable
This principle is about making web content understandable to a diverse audience, including those with cognitive disabilities or limited language proficiency.
Here’s another challenge for you: create an account on this website.
It wasn’t particularly easy, was it? If you’d rather avoid creating such an abomination, the key guidelines for building understandable web products include:
- Readable content: create content that is easy to read and understand. This includes clear and simple language, consistent navigation, and intuitive interactions.
- Predictable: make user interactions and the behavior of the website consistent and predictable.
- Input assistance: provide helpful error messages, suggestions, and instructions to assist users in completing forms and other interactive tasks.
What makes PWAs understandable
Readability and simplicity
With an underlying focus on being lightweight, PWAs tend to emphasize clear and simple design principles. They prioritize clean, uncluttered layouts and user-friendly interfaces. This approach makes content more readable and understandable, and benefits users with cognitive disabilities or those who may have difficulty processing complex information.
Input assistance
PWAs can provide helpful input assistance, including clear and concise error messages, suggestions, and instructions. This is essential for users who may need additional guidance or clarification when filling out forms or completing interactive tasks. Providing input assistance ensures that all users, including those with cognitive or learning disabilities, can successfully interact with the PWA.
Customizability
Though they aren’t as robust as native apps, many PWAs still offer options for users to customize fonts, colors, and other display settings. This level of customization is beneficial for users with various preferences and needs because it allows them to adapt the PWA to their specific requirements. For example, users with low vision can increase font sizes or choose high-contrast color schemes for better readability.
4. Robust
Finally, the principle of robustness focuses on ensuring that web content can be reliably interpreted by a wide variety of clients, including current and future technologies. This involves adhering to established web standards and using clean, well-structured code to maximize compatibility.
Here’s an example of an interface that lacks robustness:
Example of an interface that lacks robustness. Image source: Reddit
There’s just one major guideline that you need to follow if you’d rather not create this kind of user experience:
- Compatibility: design and code web content to be compatible with a range of clients, including assistive technologies and different web browsers.
What makes PWAs robust
Compatibility with various clients
PWAs are designed to be compatible with a wide range of clients, meaning different web browsers and devices. This compatibility ensures that users can access and interact with the PWA using their preferred technology. It aligns with the principle of robustness by reducing the risk of incompatibility issues.
Adherence to web standards
PWAs encourage the use of standardized web technologies and best practices. They’re built using HTML, CSS, and JavaScript, adhering to established web standards. By following these standards, PWAs increase the likelihood of their robust compatibility with current and future clients and assistive technologies.
Progressive enhancement
PWAs are typically built in accordance with the philosophy of progressive enhancement. This approach emphasizes building web experiences that first work on a basic level and then get enhanced progressively with more advanced features for capable clients. It ensures that the core functionality of the PWA is available to a wide range of users, regardless of their technology or assistive devices.
Maintainability and updates
PWAs are designed with ease of maintenance and updates in mind. This means that when new web standards or technologies emerge, PWAs can easily keep up to remain compatible and functional. By staying up to date with evolving web technologies, PWAs support the long-term robustness of their accessibility features.
The ability to seamlessly introduce updates by developers is another layer of accessibility that’s worth mentioning. PWAs function outside of the app store ecosystems, which means that they aren’t bound by the lengthy approval processes that native apps need to go through with every update. Because of this, PWA developers can respond to bugs or other problems almost instantly.
PWAs are inclusive by design
PWAs are more than just a buzzword. They represent a user-centered approach to web development that inherently supports many facets of the WCAG guidelines. As we explored each of the four WCAG principles, perceivable, operable, understandable, and robust, we saw how PWAs naturally embrace accessibility.
Building your products with PWA technology makes web content more inclusive, responsive, and compatible with various clients and assistive technologies. The core building blocks of PWAs seamlessly align with the principles of accessibility, which benefits users with disabilities but also enhances the overall user experience for a diverse audience. As an example of a major PWA-centered product, you can see how these principles come together to create an accessible experience in SAP composable storefront.
Of course, you can design any piece of software to be compliant with the best practices of accessibility. However, some of them are inherently better suited for this task than others, and PWA technology is certainly one of those cases. If you’re interested in implementing this technology in your business, make sure to get in touch.
Published November 8, 2023
