Key Takeaways
- Inclusive design is a priority: Regulations in the EU and in the US include web and mobile accessibility, making it crucial for products to be usable by everyone, including people with disabilities.
- Accessibility benefits everyone: Not just those with permanent disabilities – but also users with temporary challenges – leading to better retention, engagement, and satisfaction.
- A look into WCAG requirements: Accessibility requirements ensure digital content is perceivable, operable, understandable, and robust, enabling all users to effectively interact with products and services.
- Ensuring accessibility in white label products: Educating clients, providing clear guidelines, and offering proactive support help dacadoo maintain compliance despite providing configurable technology.
What is accessibility and why does it matter?
Accessibility in the digital world translates to designing the experiences of websites and apps so that everyone, including people with disabilities, can use them with ease. According to the Web Content Accessibility Guidelines (WCAG), this involves making sure content is easy to see, hear, and interact with for all users, including those using assistive technologies like screen readers or alternative input devices.
Accessibility is built on four key principles – content should be perceivable, operable, understandable, and robust (POUR).
Image 1 – Explanation of the POUR principles of accessibility guidelines. The POUR principles stand for Perceivable (content must be available to the senses: sight, hearing, touch), Operable (users must be able to navigate and interact with the content.), Understandable (information and user interface operation must be clear and predictable) and Robust (content must be robust enough to be interpreted by a wide variety of user agents, including assistive technologies).
Often, these requirements get overlooked for the sake of aesthetics or virality and the user needs of minority populations get deprioritized due the fast-paced society tendency to put profit as the main driver for decision making. This results in initiatives like accessibility compliance to remain forever the backlog.
However, when applied to the real-world, accessibility regulations don’t only benefit those with permanent disability. Temporary limitations such as a broken arm, migraines, pregnancy or even carrying too many shopping bags are everyday situations that reveal an entirely new category of users.
Ultimately, making products easy to access when you need to get the job done leads to higher retention, engagement and overall user satisfaction.
Apart from usability needs, applying accessibility guidelines improves Search Engine Optimization (SEO), making the discoverability of digital products much higher.
Applying accessibility requirements
In a nutshell, according to the above-mentioned POUR principles (Perceivable, Operable, Understandable & Robust), some of the most relevant guidelines for digital products are:
- Providing text alternatives (alt text) for images and multimedia content, with captions and audio descriptions.
- Ensuring adaptable layouts, sufficient contrast, and no reliance on color alone for meaning.
- Making content fully operable via keyboards and allow for multiple input methods, with clear navigation and sufficient time.
- Using clear, simple language, predictable interactions, and input assistance (like error messages).
- Following valid coding standards for compatibility with assistive technologies (like OS accessibility settings support).
To assist compliance categorization, the WCAG uses conformance levels– A, AA, and AAA– to define how accessible a website or digital experience is. Each level builds on the previous one, with more comprehensive requirements.
- Level A focuses on basic accessibility: text alternatives, keyboard access, color use, basic structure.
- Level AA enhances usability with better contrast, captions, navigation, error support, and input recognition.
- Level AAA pushes for highest accessibility: more descriptive aids, full customization, simplified content, and advanced support.
Here’s a more extensive list of the requirements to be considered:
Level A | Level AA | Level AAA |
Perceivable | – Text alternatives for image & video (alt-text/captions) -Code should be clean and hierarchically accurate – Correct reading sequence – Device orientation support | – Higher color contrast (4.5:1) – Text can be resized – Avoid images of text – Text spacing | – Sign language – Extended audio description & alternatives – Highest color contrast (7:1) – Custom visual presentation |
Operable | – Keyboard accessible – No keyboard traps – Adjustable time related controls – Pause/stop for moving content – Allow to skip repeated content – Clear page titles – Logical focus order -Alternative input methods for complex gestures | – Visible focus – Multiple ways to navigate – Headings/labels – Target size (24x24px) | – All keyboard access – No timing limits – Control of interruptions – Enhanced target size (44x44px) – No flashes – Section headings organize the content |
Understand-able | – Language identified – On focus/input consistency – Error identification and instructions | – Consistent navigation/identification – Error suggestions – Error prevention for critical actions | – Reading level simplified – Context sensitive help – Error prevention for all inputs |
Robust | – Valid markups – Accessible name/role/value | – Status messages can be programmatically determined | Same as AA |
The above table is a simplified summary for the sake of this article. Refer to the WCAG 2.2 for the full breakdown.
At dacadoo we applied these guidelines across our platform and continue working with every release to ensure our products can be used by everyone.
Let’s look at some examples of how these guidelines changed our approach to our interface design.
Image 2 – A side-by-side comparison of a water tracking card where the older version requires dragging a button to mark as done, and the new version replaces it with a simple tap button.
- In the image above, we can see how a dragging gesture is replaced by single tap control. This ensures any user can mark their health objectives as done by offering alternative input methods for complex gestures, as part of the Operable principle of accessibility.
- This change adds a text label to the action, making it easier to be read by screen readers, as well as users themselves, since icons might not provide enough context to an action.
- Our primary color has also been darkened to respect the contrast ratio.
Let’s look at another example:
Image 3 – A comparison of the Wheel of Life component, where the previous version uses a complex layout with multiple touch zones and unclear progress indicators, while the new version presents a simplified, more accessible layout with clear progress and direct-action buttons and explanations.
The Wheel of Life is one of dacadoo’s most iconic features, so it’s a delicate challenge to tackle. There were several violations of the WCAG guidelines to address in the older version:
- Although the target area of each button (slice of the Wheel) was large enough, the order in which they were laid out made it extremely hard and confusing to navigate with external keyboards (this violates the “Operable” principle).
- There was no indicator of progress beyond the colors used inside each slice (this violates the “Understandable” principle).
- The color contrast was not sufficient (this violates the “Perceivable” principle).
To solve the above-mentioned violations and improve other usability issues, we applied the following improvements:
- All links were removed from the Wheel of Life simplifying the purpose of the Wheel from serving as multi-entry point navigation menu to a simple data visualization graph about health.
- Cards with the written score and explanations to each area were added with an extensive description to aid context and serve as an alt-text replacement of the visual representation in a meaningful way.
- The color contrast was properly adjusted.
- The hierarchy and order of the information now is more appropriate to the guidelines and to the importance of the subjects being covered on this page.
Accessibility of White Label Products
At dacadoo we provide a white label solution to our clients in need of a fast delivery platform.
The configurability options of our platform pose a risk to the accessibilities guidelines we strive to maintain. Clients are able to change several assets (primarily visual) to better represent their brand identity, which may lead to violations of some of the legally mandated AA requirements.
Here are some steps we take to ensure our clients fulfill the necessary criteria:
- We pre-onboard our clients to any upcoming changes we are making – this allows us to receive early client feedback, but it also gives our clients context on why we make certain changes. It also initiates an educational loop, especially about the topic of accessibility and its importance.
- Whenever possible, we focus on educating our clients – whether when there are questions or feedback, we provide them with the relevant documentation and source material for their own research.
- We are actively documenting all the necessary AA requirements that are applicable to our platform, and we share it as a guide to clients to brand their platform – this simplifies the framework to all parties.
- As part of the point above, we also include guidance and support through our internal tools that help administrators manage their platforms – contextual help when it’s needed most is the fastest and most useful way to remove friction and prevent errors.
Conclusion
In conclusion, designing for accessibility is not just a regulatory obligation—it is a moral and practical imperative that benefits everyone. By adhering to guidelines like WCAG and embedding inclusive practices into both design and development, we can create digital products that are equitable, usable, and delightful for all users. dacadoo’s proactive approach, combining rigorous internal processes, client education, and continuous improvement, demonstrates our commitment to making accessibility an integral part of the user experience. Together, we can build a digital world that truly leaves no one behind.
Contact dacadoo to learn more on how we can integrate accessible products into your organization.