Drive Innovation through Accessibility Design
In these current times where everything is within our reach on the smartphones or electronic devices, we need to ask us this question. Why would you want to make something that can’t be used by everyone? This question is important to understand the necessity of Accessibility in our designs.
But first let’s start with what Accessibility means. Accessibility is the concept of whether a product or service can be used by everyone — however they encounter it. Most important accessibility laws have been made to aid people with disabilities. But us, as designers it’s our duty to try to make our interface the most accessible possible.
Let accessibility drive innovation, not just from a compliance standpoint, but from the standpoint of meeting client needs and giving them an enjoyable experience.
In this journey I will take you to the guidelines, tips and tricks you should think of and avoid while designing a user interface.
Barriers
Anything that restricts access to web content is an accessibility barrier. There are a lot of barriers but the most common are: Visual, Mobility, Auditory, Seizures and Cognitive.
Guidelines
To address this concern for accessible website design, the World Wide Web Consortium develop a series of accessibility standards. This document is known as the Web Content Accessibility Guidelines (WCAG) and in breaks down into 4 main principles known as POUR.
- Perceivable:
Users must receive information and user interface components in ways that they can perceive, such as providing text alternatives for graphical and other content with no text. - Operable:
User interface components and navigation must be operable. An example is making all functionality available from a keyboard. - Understandable:
The information on the user interface must be understandable. The user should be able to figure out how to use the interface easily. - Robust:
Content must be robust enough, so a wide variety of user agents, including assistive technology, can interpret it.
Under the POUR principles, there are three criteria compliance levels. Each of them can be achieved thanks to the 78 WCAG guidelines, by following them you can ensure your content will be accessible.
Now that you know that there are guidelines and standards to ensure the content is accessible, let’s dive into 10 inclusive tips to make Accessible UI Design.
1. Design with an open mind
Our responsibility as designers is to shape our designs in such a way that interfaces are available to and usable by as many people as possible. At the end of the day, we are designing for humans, and humans span a wide range or experiences, abilities and aptitudes so always keep an open mind.
2. Invest in user research and testing
Assumptions in design are dangerous things — and when it comes to accessibility, it’s very hard to understand a user need that you have never experience yourself. So, make sure that you’re investing adequately in user research right at the beginning of your project.
3. Choose typography right
In order that users can see and read correctly on your website you should consider these 3 things I laid out here:
- Set a font size of at least 16px, and ideally 20px for body text
- Use a line height (line spacing) of at least 1.5 (150%)
- Avoid light text weights, particularly at small sizes
4. Use color the right way
To help the user visualize correctly the information you should always consider the use of high-contrast color combinations. Also try to avoid problematic color combinations for functional elements. But always keep in mind don’t to rely on color alone to convey content because it can be ineffective, you should support color with patterns, icons and text labels.
5. Avoid hiding content
Sometimes when we try to make our design more minimalistic looking, we forget about accessibility. For example, in forms you should always use both labels and placeholder text. Also, on text links you should make links looks like links.
6. Use buttons correctly
When it comes to buttons you should keep button and text’s link short, avoid long text on buttons, also make sure that buttons and interactive elements are big enough to tap on.
7. Give the user feedback
When a user makes a mistake you should give him feedback, the system should forgive that error and facilitate correction. Instead of just a pop-up modal saying “Error” you should make clear where was the error so the user can remediate the situation and don’t get frustrated.
8. Create fully responsive designs
Don’t settle for “adapting” a desktop design for a mobile device, or vice-versa, as designers we should consider all device form factors in our overall plan for an interface’s design.
9. Optimize the load time
Keep in mind that not all users have fast internet, many have very limited data allowances on mobile, and usually when a site does not load fast enough, we get frustrated and no visit that site again, so to improve this you should minimize bandwidth requirements wherever you can.
10. Be accessible for keyboard-only users
Not all users navigate the internet using the mouse, certain users navigate using the keyboard. Make sure users can interact with your website using the keyboard alone. Even if your website is the most beautiful you can think of, if it isn’t keyboard-friendly it is completely useless to someone who cannot access it controls and interact with it.
Conclusion ✨
After all I laid out for you today, I wanted to end this by saying, embrace diversity because building an accessible website isn’t just “cool”, it’s completely necessary. Take an “accessible first approach” to generate inclusive ideas early on in the design cycle. Push the boundaries to create experiences that people with disabilities actually enjoy, not just experiences they merely tolerate.
References
- A Primer to Web Accessibility for Designers
https://uxplanet.org/a-primer-to-web-accessibility-for-designers-2c548448c612 - 40 Tips For Inclusive And Accessible User Interface Design
https://trydesignlab.com/blog/40-tips-inclusion-accessibility-user-interface-design/ - Accessibility guidelines for UX Designers
https://uxdesign.cc/accessibility-guidelines-for-a-ux-designer-c3ba775539be - 5 Easy Ways to Make Your UI More Accessible
https://uxplanet.org/5-easy-ways-to-make-your-ui-more-accessible-34a10522ae99 - Building Web Accessibility, Part 1: Barriers, Guidelines and Standards
https://www.outsystems.com/blog/posts/building-web-accessibility-barriers-guidelines-standards/ - Designing and Accessible User Experience
https://www.a11yportal.com/advanced/fundamentals/designing-an-accessible-user-experience.html
