The business case for accessible web design
August 9, 2019
Build an inclusive small business brand
Individuals with disabilities make up the largest minority population in the world. But is your product, website, or app accessible to them?
Over 15% of the global population experiences some form of disability. If your website isn’t accessible, you’re eliminating one billion potential customers.
Besides the moral imperative to ensure individuals with disabilities can access your services, there is a strong business case for accessibility.
Over 175 countries have ratified the United Nations Convention on the Rights of People with Disabilities, which specifically references the right of all people to have equal access to communications technology. In the EU, the European Accessibility Act lays out the penalties for corporations who fail to provide accessible services, including e-commerce. And in the United States, the number of lawsuits citing the Americans with Disabilities Act (ADA) has been steadily increasing.
Inaccessibility can (and will) cost you. In 2017 there were over 800 accessibility lawsuits filed in the US alone. Back in 2006, Target famously paid a whopping 6 million dollar settlement. The issue? Lack of alt text, headers, and other simple fixes. That’s an expensive oversight.
Accessible web design is much more than simply a legal requirement. It can damage your brand’s reputation by making you look dated or ignorant. You risk alienating the largest and fastest growing minority group worldwide: people with disabilities. An inaccessible website also means you are limiting your potential talent pool, as individuals with a disability are one of the most underemployed minority groups in the world.
Consequently, a well designed and accessible website is the ultimate brand ambassador. Including accessible features demonstrates your commitment to inclusiveness to potential customers, whether they personally have a disability or not.
If you needed further convincing that accessibility pays off, consider the fact that websites that are accessible rank higher in SEO. Screen readers used by people with visual impairments search for text in your code in the exact same way that search engines do. Thanks to all of that extra alt text, image captioning, video transcription, and dialogue boxes, Google has reason to rank your website higher.
Disabled users are users too, so the business case for accessibility and user experience overlap. Plain language, contrast minimums, responsive design, voice control, and auto-complete are just a few web features that were initially designed for the disabled population, but have gained widespread acceptance among users of all abilities. These helpful features also improve the UX of people on mobile phones, older people, people in challenging situations like bright sunlight or noisy environments, those with a slow internet connection, and just generally busy individuals.
Put your best (and most accessible) foot forward with these tips on creating a more welcoming user experience for everyone.
Check out what we have to say about the newest developments in tech. Read more.
Consider the many different types of abilities
Disability is not a one size fits all label. Up to 90% of disabilities are not visible. From color blindness to epilepsy, there are thousands of conditions that can make it difficult to browse the web.
Utilize high contrast images and colors to ensure color blind and low vision users can see your site. The contrast ratio between text and its background should be at least 4.5:1 for a conformance level of AA. Consider using a larger, more easily readable type: at least 18 pt or 14 pt bold. Since larger and heavier fonts are easier to read at lower contrast, the minimum contrast ratio requirement is allowed to drop to 3:1.
A variety of different simulators exist to help developers understand how all users will see their finished product. Try viewing and navigating your webpage with RGBlind, a real-time color blindness simulation tool for any URL. WebAIM’s color contrast checker will calculate the contrast score for both regular and large text sizes for different conformance levels, allowing you to build beautiful web pages that can still be enjoyed by all. Not sure which colors will pass the contrast score test? ColorSafe will generate an entire palette of acceptable colors based on your background color and font family. You really have no excuse for unreadable text!
Flashing or blinking lights can induce seizures for those living with epilepsy or other neurological disorders. Not only are pop-up ads annoying, but they could be a health risk for some users. So if you needed another reason to get rid of pesky pop-up windows, consider this a sign.
Time-based content is another barrier for many individuals with disabilities. Yes, your dynamic elements might look cool and flashy, but are they really necessary to include?
Allow users to proceed at their own pace. This ensures your content can be fully understood by those with slower processing speeds, visual impairments, learning disabilities, or even just people who are learning to speak your language. You probably don’t like being cut off IRL, so why are you doing it to potential customers or clients? Remember, customers can’t buy anything if they don’t understand it first.
Clean up that code
A large portion of accessible web design is ensuring your page is navigable without the use of a mouse. As many individuals who struggle with fine motor control, vision, or movement use their keyboard to navigate the internet, you need to ensure your website isn’t reliant on using a mouse.
Luckily, there’s a simple solution to this problem. Making elements focusable will allow everyone to navigate your website easily. Click here for an example of code that allows users to navigate a table, focusing on each row individually.
Another simple mechanism that makes your code more accessible are semantic elements in HTML5 (one of the best languages for accessibility out there).
Instead of abusing <div> and <span>, use semantic elements like <article>, <footer>, and <section> . Not only does it make your code cleaner and more readable for you and your team, it provides valuable information to assistive devices that many individuals are reliant upon. Because many accessibility tools use the information in semantic elements, be as specific as possible to ensure that all users have a smooth experience. As an added bonus, future developers on your team will appreciate clean, clear, and easily readable code!
Get the talent your business and customers deserve.
Click here to find the best places for outsourcing quality small business services.
Placeholder text is not a label
Minimalism is in, and ‘heavy’ design is the opposite of cool these days.
But regardless of how beautifully trendy your web page design is, it might be guilty of one of the most common accessibility sins: using placeholder text as a label for a form field. Labels are necessary to ensure everyone understands what to put in the form field, and why. Individuals with low vision, color blindness, or mobility impairments may not be able to access or understand your placeholder text, no matter how ‘clean’ it looks. So please, please, please remember that placeholders and labels are not synonymous!
Design for users, not other designers
Remember that the majority of your end users are not designers. They are elderly, young, mobile, non-mobile, sighted, and unsighted.
Good design and accessibility are not mutually exclusive; in fact, accessible web design improves the UX of all users (not just those with disabilities).
Designers have a responsibility to ensure their work can be used and enjoyed by individuals regardless of ability, context, or situation. Please, design responsibly.
Put money back into your pocket with Veem Rewards.