Website accessibility:
Building products
that speak the
language of
inclusiveness
Website accessibility: Building products that speak the language of inclusiveness
Lizaveta Batskalevich
UI/UX designer at Modsen Design Studio
One of the key virtues of pervasive digitization lies in the increasing accessibility of anything a person could dream of some 30-40 years ago. Education, employment, entertainment, you name it – is literally a click away. But is it so for all of us?
In(accessible) WWW
By relocating the epicentre of life to the web, we’re making it more convenient for people without disabilities while further exacerbating existing inequalities for 16% of the world’s population living with at least one sort of health impairment. In other words, every 1 in 6 of us might face barriers in accessing information, participating in online activities, and utilizing digital tools.
According to the study conducted by WebAIM, 96% of the top 1,000,000 website home pages had accessibility failures – around 50 errors per page. If to look at the overall tendency, the picture doesn’t get much better - since 2019, the number of webpages with detectable accessibility failures has decreased by only 1.5%.
Understanding WCAG
From the statistics above it might seem that website accessibility comes last in the list of priorities when it comes to digital product development. However, content accessibility regulations get tighter every year, indicating the growing attention to the issue of website inclusiveness.
WCAG (Website Content Accessibility Guidelines) serves as the primary source of rules and standards regulating website accessibility state. It is a comprehensive, regularly updated document every UI/UX designer must follow to finally shift the current state of content inclusiveness to the extent it allows people with various impairments, such as visual, auditory, motor, or cognitive disabilities, to perceive, understand, navigate, and interact with the content and functionality of a website.
Key accessibility metrics and how to apply them
The essence of WCAG 2.1 can be reduced to compliance with 4 core website characteristics and their sub-qualities to make sure the product you’re building is accessible to all sorts of users. To move from theory to practice, here are tips on how to ensure proper implementation of each guideline principle.
Perceivable
Provide alternative text for all non-text content, such as images, videos, and audio files, to ensure that users who cannot perceive them visually can still understand their purpose and context.
Adaptable
Design the website with responsive and flexible layouts that can adapt to various screen sizes and orientations. Use responsive design techniques, such as fluid grids and media queries, to ensure that content is displayed optimally on different devices and viewport sizes.
Distinguishable
Ensure that all visual elements, including text, images, and interactive components, have sufficient colour contrast to be easily distinguishable. Use colour combinations that meet accessibility guidelines and avoid relying solely on colour to convey information.
Operable
Ensure that all interactive elements on the website, such as links, buttons, and form fields, are easily accessible and operable using a keyboard alone, without requiring specific mouse actions or touch gestures.
Keyboard accessible
Test the website's keyboard accessibility by navigating through all interactive elements using only the Tab key and ensuring that focus indicators are visible and clearly identifiable. Provide keyboard shortcuts for frequently used actions and functionalities.
Time-sufficient
Allow users to control the timing of any time-dependent content or functionality, such as auto-playing videos or timed pop-up notifications. Provide options to pause, stop, or adjust the timing of such content to accommodate users who may need more time to interact with it.
“Provide alternative text for all non-text content, such as images, videos, and audio files, to ensure that users who cannot perceive them visually can still understand their purpose and context.”
Seizures and physical reactions
Avoid using content that includes rapid flashing, blinking, or strobing effects, as these can trigger seizures or physical reactions in users with photosensitive epilepsy or other sensitivities. Use animations and transitions sparingly and ensure they comply with accessibility guidelines.
Navigable
Design clear and consistent navigation menus and controls that are easy to locate and use. Provide descriptive labels and headings for navigation links and landmarks to help users understand their purpose and navigate the website efficiently.
Input modalities
Support a variety of input methods, including touch, keyboard, mouse, voice commands, and gestures, to accommodate users with different abilities and preferences. Provide alternative input options for tasks that may be challenging or impossible for some users to perform.
Understandable
Use clear and simple language throughout the website and provide explanations or instructions for complex content or functionality. Additionally, organize content logically and predictably to help users understand the structure and flow of information.
Readable
Use legible fonts, appropriate font sizes, and sufficient spacing to ensure that text content is easy to read and understand. Avoid using overly decorative or stylized fonts and provide options for users to adjust text size and spacing according to their preferences.
Predictable
Maintain consistency in the layout, design, and functionality of the website to help users understand how it works and what to expect when interacting with it. Provide clear and concise feedback for user actions, such as form submissions or error messages, to guide users through the process.
“Ensure that all interactive elements on the website, such as links, buttons, and form fields, are easily accessible and operable using a keyboard alone, without requiring specific mouse actions or touch gestures.”
Input assistance
Provide clear and concise instructions or prompts to assist users in completing forms or interacting with input fields. Offer suggestions or auto-complete options to streamline the input process and reduce errors.
Robust
Use standardized and semantic HTML markup, CSS, and JavaScript code to ensure compatibility with a wide range of user agents and assistive technologies. Regularly test the website on different browsers and devices to identify and address any compatibility issues.
Compatible
Ensure that your website or application works seamlessly across different devices, browsers, and assistive technologies. Test your website on various platforms and screen readers to ensure compatibility and usability for all users.
Out of business necessity or moral imperative
For designers like myself and my fellow Modsen Design Studio colleagues, following web accessibility guidelines is far from being “extra”, it’s a norm. Working on projects of various scales and industry specificities, we always strive to make sure stakeholders understand the vital necessity of web product accessibility optimization. Not only because we root for the shrinking of the digital divide that doesn’t allow users with health impairments access the necessary content and services but also because website accessibility has a tremendous impact on market coverage and overall business profitability.
According to the available data, 40% of business owners say that accessibility was named as one of the reasons for product or service purchase by customers with disabilities, 62% of whom own a laptop or desktop, while 72% own a smartphone.
The final thought
Website accessibility opens the door to a non-discriminative digital world where every user is cared for and every business has broader market reach opportunities. At Modsen, we make sure that the products we ideate and design comply with the best available accessibility practices to help businesses provide inclusive digital experiences for all.