The design process constantly evolves. It’s now basic knowledge that extensive research phases and low-fidelity wireframes are essential before designing a visual user interface. Soon (I hope!), the same importance will be placed on including digital accessibility in these processes.
What is accessibility and why should you care?
Digital accessibility is about making websites and digital services that can be accessed and used by everyone. While this term addresses primarily people with disabilities, it also applies to older adults, neurodivergent individuals, or those with temporary limitations, such as mobility limitations. The goal is to ensure equal access to information and functionality of a product or service for all users, regardless of their abilities.
The simplest answer to the question "why" is quite pragmatic: to meet legal requirements. Many countries have regulations requiring websites and applications to be accessible to people with disabilities. Examples include the Americans with Disabilities Act (ADA) in the United States and the European Accessibility Act (EAA) in Europe.
❗️ Good to know
It’s worth noting that the EAA applies to any business that wishes to trade in the EU, wherever it is based. It requires implementing digital accessibility standards by June 28, 2025. The directive covers commonly used hardware and software products, websites and mobile apps, and various online services in such areas as communication, commerce, finance, education, and transportation.
Nonetheless, fostering digital accessibility is not just about following the law. It represents an ethical best practice that enhances the overall user experience and broadens the potential audience, ultimately leading to more business opportunities.
In the end, digital accessibility is a fundamental right, and creating accessible products is a crucial step toward building a more inclusive society.
Most of the responsibilities related to preparing an accessible product fall on designers and developers.
Who is responsible for an accessible digital product?
While the entire team shares the responsibility for implementing accessible design, the primary responsibility rests with the designer.
During the design stage, the design team makes important decisions that significantly impact the product's usability for all users. Designers create interfaces that need to be intuitive and easy to navigate, taking into account the needs of people with various limitations.
A well-prepared design with additional descriptions and annotations for the rest of the team directly impacts the quality of implementation by developers and the accuracy of content prepared by content designers.
The more details are considered at the design stage, the easier, faster (and cheaper) it will be to code and test later.
What part of accessibility lies on the designer's shoulders?
Contrary to the popular understanding of accessible design, a designer's role doesn't end with choosing properly contrasting colors and legible fonts. Meeting the WCAG (Web Content Accessibility Guidelines) criteria at an intermediate AA level requires a much deeper understanding of the topic.
Check out key considerations for inclusive design👇
Information structure
Clear structure of headings and content hierarchy throughout the project – annotations for the developer about the heading levels (H1, H2, H3) are always welcome.
Consistent navigation throughout the site – regardless of where the user is, the order of the menu, footer, and other navigation elements remains the same.
Users will undoubtedly appreciate more than one way to locate a certain page (e.g. using the main menu, footer, breadcrumbs, or site map).
Buttons, CTAs, links, and icons – it’s nice to ensure they are legible, consistent, and clearly indicate where they lead or what action they trigger. This significantly eases the use of the site for blind users and those with cognitive impairments.
The order of elements, as well as their functionality, should be the same for both desktop and mobile versions. For example, tag filtering under the page header on wide screens should not change into an accordion at the top of the phone screen.
Visibility and colors
Color-coded information is helpful, but it's important to provide an additional way to understand the content. For instance, you can use symbols or text descriptions to indicate status instead of relying solely on color.
Hyperlinks should be clearly marked, preferably using both color and underlined text.
Appropriate contrast between text and background – take into account different situations and placements. For example, consider color changes on hover or the use of a colorful scalable image as the background.
Thoughtful keyboard focus style – something not visible at first glance but is crucial for users who navigate using a keyboard.
Spotify uses a color and a dot symbol to indicate the selected function.
Animations
Moving elements on the page such as automatic scrolling, cursor chasing, or slide changes can easily distract and confuse users with cognitive disabilities. If such elements exist, it’s worth adding controls for start, pause, and next/previous options.
It’s good practice to include a button in the accessibility menu to stop all decorative animations on the page – including hovers, autoplaying sliders, or marquees.
Quick flashes or blinks in decorative elements and video materials can cause seizures. To ensure that designed materials are safe, tools like PEAT or Hearding FPA can be used.
Interactions
Multipoint gestures (e.g., pinching, dragging) are a convenient option for average users. However, it’s worth designing an alternative menu or controls activating the same function. This way, users with motor impairments can fully use the functionality.
The recommended touch button size is at least 22x22 px.
Media
For all video materials, it’s good to prepare captions, extended captions, and/or audio descriptions accessible by screen readers.
Images (photos, illustrations, graphics) should not contain text, and vice versa – headlines or quotes are best presented as text, not as multimedia files (e.g., svg). Otherwise, screen reader users might interpret these elements as separate parts of the content, not its continuation.
Forms
Clear hints on how to fill in a field (e.g., date in DD/MM/YYYY format) are essential.
For required fields and error indicators, include a text message in addition to color to help users identify and understand the requirements.
Field labels must always be visible – a placeholder is a great additional hint but should not be the only visible label.
Error messages should be readable, clearly refer to the relevant field, and indicate how the user can fix the error.
Usability, inclusiveness, and aesthetics
It’s high time to debunk the myth that digital accessibility is implemented at the expense of attractive design. There are numerous apps, plug-ins, and AI-based tools that help designers create visually appealing and functional interfaces for all users.
Inclusive design does require more thoughtful consideration of elements such as color, typography, and layout. However, the effort is worthwhile—well-chosen fonts can be both aesthetically pleasing and user-friendly for neurodivergent individuals. Responsive layouts that adapt to various devices and screen sizes are both modern and accessible for users of assistive technologies.
There is plenty of room for creative solutions as well. Animations and interactive elements can enhance user experiences, especially when implemented with accessibility principles in mind. Subtle animations won't strain the eyes and might even help users better understand the content. When designing interactive elements, it’s essential to ensure they are easy to navigate using a mouse, keyboard, or touch devices.
Accessibility tools for designers
Creating an accessible design involves a lot of factors to consider, which can be quite overwhelming. Fortunately, there are various tools available to help ensure compliance with basic accessibility guidelines, such as WCAG. These tools include plugins and applications that can automatically check color contrast, test keyboard navigation, simulate different types of visual impairments, and generate alternative descriptions for visual content.
5 tools for designing with accessibility in mind:
Contrast – Figma plugin; quickly generates a report on meeting WCAG AA or AAA contrast standards for all text across all workspaces simultaneously.
A11Y Focus Order – Figma plugin; enables adding annotations regarding the usage of interactive elements and how the interaction should occur. The plugin focuses on designing products that can be properly translated by assistive technologies.
Color Blind – Figma plugin; allows to view your designs in the 8 different types of color vision deficiencies
A11y Annotation Kit – Figma plugin; simplifies marking accessibility-relevant annotations and guidelines directly in the design. It allows adding explanations to specific elements, indicating focus order, or specifying keyboard interaction methods.
Stark – a package of integrated accessibility tools for daily work in the product development cycle (from design to development and management). Can be integrated with many known tools (Figma, Sketch, XD, GitHub).
You can find more design tips in pinned stories on our Instagram profile.
A new standard in design
Digital accessibility is not just about checking off some WCAG criteria, but an opportunity to create more inclusive and user-friendly products for everyone. Designers play a key role in this process, having the ability to influence a fundamental part of the project. A good design makes the product accessible to people with disabilities, of all ages, and in various life situations.
More and more digital product teams are considering the needs of people with disabilities. This is a clear trend that will continue to grow until it becomes the new standard. Since an accessible product is a process, not a one-time task, perhaps it's worth starting today?
