While Amazon is synonymous with convenient and easy shopping for millions of customers, that hasn’t always been the case. For visually-impaired and blind customers, Amazon’s website was neither, as it wasn’t compatible with refreshable Braille displays or screen readers. Similarly, visually-impaired job seekers couldn’t complete their Amazon applications because the online application didn’t work with their screen-reading software.
These two cases are drops in an overflowing bucket of complaints involving a lack of digital accessibility. With over 2.2 billion people living with vision impairment and 1.5 billion living with hearing loss, simply navigating a website or application can be frustrating or at worst, impossible. The problem isn’t rare: WebAIM, an organization whose mission is to expand the potential of the web for people with disabilities, found in their 2023 report that 96.3% of home pages failed Web Content Accessibility Guidelines (WCAG), and the top 1 million websites had an average of 50 distinct accessibility errors per page. The importance of digital accessibility has recently increased, with many jurisdictions in the EU, the US, and beyond introducing new legislation to compel organizations to ensure access to their web-based services for people with disabilities.
The issue of accessibility applies equally to web-based business applications that are used by employees and customers. These critical business tools should be accessible to all your potential users, regardless of hearing, movement, sight, or cognitive abilities. When they’re not, it leads to alienated users, reduced efficiency, lost business opportunities, and the potential for penalties or fines.
Developing an accessible web application requires an intentional, holistic approach. While it is possible to add screen reader support or other assistive features to your web application, they are not likely to work well unless the application has been designed with accessibility in mind and built with accessible UI components. Below are some concrete steps for you to take to make your application available to all.
Design for dexterity and fine motor control issues
Pointing devices, such as trackpads and computer mice, may not be available or useful for users with mobility or fine motor skill impairments. For those users, build options that allow for navigating the UI with just a keyboard.
Some considerations:
-
-
- Tap targets, such as the icons or elements that users tap on, should be big enough to be easy to hit with your fingertip. Similarly, with a pointing device, avoid using an element that is so small that it’s difficult to point and click with a mouse pointer.
- Drag and drop features can be problematic since they require a high level of fine control. Always provide a simpler method of achieving the same result, such as arrow buttons.
- Touchscreens generally rely on gestures like swiping, which can be difficult for a person with dexterity and fine motor skill issues. Always provide an alternative way, too, such as arrow buttons.
-
Ensure accessibility for the Visually Impaired
The needs of users with visual impairments range from ensuring sufficient contrast in UI elements to compatibility with assistive technologies, such as screen readers that convert on-screen content to audible speech or refreshable Braille displays.
Color blindness
Color blindness affects an estimated 300 million people worldwide and is more prevalent in men, as approximately 1 in 12 men have some form of impairment in distinguishing colors.
Free tools like Color Oracle allow you to simulate various color deficiencies in order to see how your application looks when viewed by a person with color blindness. Grayscale or monochrome filters that remove all color can also be useful when assessing icons and contrast. Convey your information in more ways than just by color. Use icons or, even better, text.
Low vision
Blurry vision or low-contrast vision can be temporary or a permanent disability for a user.
Keep sufficiently large font sizes either as default or by option. Make sure the UI scales correctly when a user uses the browser’s built-in zoom. Provide an optional high-contrast mode.
Blindness
Support for screen readers and keyboard compatibility is key to enabling the 39 million blind users to navigate the site or work with the application. When testing with screen readers, JAWS, NVDA and VoiceOver account for over 90% of screen reader usage and it is most often enough to test your application with these three.
Select accessible UI components
Components that are designed and tested with an eye to accessibility provide a solid foundation, but all applications require real-life evaluation to ensure that they are usable by their intended users. However, inaccessible components guarantee an inaccessible application!
Follow Accessibility standards
As you consider the next steps for building with accessibility in mind, the Web Content Accessibility Guidelines(WCAG) 2 is an international shared standard for individuals, organizations, and governments. The guidelines are organized around key principles: to fully use the web, any user must have content that is perceivable, operable, understandable, and robust. The guidelines also offer success criteria to help measure your progress.
Business applications enable your employees and customers to get things done quickly and easily. Ensuring these critical applications are accessible to all users isn’t just an ethical issue, it also creates increased efficiency and increased opportunity for your business. With the right design approach and the right tools, accessibility can become a seamless part of your application development process.
