There’s a myth that designing for the web with accessibility in mind must be expensive, but it doesn’t have to be! Web accessibility refers to building websites and applications that can be used by people who have visual, motor, or auditory disabilities and it helps them understand, navigate, and interact with your website. Even if the UI project you are working on doesn’t have any accessibility needs (that you know of) it’s important to understand your design decisions. We want to share with you a few simple steps that can make your site more UI and UX accessible. But first, let’s talk about why it’s important.
Why is accessibility important for UI and UX design?
The great thing about web accessibility is that it creates a better experience for everyone. If you are a designer, you have the ability ensure that when you design for the web, everyone who interacts with your website has access. The United States Census Bureau reports that over 56 million people in the United States and 1 billion people globally have a disability. Additionally, studies show that when websites are accessible, they have better usability, faster load times, and they reach a wider audience.
The guideline below is a roadmap for you to meet the standards for accessibility as described in Section 508 of the GSA and the Web Content Accessibility Guidelines 2.0 (WCAG).
How to incorporate UI and UX into design for the web
1. Adjust color and text size.
Ensure your designs are in line with the WCAG by using color contrast. The WebAim Color Contrast checker allows you to build a color palette from scratch if needed and if you’re working with an existing palette, you can create a complementary web-accessible color set. This tool allows you to enter specific hex codes and then adjust it to reach the necessary contrast standards.
2. Pair color with shapes, text or icons.
Color is effective when indicating changes to people with typical vision. However, if someone has a visual impairment like color blindness, color and contrast alone may not be enough. Adding explanatory text, icons or shapes can help you communicate further. A good example of this is a stop light, where not only colors are used but they are also placed in a unique order.
3. Ensure link copy is unique.
Screen readers help people with auditory disabilities convert digital text into synthesized speech. One basic task of screen readers is to read through all the links on a page. If the copy of all the hyperlinks on a page read “click here” they can be confusing to navigate. When you’re writing copy for a call-to-action, ensure that the text is unique and can be understood if read on its own.
Conclusion
Adhering to these guidelines will not only help those interacting with your website, but they will push your creativity as you craft designs that enable the success of a wider set of users. If seems like a large task set before you, remember designing for accessibility is something that can always be improved upon. By advocating for web accessibility, we make digital content available to all people regardless of who they are. To learn more about designing a website with accessibility in mind, check out our blog, Colors and Conversions.
Interested in working with fivestar*?
If you decide that it is valuable and profitable for your business to have custom software, fivestar* can develop solutions that centralize workflows, optimize processes, and enable decision-making through real-time data and business intelligence.
