Studies have shown that around 70% of websites are at least partially unreadable with assistive technology.
This statistic sounds, and is, shocking. How is it that so many brands forgo obvious considerations for the millions of disabled internet users?
When we consider how often disabled people are made invisible within society and business, it, unfortunately, starts to make more sense.
The Web Content Accessibility Guidelines (WCAG) define how websites can improve their accessibility and, therefore, their inclusivity.
Many of these guidelines are becoming enshrined in law, so your business may be at risk if your website isn’t accessible.
The benefits of inclusivity to your business and customers are enormous.
Accessibility will give you a larger audience share, but it’s also key to building customer trust.
All customers, disabled or not, will benefit from a smoother website experience. They’ll appreciate a business that cares about this experience.
Inclusivity means considering your customers’ range of needs, and how their access to your service could be limited. Successful implementation of accessibility features will help you overcome these limits.
Though this article focuses on website design, remember that a key accessibility (learn more on what is web accessibility) issue is lack of internet access, so you should be looking to bolster availability in all areas.
Phone technologies, such as dial-in conference call options, can help you maintain remote contact with all your customers.
Now, let’s get on to those ten core principles to guide inclusive web design.
Table of Contents
1. Be Flexible
The term ‘disability’ covers a huge range of human experiences and needs. This can be intimidating when considering how to make your website accessible and inclusive.
However, bear in mind that all your customers, disabled or not, come to your business with vastly different needs and preferences.
It’s true that you can’t please everyone, but you can offer a flexible experience to reach as many customers as possible.
Consider the context in which users access your site. For instance, what sorts of devices are they using? Are they more likely to use your services at work or at home?
Profile your customers to determine their demographics, such as age and gender. This is one of the keys to understanding the best eCommerce platform or page designs for your business.
Your best option, to both satisfy your existing customers and reach new ones, is flexibility.
Offer a variety of contact options on and offline. Contacting your business and using your services should be smooth and painless. This benefits all your customers, not just those with additional needs.
2. Avoid Overwhelming Customers
While a degree of moving content can help make your site pop, too much can be anxiety-inducing and pressurizing. For users with mental health needs, such as anxiety, autism, or ADHD, these issues are especially pertinent.
The WCAG has clear guidelines on moving content. Moving content (that’s GIFs, scrolling and auto-updating newsfeeds, and so on) must have a pause mechanism if they start automatically, last more than five seconds, and are parallel to other content.
Depending on your audience, you might want to consider foregoing autoplay content altogether. Think about your older customers who may be unused to web services.
Too much moving, time-sensitive information is off-putting and overwhelming.
Many sites these days have a live chat pop-up as soon as you enter the site. This has its benefits as an easily accessible contact tool. However, it can be irritating if a message immediately appears every time you use the website.
Instead of a pop-up, you could instead have a collapsible, signposted live chat option in an unobtrusive position. Forcing contact with your customers as soon as they arrive can be very pressurizing.
This should also apply to your company’s use of text messaging apps. Don’t flood your customers with notifications.
3. Use Clear Typography
The WCAG is clear about typography requirements:
- Keep text left- or right-aligned (not justified)
- Line and paragraph spacing should be at least 1.5x
- Maximum paragraph width is 80 characters
You should always adhere to these guidelines, but you can go further to benefit more of your customers.
Use a clear, sans serif font, well-sized, and contrasting your background color. Language should be simple and direct, without patronizing your customers.
Make use of your customer research to determine what customers expect from your website.
Another important concern is the text within images. This should be avoided where possible.
Blind and visually-impaired users frequently use screen reader software. These programs read on-screen text aloud, but they can’t decode images.
Your customers may, therefore, miss important information if the text is ‘hidden’ within an image. It’s important that your visually-impaired customers don’t feel that their access to your site is limited.
4. Make Images Accessible
Of course, images are still essential to good web design. And, conversely, they can boost accessibility for other customers.
For those with reading disabilities, such as dyslexia, relevant images can improve text comprehension. Images will almost certainly be necessary for some areas of your site, such as product pages.
You can still make images accessible for screen reader users. Alt text should be included for every image on your site. This is the text that appears when you hover over an image with the cursor.
It’s also read out by screen readers, which cannot show the image itself. The good alt text describes the displayed image clearly and accurately.
It’s easy to layer alt text into your website with HTML. The inclusion of alt text won’t disrupt other users, and will hugely benefit those that use screen readers. Alt text and accessible images can also be beneficial to your search engine rankings.
Aside from alt text, it’s important that the images themselves are presented accessibly. For the purposes of the WCAG, color contrast is measured as a ratio. There are many apps and browser extensions that can be used to measure this ratio.
While incidental images for decoration only have no contrast requirements, text over background should have a contrast ratio of 4.5:1. Graphical items such as charts, and UI elements such as clickable icons, have a requirement of 3:1.
Lastly, almost 1 in 20 people are colorblind. Think about which color combinations may be problematic for these users.
There are many different types of colorblindness. Apps can be used to simulate how your website appears to colorblind users. Even better, reach out to people with colorblindness, or other visual impairments, to find out how usable your site is.
Accessibility in general is an important consideration. In the US, it is important to know what is ADA compliance to make your website comply with mandatory regulations.
5. Ensure Touch Screen Accessibility
It’s easy to fall into the trap of believing your desktop site is the ‘default’. Smartphone and tablet use continues to increase amongst all users due to its convenience. These devices are also generally more affordable than laptops or desktops.
Consider your site’s accessibility to lower-income users, and pay attention to your mobile site.
Tapping and swiping should be easy and intuitive. The purpose of your links should be clear, and you should aim to minimize mis-tapping.
Remember that a finger is much larger than a cursor, and obscures the user’s view of the screen. You can do this with good-sized, well-spaced buttons. The WCAG mandates a button size of 44 x 44 pixels.
Consider the physical needs of customers with your touch-screen optimization. Disabilities may mean customers have limited physical dexterity or stamina, so avoid extended or overcomplicated touch requirements.
The ‘pinching’ gesture, often required to zoom or rotate, can be taxing even for able-bodied users. You might instead want to have a tappable zoom button, a great sign that you care about your customers’ comfort.
6. Ensure Easy User Input
This is closely connected to the area of touch screen accessibility.
Forms on your website (for placing orders, getting in touch, setting up an account, and so on) should be effortless for your customers. Make sure all boxes are clearly labeled with the required input.
You could also put placeholders in boxes to exemplify what customers should enter. For example, a placeholder email address like xyz@xyz.com.
Even with the most accessible designs, there’s always room for human error. It’s important that your website is tolerant of input errors. Don’t make your customers feel stupid for mistakes, and make these easy to fix.
The best way is to highlight errors in real-time, so customers don’t have to scroll back through long forms. Don’t rely only on color to show errors; this may not be accessible for visually-impaired users.
Make error messages clear, not cryptic, and give customers the option for a final check before submitting it.
Tolerance for errors not only improves your website accessibility. It also makes customers feel supported in every step of their dealings with you.
Making forms intuitive and inclusive is one of the many ways you can build trust with your customers, by showing you care about their experience.
7. Aim For Informative Simplicity
Transmitting information clearly benefits everyone who uses your site. It helps those with learning or reading disabilities, visually impaired users, non-disabled users, and your own staff.
Clear information on your website will reduce the pressure on your customer service teams, by reducing the number of clarification queries.
Paragraphs should be kept short, and vocabulary should be no more complicated than needed. Don’t shy away from using industry-specific terms your customers will understand, but your website is not the place to flex that SAT vocab.
Eliminate ambiguity wherever possible. Your exact meaning should always be clear, and the functions of links on your site should be exactly labeled.
Aim for a minimal design that emphasizes what’s most important to your customers.
8. Maintain Consistency
For some disabled customers, change can be jarring. While it’s fine to update your website as your brand evolves, frequent unnecessary changes are likely to throw off any customers.
When it appears that your brand identity is constantly shape-shifting, your customers are less likely to have trust in you.
Consistency should also be maintained on the customer service side.
Solutions such as software-defined networking can help you maintain cohesive service. Maintain a friendly, open tone to make sure all your customers feel supported.
Some customers might need information repeated more often. Your CS team should be prepared for this, but it’s also worth considering making the information more accessible.
Accessibility features, such as color contrast and alt text, should be consistent across every area of your website.
It may be tempting to offer a completely different version of your site to disabled users. However, this can be othering, and make these customers feel as though they’re a burden. Instead, integrate accessibility into your site from the ground up, for the benefit of all your customers.
9. Keep Your Site Smooth
Another accessibility issue is the fact that not everyone will have access to fast internet or powerful hardware.
Customers in rural areas, in developing countries, or low-income customers may have trouble with your website.
Design your site so users can choose whether to view data-eating content, such as videos. There are many ways to reduce lag on your website to benefit these customers.
Consider, again, how customers are accessing your website.
Think about what devices they’re using, and the geographical areas they’re in. However customers view your website, they should enjoy an effortless experience. You don’t want your customers to feel that using your site is a cumbersome task.
Ensure tight, high-quality coding, to reduce frustrating errors. Try to reduce the number of pages your customers must click through when doing tasks.
Keep forms to as few pages as possible. Nobody likes to wait for new pages to load every few seconds, particularly if their connection is poor.
10. Create Visual Hierarchy In Website Design
A common thread in many of the best site designs is a clear visual hierarchy. This means that navigation is easy, and it’s obvious which steps users should take for different tasks.
You can analyze customers’ use of your website and foreground the most-used features. Avoid ‘tiling,’ as this is easily overwhelming, and not particularly clear.
You can group related features together with unifying design choices such as color and shape. However, you shouldn’t only rely on these features. As discussed, they can be inaccessible. Use text as well, for the purpose of screen readers.
The purpose of visual hierarchy is to make it quicker and easier for your customers to use and browse your website.
Use your design choices to direct customers to relevant sections of your website. Understand your customers’ needs, and emphasize what is most important to them
Final Words On Inclusivity
Ultimately, the philosophy behind accessibility and inclusivity is that disabled users are just as valuable as any other user. This may seem obvious, but a surprising number of brands fail to put this into practice with their website designs.
Going the extra mile to ensure all your customers have a good experience will build trust and loyalty in your base. Your customers will be happier, and you’ll stand out as a business that truly cares. When making your own website, find a web design agency that ticks all of these boxes.
Author Bio
John Allen is a Director, Global SEO at RingCentral, a global UCaaS, VoIP and auto dialer software provider. He has over 14 years of experience and an extensive background in building and optimizing digital marketing programs. He has written for websites such as Vault and 3DCart.
-preview.jpg)
