Our goal, as developers, is to build products that reach the largest possible audience. We create delightful experiences. We take pride in developing software that is maintainable, fast, secure, and private. To accomplish this, we must recognize the core importance of accessibility, because you can’t accomplish the other goals without it.
Accessibility is based on a simple premise: Your customer wants to know what each element on your screen represents and wants to interact with it via any input device they require. This can be summarized as POUR: Perceivable, Operable, Understandable, and Robust. Include this mantra at the earliest stages of design and development.
Who are your customers?
Accessible design affects everyone; A disability could be permanent, temporary, or situational. Your website may be easy to use while at your desk, but consider the experience when reading it while in a subway that has intermittent connections. How easy is it to read outside a coffee shop with bright sunlight and a screen filled with greasy fingerprints?
Consider automated door openers. They are essential for someone using a wheelchair, or recently broke an ankle and using crutches. But, they are also helpful when carrying five bags of food and a tray of drinks for your colleagues.
Accessible products support a surprisingly large customer base. The Centers for Disease Control reported 26 percent of U.S. adults had a disability in 2018, and the percentage jumped to 40 percent for Americans over 65. You can expand this to also include accountants and bookkeepers, who avoid using the mouse, continually context-shift and need to know where they left off, and strain their eyes while examining different documents and screens.
How do I know if my app is accessible?
The Web Content Accessibility Guidelines are the internationally recognized standard for developing accessible products. Building your application according to these guidelines will cover your entire audience:
- The small business owner at Starbucks.
- The overworked accountant during tax season.
- A ride-share driver submitting invoices in a parking garage.
- A musician who uses voice recognition to control her computer.
- A shop owner nearing retirement.
While the guidelines provide an in-depth guide to building accessible web applications, you don’t need to be an expert to begin. These standards are used by the software you use to write code, automated testing tools, web browsers, and assistive technology. These are going to do the heavy lifting; your job is to focus on the POUR mantra.
Use automated testing tools
It’s important to test early and test often. There are tools for testing your designs and code at every level of production.
Stark and Color Contrast Analyser plugins for Sketch ensure design specifications have adequate color contrast.
Test your React code early: ESLint Plugin for React Accessibility and React-Axe for run-time evaluations.
Browser-based testing: Firefox and Chrome have excellent accessibility inspectors, which let you inspect how each element is surfaced to assistive technology.
These browser-based tools audit your application for accessible design and development:
- Axe is an open-source accessibility testing library that has become the industry standard for accessibility automated testing. Use their plugins for Firefox and Chrome to quickly test your app. The tool also provides a link to Deque University to understand what the error represents, how it affects users, and how to fix your code. The Axe library also powers many other tools.
- Chrome’s Lighthouse is integrated into their audit tab. This uses Axe for accessibility, but also provides audits for performance, mobile-ready, and best practices. Use this weekly and aim to get your Lighthouse score above 80.
- Microsoft Accessibility Insights combines Axe, artificial intelligence, visual references, and guided tutorials to enable anyone to do a full, professional audit of their product. A single page will take about 90 minutes for your first audit, but you’ll learn a lot as you work through each step of the process and create your final report.
Incorporate the Axe library at every stage of your commit, build, and release cycle. There’s a growing list of supported tools: Projects that use Axe.
Use your keyboard
Automated testing is great, but it will only catch 40 percent of the errors. You must combine automation with manual keyboard testing. Ensure that every interactive element receives keyboard focus, you know which element has focus, and focus moves to new content. Essentially, it just works without surprises.
Set up your Mac
By default, Macs only include form elements in the keyboard navigation. You’ll need to change the system and Safari preferences for full keyboard access.
No Mouse Mondays
Set up a task to spend 15 minutes every Monday using your applications without a mouse. Use the tab key to move through the page; use the enter key to activate buttons and links; and use the arrow keys to open and explore drop downs, calendars, and tabs.
Did you skip a button? Did you get stuck in widget? Were you able to immediately interact with content in a new panel?
Develop for everyone
Developing inclusive products is simple when you start with an accessibility-first approach. You are developing for all customers, today and in the future. James Williamson summarized your responsibility to consider your customers’ needs: The biggest misconception about accessibility is that by adding it you’re doing somebody a favor. You’re not, you’re doing your job. #a11y
Learn more about accessibility
Adding automated testing and using your product without a mouse are two great ways to start your journey to accessible products. To continue the process, take some time to learn more about accessibility, your customers, and disability etiquette.
Here are some additional accessibility education resources:
- Teach Access, an organization dedicated to increasing accessibility in university curriculum developed this excellent tutorial: Accessible Web Development.
- Explore the intricacies of accessible development with Google Developers’ YouTube series: A11yCasts by Rob Dobson.
- The BBC’s Global Engineering Language provides comprehensive guidance on accessible design, development, and interface expectations.
- Google and Udacity feature a free Web Accessibility Course. It’s part of their Front End Web Developer Nanodegree.
- Microsoft’s Inclusive Design toolkits and workshops will ensure your products are accessible from the earliest stage.
Leave a Reply