What is accessibility in design?
In a nutshell, digital accessibility is about making sure that users can interact with products and services in a way that is comfortable and efficient for them, regardless of their disabilities. There is a wide range of impairments to consider when creating designing accessible digital products. They include visual, auditory, physical, speech, cognitive, and neurological disabilities.
Ensuring that digital products are accessible is becoming increasingly important from three perspectives:
Inclusivity
On average 20% to 25% of the global population suffers from a form of disability. For the EU alone that amounts to 100 million people. As the use of digital tools becomes increasingly essential in everyday life, making digital products accessible to people with disabilities has become paramount to ensuring that everybody is able to take part in our digital society.
Legal Compliance
Across the globe nations are starting to enforce digital accessibility for websites and apps provided by public bodies. Most often these laws enforce that digital products offered by the government must meet several criteria outlined by the Web Content Accessibility Guidelines (WCAG). This is already the case for the US, the EU, Canada, Australia, etc.
Some countries, like Norway, don’t even make the distinction between the public and private sector and require all digital products to meet a set of minimal WCAG criteria.
Business
According to AIR, the total disposable income of working-age people with disabilities equals $490 billion (and that’sonly for the US market!). Companies that neglect the importance of accessibility in design of their digital products are losing millions, or depending on the size, even billions of dollars every year. For example, impaired customers often give up on using websites or apps for e-commerce due to their lack of accessibility — pretty damaging for the economy of online marketplaces!
Business success very often relies on the efforts of UX teams. So, if you don't want to lose any more leads, you should try to make your digital products accessible for people with various types of impairments. Although the topic is gaining more and more popularity, a report by WebAIM showed that in 2022, devastating 96% of websites and tools worldwide did not correspond to the Web Content Accessibility Guidelines.
Why accessibility should be a part of the prototyping process?
Accessibility of digital products should be prioritised at the earliest stage of the design process. Unfortunately, many digital systems end up being inaccessible due to the lack of strategic thinking. By only minding the accessibity of various functionalities later in the development stage, companies have to spend more time, money and effort in redesigning and redeveloping.
It's indeed important to consider accessibility from the very start of the project. There is a number of WCAG criteria (e.g; SC 1.4.3 relating to contrast) which can already be met in the early phases of the design process. Nevertheless, the prototyping stage offers the earliest opportunities to test how accessible your product is.
Here are several (very general) steps designers can take to include accessibility in prototyping:
- Awareness: understanding the importance of accessibility and its impact on users is already a big step to success. For a start, learn about types of disabilities affecting how users interact with digital products, and the challenges they face. There is much more to the spectrum of impairments than colour blindness - the most commonly addressed disability in design. Make sure to not leave anyone out.
- Planning: before starting to create a prototype, designers should plan and consider accessibility requirements. For example, such as colour contrast, font size, keyboard navigation, and more.
- Tools: designers can use accessibility testing tools to evaluate the accessibility of their prototypes, as well as those prototyping tools that integrate accessibility support. We'll talk about them in more detail in the following section.
- User testing: involve users with disabilities in the prototype testing. It is impossible to produce something for people with disabilities without their feedback.
- Iteration: prototypes might undergo some changes even after the user testing. To ensure the design still meets accessibility requirements, don't forget to regularly review and iterate on the design. Minor changes that make no difference to one user might become a big obstacle for another.
Conclusion
Overall, accessibility leads to more usable, inclusive, and enjoyable digital products for people with disabilities. Furthermore, it can become a competitive advantage for your company. Not only does accessible design help companies to meet legal requirements but also improves their brand image.
What's available in the market?
The majority of prototyping tools offer a certain degree of accessible design support, by either having built-in accessibility features or through third-party plugins. For example, such tools like Figma, AdobeXD, Sketch, Axure RP, InVision or UXPin.
While most platforms focus on colour contrast checkers and colour blind simulation, there are also several more accessibility-enhancing features available. For instance, based on the findings of the study on accessibility features and plug-ins for digital prototyping tools, Adobe XD allows to add audio feedback and speech output in the design for those users who can only access the prototype with sound. It also supports voice prototyping. In addition, Axure, Figma, Framer, and InVision also provide a feature of adding keyboard shortcuts for transition.
Adobe, Sketch and Figma offer a variety of plugins that assist designers in assessing accessibility. The most powerful of them is Stark. The Stark plugin offers a wide range accessibility-focused functionalities: contrast checking, alt-text annotation, focus order specification, vision impairment simulators, etc. However the range of free features are limited, so it gets rather expensive if you want to get the most out of Stark’s functionality.
Figma
In principle, Figma is one of the most accessibility-concerned platforms in the design and prototyping environment. Apart from numerous plug-ins (17) that facilitate accessibility support, Figma offers in-house features, such as a dark mode and a contrast checker, alt text for images and ARIA labelling.
They also introduced a screen reader in beta last year. Although it's a truly great and long-awaited update, it requires some preparation and learning from designers. Screen readers translate design elements into HTML tags. Designers normally don't think in terms of code when create designs. Yet, to successfully use a new screen reader feature, you should consider HTML upon building a prototype in Figma.
ARIA attributes
Apart from Figma, many prototyping tools include support for ARIA attributes. Aria-labels provide a label for objects (for example, a button) that can be read by assistive technology, such as screen readers. When a screen reader detects the object, the aria-label text is read so that the user will know what it is. However, it doesn't mean that all the tools actually integrate with the screen readers.
There are also platforms like InVision and Axure RP that offer certain accessibility assistance. InVision allows to add alternative text to images and ARIA labels and roles to components, as well as enables keyboard shortcuts for navigation. Axure RP, in turn, also includes ARIA attributes used by screen readers, dynamic panels, interactive widgets and the ability to create keyboard shortcuts.
Limitations of the accessibility features of the current prototyping tools
As we said before, the existing prototyping tools offer certain accessibility features. They don't cover all types of disabilities or every aspect of accessibility though. The majority of tools focus on visual impairments and contrast checks, not addressing cognitive, auditory, or physical disabilities.
Most importantly, the more advanced accessibility features you add to your prototype, the more complicated it gets from a technological point of view. For example, in order to use Axure's advanced accessibility features, designers need to have some understanding of coding concepts such as HTML, CSS and JavaScript.
Additionally, these tools may not be able to simulate or test the user experience for different types of assistive technology. Therefore, limiting effectiveness of the accessibility features. Because some accessibility-specific features are more complex to implement, they may require some extra development resources.
Advanced accessibility features
Most of the advanced accessibility features require coding, as they involve modifying the HTML, CSS, or JavaScript of your digital product.
What are they? For instance:
- Keyboard accessibility ensures that all interactive elements can be accessed and used using only a keyboard, without a mouse or other pointing device.
- Screen reader compatibility helps screen readers and other assistive technologies understand the structure and functionality of a web page.
- Closed captions and audio descriptions provide transcripts, captions, and audio descriptions for multimedia content
- Focus management makes sure that focus is appropriately managed and visible on interactive elements.
What do UX/UI designers think of the role of prototyping in design accessibility?
Weave.ly has run a survey on importance of accessibility among 140 UX designers. The survey focused on their previous experience with testing their prototypes for accessibility and their personal opinion on significance of accessibility features in prototyping tools.
As you can see from the graph above, accessibility of digital products is important for our respondents. However, companies pay less attention to this aspect of design, compared to UX designers. This observation is quite upsetting, as to tackle the problem of lack of accessibility properly, it must be first of all prioritised at the company level.
Accessibility & Prototyping, our Point of View
Weave.ly is a no-code prototyping tool that generates working web applications from Figma designs. Through our plugin you can build advanced prototypes without leaving the Figma environment. Thanks to our code-free technology, it is possible to add real data and conditional interaction to your prototype just in a few clicks.
At the time of writing, we don’t consider ourselves to be part of Figma’s accessibility-focused plugins. However, given that weave.ly enables designers to generate full web application we believe to be able to play a significant role in this space in the near future. In the same way that our plugin enables you to tag layers of your design with specific functionality (e.g. inputs, maps, etc) we could enable designers to tag layers with accessibility-specific information (e.g. tab order, meta tags for screen readers, etc.).
We see huge potential in accessibility functionality weave.ly could offer. Therefore, we have a question to you, dearUX/UI designer. How important it would be for you in your work to use a prototyping tool with the most necessary and advanced accessibility features built-in?
We don’t mean this to be a rhetorical question, these features are currently on our roadmap and we’re debating the priority we need to assign them. So if this sounds interesting to you … let us know!
Tips on how to make designs more accessible for people with disabilities
Let's look into different types of impairments and the ways to address each of them from the accessibility perspective. These are very basic and universal recommendations, as each design requires a tailored approach which is impossible to fit into general guidelines. Moreover, we refer to the WCAG success criteria for a more comprehensive overview of accessibility requirements.
Visual disabilities
- Use high contrast colours and clear text to ensure readability.
- Provide alternatives to visual information, such as captions or audio descriptions for videos.
- Use clear and recognisable icons.
- Consider using larger font sizes and avoid small or light text.
Cognitive disabilities:
- Provide clear and concise language and avoid complex sentences and jargon.
- Offer simple and straightforward navigation options.
- Provide alternatives for critical information, such as captions or audio descriptions for videos.
- Use clear and recognisable icons.
Speech disabilities:
- Use clear and concise language, avoiding technical jargon or slang.
- Provide clear instructions and feedback to users.
- Use clear and easily recognisable icons.
Auditory disabilities:
- Provide alternative forms of information, such as captions or audio descriptions for videos.
- Use clear and concise language, avoiding complex sentences and jargon.
Physical disabilities:
- Ensure that all content is accessible through keyboard, including forms and interactive elements.
- Provide straightforward navigation options.
