Ripplecore guidelines
Accessibility
Watermark is committed to making our digital experiences usable for all. Accessibility is the means by which this commitment to inclusion can be achieved, ensuring that our products are usable regardless of ability.
We often think of accessibility as accommodating people with disabilities, but its scope is far broader and more nuanced. Disabilities can be permanent, temporary, or situational, affecting a wider range of individuals than commonly assumed. Watermark users may rely on various assistive technologies or personal browser adjustments to navigate the digital world.
While addressing this diverse array of needs might seem overwhelming for developers and designers, adhering to a few key practices can significantly enhance the experience for all users. By embracing inclusive design practices, we create digital environments that are more usable, flexible, and beneficial for everyone – regardless of their abilities or circumstances.
Ask Ripple
The Ripple team consolidates accessibility guidelines and best practices to support your work. If you have questions or need assistance, don't hesitate to reach out. We're here to help ensure your solutions are inclusive and user-friendly.
What is Accessibility?
“The design of products, devices, services, vehicles, or environments so as to be usable by people with disabilities.”Digital.gov
The expression "people with disabilities" can be somewhat misleading, as it conjures the idea of a set group of people with special needs. Accessibility, then, would be the work we do for them. A more inclusive way to think about accessibility is to consider it the work we do for ourselves. Having a disability doesn't cast a person in a "disabled" category apart from the rest of us.
Cultural prejudice tends to make us think of disability as the attribute of a person: Historically, we considered a blind person to be disabled because she cannot see. But disability is always related to a situation. A person who is blind is not disabled when listening to the radio or talking on the phone. But in certain situations, her condition will make it hard or impossible to do certain things, like crossing a busy street or reading a restaurant menu.
Types of Disabilities
Disabilities can be situational, temporary or permanent. Break a leg, and you're temporarily disabled. You're also disabled when you're texting while carrying your groceries or straining to see something on your phone in full sun.
| Permanent | Temporary | Situational | |
|---|---|---|---|
| Touch | Paraplegia | Broken Arm | Broken Mouse or Trackpad |
| See | Blindness | Migraine | Misplaced Eye Glasses |
| Hear | Deaf | Ear Infection | Noisy Room |
| Speak | Non-Verbal | Laryngitis | English as a Second Language |
It is not our responsibility to ensure our content can be read by someone with a broken computer or who has lost their glasses. However, when we define disability as a mismatch between what a situation requires and a person's abilities, we can clearly see how accessibility helps in many ways - sometimes not initially foreseen or intended. The typical example in the built environment is the curb cut. Initially designed to help wheelchair users, curb cuts make road crossing easier for people with suitcases, strollers or shopping trolleys. By focusing on the variety of uses, accessibility improves the experience for all.
| Disability Type | Problem | Solution |
|---|---|---|
| Low Vision | “I can’t read the light colored text on the white background.” | Use sufficient contrast |
| No Vision | “I don’t know what the input I am focused on is for.” | Use proper semantics to associate a form with its label |
| No Audio | “I can’t listen to the audio recording.” | Provide a transcript as an alternative way to present audio information |
| Motor Skills | “I struggle clicking links because it requires precise cursor control.” | Ensure the user can navigate the page with the tab key |
| Cognitive | “I don’t understand why my input was rejected.” | Ensure the user is notified at the appropriate moment and in a clear way for validating inputs |
Disabilities and assistive technologies
The web's inherent flexibility defies assumptions about how content is accessed. Screens come in all sizes, from smartwatches to large monitors, making responsive design the norm. There are many web browsers — somewhere between 20 and a hundred — and some of them do not display content as you might expect (one of the oldest, Lynx, is text-only). The advent of touch screens has long ago dispelled the idea that users relied on a physical keyboard and a mouse. People with disabilities may also rely on specialized hardware or software to access the web, known as assistive technologies.
Key assistive technologies to consider:
-
Screen Readers
Convert text to speech or braille for visually impaired users.
-
Screen Magnification Tools
Enlarge on-screen content for those with partial vision.
-
High Contrast Modes
Adjust color schemes to improve readability.
How to Make Content & Products Accessible
Web accessibility can be very technical, but a lot of issues can be prevented simply by keeping in mind the diversity of uses and applying a few basic principles.
Designers
On the design side, providing sufficient contrast, including alternative text for images, and ensuring that interactive elements are large enough and clearly identifiable already goes a long way.
Developers
On the development side, writing semantic code and multimodality (always offering the user several ways to get or input content) addresses the majority of issues.
Ensure sufficient contrast
Adequate contrast between text and background colors helps users distinguish information easily, reducing eye strain and improving overall usability. To handle contrast effectively, designers and developers should aim for a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text, as recommended by WCAG guidelines.
Use a contrast checker tool to verify your color choices, and consider offering high-contrast modes or user-adjustable contrast settings. The color combinations presented on Ripple’s Color Page all pass WCAG's requirements.
Make text legible
Large and/or enlargeable text and images enhance overall user experience. Use relative units like em or rem for scalability across devices and to respect user preferences.
Optimize target size
Target area size impacts users with motor impairments, touchscreen users, and general usability. Adequately sized clickable elements (like buttons, links, and form controls) ensure easier interaction, reducing errors and frustration.
- Aim for a minimum touch target size of 44x44 pixels for mobile devices.
- Ensure sufficient spacing between interactive elements to prevent accidental clicks.
- Make the entire button area clickable, not just the text.
Ensure visible keyboard focus and proper tabbing sequence
Keyboard focus is essential for users who do not or cannot use a mouse or other pointing devices. Proper focus management allows these users to interact with all elements of a page efficiently and understand their current position.
- Provide visible focus indicators with sufficient color contrast that stand out against the background.
- Ensure all interactive elements are focusable and can be activated via keyboard. (Non-interactive elements should not be part of the tabbing sequence).
- Ensure the focusable elements have the proper semantics so they are properly announced by screen readers (Native elements have an implicit ARIA role).
- Maintain a logical tab order that follows the visual layout of the page.
- Avoid focus traps that prevent users from navigating away from an element.
- Use skip links to allow keyboard users to bypass repetitive content.
Write semantic code
Semantically structured HTML, coupled with descriptive image alt text, and meaningful link labels significantly enhance web accessibility. These practices particularly benefit visually impaired users who rely on screen readers or braille displays to navigate digital content.
Convey information in different ways
Information must be conveyed in different ways for people with different abilities to access it.
"Multimodality" is a little-known concept in accessibility, but it points at something that any accessibility practitioner knows: information conveyed in only one way will inevitably be inaccessible to the people who cannot perceive that particular way. Therefore as web designers and developers we should develop the habit of checking that the content is always provided in several ways.
There is some overlap between multimodality and semantic code: semantic code enables multimodality because making our documents machine-readable allows browsers and assistive technologies to render them in various ways. However, semantics alone are not sufficient. Multimodality also requires that the data from a graph, for example, be presented in a table.
Embracing Accessibility
Accessibility should be viewed as an integral aspect of web design and development, no different from usability, aesthetics, or functionality. In each of these areas, our goal is not to achieve perfection, but to continually improve the user experience for everyone.
As we learn to identify and address accessibility issues, we contribute to a more inclusive experience, ensuring Watermark products are usable by all. Let’s embrace accessibility as a shared responsibility and strive to create a more equitable web, one enhancement at a time.
Resources
Related Blog Posts
-
Focus trap
We recently updated Ripple's Modal component to use the new dialog element under the hood and noticed it handled focus trapping slightly differently from what we were used to (and the way we had implemented it in Ripple). -
WCAG 2.2 In Review
Version 2.2 of the Web Content Accessibility Guidelines (WCAG) was published as a “W3C Recommendation” Web Accessibility Standard on October 5, 2023. The update removes a success criterion and adds nine new ones.
