Website Accessibility: A Beginner’s Business Guide

“I never thought of being blind as a disadvantage,” said Stevie Wonder. And with modern screen-reader technology, web users with impairments don’t have to miss out on your website, either. All it takes is a few design principles.

Unless you factor accessibility into your website costs, you could end up turning customers away – or even facing lawsuits.

We know you want to get it right. But whew, those web accessibility standards can seem awfully technical. So we’ve put together this simple overview to ensure website visitors of all abilities can experience what your site has to offer.

What Is an Accessible Website?

A website that as many people as possible can use, taking disabilities into consideration. Ideally you’d create a new website with a wide range of users in mind – including physically and mentally impaired people. But you can most likely adapt your existing website to make it more user-friendly.

An accessible website has the following features:

• Text which can be made larger
• Contrast between background and text colors
• Links you can navigate using the keyboard
• Alt text that’s useful for understanding the meaning and purpose of each image
• Videos with captions and any audio fully transcribed
• Error messages are communicated with text, not just color

Why is it important to be able to use the keyboard to explore your website, and not the mouse? The cursor doesn’t have any meaning to someone who can’t see it. And users with muscle weakness, mobility issues and lack of fine motor control won’t use a mouse, either.

Instead, the Tab, Shift, Arrow, and Enter keys become the main ways to explore a website.

That’s a key feature of screen reader technology, which scans web pages one link at a time. A recent survey found 92% of those using screen readers are doing so because of disability. So if your website doesn’t work with a screen reader, it doesn’t work for disabled people.

Here’s a quick example, made by AccessibilityOz:

Legal Penalties for Inaccessible Websites

In the past, it was only government-funded websites which faced legal consequences for being inaccessible to users with different needs. But now the websites of private companies are possible targets for legal action.

In 2021, Domino’s had to pay $4,000 to a blind plaintiff who complained that the pizza chain’s website was not accessible for him. The judge agreed that Domino’s website fell foul of the Americans with Disabilities Act (ADA) because the plaintiff couldn’t access it fully – even using a screen reader.

Boost Accessibility, Reach More Customers

The most successful website owners invest in making their websites widely accessible. After all, openly available customer support is one of the most important customer retention strategies. And for many, a business’ website is the first port of call for contact details and customer support.

You can use one of the top ecommerce platforms for your online store, but you’ll still need to check your design isn’t overly cluttered.

Because the latest research finds 88% of online shoppers will never come back to a website after a poor user experience. Can you really afford to shun so many ready-to-buy customers?

“Disabled people have money to spend on your goods and services, and if they can’t spend it with you, they’ll go and spend it with somebody else,” says Clive Loseby, website accessibility advocate.

A clean, well-structured website is the easiest to use. As mentioned already, links should be clearly labeled with logical navigation.

For people with low vision using a screen reader, your website may appear to them like this:

You can increase your conversion rates by four times if you improve the UX (user experience) of your website.

But what if you want to include some imagery or a visually-dense graphic to capture the attention of web visitors without eyesight issues?

No problem, just be sure that the first link (in the top left-hand corner of the website) is “Skip to main content”. That’s a huge help for screen reader users to locate the most relevant links they came to find.

Walmart has done this, and even hidden the link within the top banner so it doesn’t disrupt the overall design.

By the way I’m using WAVE Web Accessibility Evaluation Tool to reveal these different page elements. You can download it as a Chrome extension (for free) to inspect any web page and expose accessibility issues.

How to Write Image Alt Text (Alternative Text)

We’ve covered the importance of clear links and page structure. But how about images? You should provide a short written description of an image that adds to the reader’s understanding of a page.

That means you don’t need to write alt text for every image. If you’re publishing content about email stress and include a picture of a woman looking stressed, don’t write alt text for that.

But if you’re writing a review of bath bombs, then you should include detailed alt text for each image of the different bath bombs. That way the reader can grasp the differences in texture, size, shape, and so on.

Your content management system (CMS) or website builder will have a space in the image settings area for you to add alt text.

As a professional web writer, I spend at least some portion of my day writing alt text for images. So I can assure you that it gets easier over time, and soon it becomes second nature.

It’s worth reading the full alt text guidance from W3C (the World Wide Web Consortium, which sets the accessibility standards for the internet), but once you’ve done that you may still have some questions.

My favorite tip for writing alt text is to describe the picture as if you were speaking on the phone. If the person on the other end of the line could roughly sketch what you’ve described, would they have a picture closely resembling yours?

This mindset is helpful for a number of reasons. When you’re speaking on the phone, you have limited time to capture your listener’s attention. You’d only explain the main elements the listener needs to understand.

That means it doesn’t matter how many buttons are on the model’s shirt or if you can’t count the exact number of cows in the barn. Try to only pick the salient features of the image to get your message across.

Quick Checklist: Writing Alt Text

Use this list as a quick reference to ensure you’re writing alternative text properly:

1. Describe the main features of the image
2. If the image contains text, write this out
3. If an image is decorative, leave alt text blank
4. Leave out details that don’t contribute to meaning

Creating a Website for Distracted Users

Physical impairments are not the only barrier to website access. As a business owner, it’s easy to forget that your web visitor may have a range of mental distractions that interrupt focus.

In particular, adults with attention-deficit/hyperactivity disorder (ADHD) – of which there are 8.7 million in the US – often find it impossible to concentrate. People with autism, anxiety disorders, Parkinson’s, Dementia, and other neurological conditions may also struggle to focus on your website’s contents.

The “Web Disability Simulator” app lets you experience a website the way someone with ADHD does. Images enlarge and shrink independently, while random messages such as, “Did I eat lunch?” scroll across the screen.

Now that you’ve seen what it’s like to view a webpage while you’re totally distracted, you can adjust your design to suit people like this.

The Starbucks website actually performs fairly well for distracted users. The product images are large and bold, with a few lines of text beside each one. Important links at the bottom and top of the page have enough contrast so they’re easy to read (green text on a white background).

Top Web Design Tips for Distracted Users

Here’s a summary of advice from the W3C Web Accessibility Initiative on creating understandable content for readers with cognitive disabilities:

1. Use simple words instead of jargon
2. Spell out abbreviations
3. Clearly label web forms (for typing in email addresses, and so on)
4. Enable auto-fill
5. Allow opportunities for the user to correct mistakes
6. Show a confirmation message after form submission
7. Avoid time-based design features, such as windows appearing or disappearing

Remember to recruit website test users and ask them to report difficulties they had with finding content they were looking for.

Best Website Accessibility Checker Apps

I’ve mentioned a few different tools throughout this piece, but here’s a run-down:

1. WAVE Evaluation Tool

Best for: Confident beginners and intermediate-level web editors.

Uses:

• Identify and understand accessibility errors on any page
• Learn how to fix each issue

Drawbacks: 

• Takes some patience to get used to
• Altered webpage is hard to compare with the original

2. “Inspect” Tool on Your Browser

Best for: Confident beginners, intermediate, and advanced web editors.

Uses:

• Easily examine the code of any web page
• No need to install anything

Drawbacks: 

• No suggestions for improvement
• You’ll need other sources to know what to do next

3. Web Disability Simulator

Best for: Beginner website editors, test users, and website owners.

Uses:

• Immersive experience of your website from different user perspectives
• Understand user barriers
• Easy tips to improve accessibility

Drawbacks: 

• Limited range of disabilities simulated
• Won’t simulate assistive technology

Accessibility Improves Your Website for Search Engines

Your website will only appear on search engine results pages if it’s set up correctly. On-page and off-page SEO (search engine optimization) are complex strategies, so you may want to read around the topic if these are brand new concepts to you.

But a lot of the techniques to improve your website’s accessibility will indirectly improve the chances of appearing to users via search engines.

The reason is bots from Google, Bing, and other engines scan your page to look for its technical features. In a very similar vein to screen readers, search engine bots are looking for the following:

• Clear, easy and sensible navigation links between pages in your website
• Pages structured with logical headings and subheadings
• Content that helps the user achieve their goal or answer their query
• Alternative text that describes the contents or function of an image

Think User: Think Accessibility

As a business tool, your website should include as many potential customers as possible.

“You know it’s really interesting how sometimes merchants don’t seem to be interested in my money,” says Sisi, a 47-year-old blind web user, “But once you go on a website that is accessible and really works with a screen reader that makes a great difference.”

With just a few adjustments, you can add text alternatives to the visual elements on your page, and suddenly open up your website to millions more users.