Inclusive design is an intrinsic part of UX, UI and GUI development, or at least it should be. Why? There are currently over one billion disabled people in the world. Building inclusive user interfaces is much easier than refactoring.
iSoftStone has helped many companies build more accessible websites, mobile apps, and internal pages. If you’re starting or rebuilding a project with an inclusive UX, it can be overwhelming to know where or how to start. Here is a list of best practices we use to keep our designs inclusive.
Scale Primary Content
Content that scales properly across devices is very important for people with low vision and/or limited mobility. The obvious first step is to ensure primary content within your app, site or solution scales properly using common methods available to your user.
Here are some further tips:
- Do not design with fixed measurements such as pixels, use unfixed, modular units instead such as rem.
- For low vision users, set HTML to 100%, set body text to 1em.
Use tools to test accessibility design
We use accessibility testing tools to test our user interfaces. These tools will do a great job of parsing your design for basic accessibility standards, but nothing can replace user testing.
It is not always possible to get users with specific disabilities that can test your design, and it is certainly not easy to get a large dataset. But, if you can do user testing, you should.
Build for contrast and color accessibility
Many people with vision impairments are not blind, but they are unable to see low contrast details. For these users, here are some pointers:
- Use WCAG 2.1 standards for accessibility as your starting point, the standards present information on color and contrast.
- Ensure color is not the only method of conveying meaning. For example, a bar chart could use different patterns in addition to different colors to distinguish items.
Always consider assistive technology
There is a wide array of assistive technology that helps disabled people use software across different platforms. The most common is a screen reader, but there are technologies that allow people with physical disabilities to navigate with their face, chin, or help stabilize jerky hand movements.
- Ensure your testing matrix covers a combination of browsers, devices, and assistive technology.
- Add "skip links" to provide keyboard users a shortcut to get past lengthy and repetitive sections.
- Keep buttons and fields large and easy to see.
- Organize content in a meaningful way – most assistive technology uses a tab-path feature to advance through menus. Make that as easy as possible.
- Don’t hide important elements, such as links that only appear on mouseover.
Consider cognitive disabilities
People with cognitive disabilities may find navigating software a challenge. Platforms that are filled with information can overwhelm and confuse people with cognitive or developmental disabilities.
- Focus each page, section, or portion of your design on a single idea or topic.
- Keep page designs uncluttered with ample white space. This can result in easier reading for your users.
- Check that your information is readable by testing it readability testing tools.
Optimize UX for slow speeds
Assistive technologies can bog down under heavy loads. We have found that solutions built with slow Internet speeds in mind can actually help these technologies perform faster.
- Reduce CSS and JS elements.
- Use optimized media files – especially video, audio and image files.
- Reduce the number of pages, sections or other areas of the site or app that have to load from a server.