Accessibility 101: Best practices for designing accessible applications

Note: This is the 2nd article in a two-part series where we discuss why accessibility matters when designing websites, web, and mobile applications. 

As we learned in the previous article, Accessibility 101: Design Principles A Designer Must Know, The World Health Organization estimates that 15% of the world’s population lives with some form of disability, and 71% of people with any form of disability will leave a website immediately if it is not accessible. 

Technology offers unprecedented opportunities for inclusion regardless of ability. It is important that this thinking is embedded from the outset of application and interface design. 

How To Create Accessible Apps

Here are 4 core elements to be mindful of when creating a website that everyone can use:

1. Content and structure
   • Describe links in detail instead of using generic words like “click here”. This will help users understand the purpose of each link without having to physically see it.
   • Use a combination of colors, graphics, and text to describe information and emphasize key points.
   • To simplify navigation, ensure that all the repeated components within a web page appear in the same relative location and order, and try not to limit navigation flows. Create multiple ways for users to locate what they are seeking. Similarly, using consistent icons will help users with cognitive challenges understand their users better.
   • Create descriptive page headings and titles to allow users to understand the relationships between content and pages.
2. Visual design
   • Line spacing should be at least 1.5 times the font size, and the letter spacing should be at least 0.12 times the font size. This will help users with low vision read text easily.
   • Word-spacing should be 0.16 times the font size and the font size should not be less than 10 points.
   • Maintain a contrast ratio between the text and background. Clashing colors will hinder the readability.
3. Device-independent design
   • Be mindful of the device you are designing for; website accessibility will be different from mobile phone accessibility
   • Content that appears or disappears on using a keyboard or mouse pointer may limit the accessibility for some users constrained by the devices they want to use. Design the interaction in such a way that the user can perceive the content and dismiss it without disrupting their experience.
   • Ensure that all tasks can be conducted by users even by using conventional user interface components. Sometimes users may not be able to perform certain activities such as shaking or gesturing their device. 
   • Ensure that the touch targets are 9 mm high by 9 mm wide and the inactive spaces around controls do not overlap with touch targets. This makes it easier for users with limited motor movements to use the device without any hassles. 
4. Keyboard-only options
   • Ensure that keyboard shortcuts are not the same as browser or screen reader shortcuts. A keyboard shortcut could be just a word or a character or a symbol and it should be active when the user interface component for which it has been assigned is in focus.
   • Present content in the correct reading sequence. For example, if the document is a multi-column document, the content must flow from the top to the bottom of the column and then to the top of the next column. This makes it easier for people using assistive technology to read the pages.
   • Include a skip-to-main content link before the header so that users can directly access the primary content on the page quickly.

Accessibility @ Windmill – There are a few core tools that Windmill designers use to create inclusive digital interfaces. 

Before beginning a project they review the Web Content Accessibility Guide 2.1 (https://www.w3.org/TR/WCAG21/) to make sure the project is in line with the current guidelines. When designing for the web, built-in plugins are the most efficient way to test usability. Below are the designers at Windmill’s go-to applications for digital accessibility.

• Colorblind Web Page Filter: https://www.toptal.com/designers/colorfilter
• Color Oracle – Color Picker Upgrade: http://colororacle.org/usage.html
• Wave – Web Aim Checker: https://wave.webaim.org/
• Funkify – Disability Simulator Chrome Extension: https://www.funkify.org/simulators/?v=f003c44deab6
• Lighthouse Test Chrome Extension by Google: https://developers.google.com/web/tools/lighthouse

In addition to following best practices, designers must include users with various accessibility issues in their user research to understand the challenges they might face. This process will help designers to create more inclusive and accessible applications for all.