How To Get Accessibility Right in A UI/UX Prototype?

Seven / Blog / How To Get Accessibility Right in A UI/UX Prototype?

Software prototyping is highly beneficial for most software or web products. It allows precise planning before development and ensures a better result quality. Usually, when talking about prototyping, we would mention the flexibility it provides, its money-saving properties, and streamlined development.

Accessibility is a huge aspect of any good product. It indicates that the creators want to reach out to as many people as possible, including people with disabilities. According to World Bank, over 1 billion people experience disability, and 110 to 190 million cases are severe.

What is accessibility in product development?

Accessibility is your way to include millions of people interested in what you’re offering but couldn’t get that service for any reason. It’s about making your software or website usable for a wider audience. The Internet grew from the idea that everyone should have easy access to information, no matter the location or physical capabilities. Now we can improve that access further, providing the highest level of inclusion.

People with low vision, mobility, or impaired hearing are most commonly named in accessibility discussions. But other people don’t fit that profile like parents caring for infants and mainly operating with one hand. Circumstances change, and people who could use the product as is can now suffer from temporary or permanent accessibility troubles.

Product accessibility includes the needs of all those people and helps designers and developers come up with a solution that’s comfortable for all users.

When is a good time to focus on accessibility?

Accessibility should be kept in mind as an ongoing goal. It’s more of a mentality to have as a team. A constant readiness to make that extra effort to polish the accessibility and erase the borders for users who might feel them in other products.

While there’s an opinion that accessibility is best implemented and tested on a real piece of software, we believe the process should start much earlier. The Discovery phase and UX/UI prototyping, in particular, offer better product quality and budget compliance.

Focusing on accessibility before coding and prioritizing a comfortable customer journey and intuitive interface can help with traction, loyalty, and engagement. In addition, you’ll get more chances to get it right because of how flexible you are during prototyping. You can also user-test multiple accessibility aspects with a clickable UI/UX prototype.

What are some best practices in accessibility?

The general goal is clear – to make the product accessible to as many people as you can. If a person could or should use the service, it’s counterproductive (and in some countries even illegal) to discriminate against them by an inconvenient interface. But what steps can we take to achieve inclusion and accessibility?

Visual hierarchy

The most important sections must be the most visible ones. This effect can be achieved through multiple means.

  • Align elements so that there’s an intuitive connection where it matters
  • Choose bigger fonts and experiment with layouts to highlight key parts
  • Make sure there’s a noticeable distance between elements on the screen

The goal here is to make sure that each element is visible and can’t interfere with the other part of your product.

Color and contrast

Colors are an imperative part of any design. They inform, highlight, make rough edges smoother, and much more. Selecting the right color palette is vital, and there is some science behind that.

Color theory and color wheel help choose the most fitting colors, creating a non-invasive environment within the product. Canva’s tool allows experimenting with the right palette and color selection.

Keep in mind people with reduced color perception, as there are different types of color blindness and all of the design elements must also remain visible in that case.

Contrast comes after the color choice. Even with the perfect color selection, you may sacrifice accessibility without even knowing it. Here are a few things to consider:

  • Font color
  • Background color
  • Button colors
  • Other elements of the user interface

The list can expand based on the specifics of your product. But the bottom line is – accessibility is achieved through contrast that boosts the visibility of more important elements of UI.

Adaptive resolution

Presenting your product in a form that fits the majority of devices is considered a good tone. Thankfully, services like Figma allow quick adjustments to the layout, so you don’t have to spend too much time on that.

The next step, however, is to make sure that your product is accessible when people use devices that zoom the content or just up the scale to 150% or more. The blocks, the buttons, and other elements must stay together to avoid confusion and misunderstanding.

Are there any accessibility guides or manuals?

Yes, quite a few, actually. The design community actively strives to create better, more accessible user interfaces while creating step-by-step guidelines. Here are some that are most commonly used:

UI Guidelines:

  • Material Design by Google
  • Ant Design React UI library
  • Human Interface Guidelines by Apple

Accessibility Standards:

You can find relevant information for your product and platform, which will greatly speed up the process of making your product more accessible during the software prototyping stage.

As a company with extensive knowledge and practical experience in UX and UI design, we’re here to guide you through this abundance of information, which undoubtedly can be intimidating at first.

Image by DCStudio