Website Accessibility: A Beginner’s Business Guide

businessman wearing a suit and dark shades holds a cane standing in an office setting
Sabrina Dougall

“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:

gif shows navigation through menu links with each link highlighting in turn. The cursor arrow remains in the same position.
AccessibilityOz made this website so you can navigate menu links using the tab key.

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.

How Many Americans Have Disabilities?

Research shows 13.5% of those living in the US have a disability, such as visual, physical or cognitive. So if 1,000 people visit your website, 135 of those people may have some kind of disability.

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:

screenshot of a website with "Guiding eyes for the blind" text at the top, a logo of a man with a dog, and a list of links beneath
Screen readers can reduce your website to a list of links – so check they're in the best order.

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.

screenshot of Walmart homepage with screenreader app Wave overlaid, showing a red box around the "skip to main content" link
Walmart's homepage has an accessibility link in the top-left corner.

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 Do Screen Readers Process a Web Page?

Screen readers begin to scan a page from the top left corner, and read the first text (or link) element aloud. It continues to scan along in the typical reading direction (left to right), progressing down the page.

For this reason, it makes sense to include your most important (read: commercially valuable) links towards the top left corner of your web pages.

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.

image library in WordPress with "alt text" label underlined beside a textbox containing an alt description
You can find the alt text field in the image library of your CMS.

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.

screenshot of web page with profile of Karen and her assistance dog. Right hand inspect menu shows HTML code of the web page, including the alt text for the image: 'alt="Karen and black lab guide Bart sit outside for their team portrait"'
You can check the alt text of any image with right-click > Inspect > Elements and checking the contents of the "alt=" tag.

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.

web page preview where images change size, and a message blocks the view. It reads: "I have to get back to work soon..."
Users with ADHD view your website amid mental distractions.

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.

How Many Test Users Should Have Access Needs?

Research suggests that 85% of problems will be discovered by the first five users. So you should recruit at least five website testers who have access needs (such as visual impairments) to reveal usability issues.

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

webpage with lefthand dialog box with text explaining "errors empty form label, with subheadings what it means, why it matters, how to fix it". Web page view on the right side contains a list of labelled page features, including the empty form error highlighted with a dashed outline
WAVE points out specific errors on the page, with explanations of each one.

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

screenshot of Whitehouse website with Elements Inspector view open, right-hand panel shows HTML code of the page. Image is highlighted with a dialog box with a highlighted line showing a potential contrast issue because white text is overlaid on a partly white image. An icon of an arrow with a dotted outline of a square is also highlighted, near the middle of the image at the top.
The icon with the arrow and a dotted square allows you to view the code per page element (on click).

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

cosmetics images are greyed out because an app is running a colorblind simulation. A dialog box on the right-hand side explains tips to improve the website experience for colorblind users
Consider your use of color across your website, given some users are colorblind.

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
screenshot of two suitcases on a shopping website, with righthand panel containing code description including file names
Labeling your product photos with detailed file names can help Google to index your images.

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.

FAQs

What are the standards for web accessibility?
To avoid penalties and ensure everyone can access your website, you need to comply with Web Content Accessibility Guidelines (WCAG) and the Americans with Disabilities Act (ADA). That means your site is… Perceivable (images have alternative content such as alt text); Operable (can navigate it using a keyboard); Understandable (auto-fill text with the chance to correct it); Robust (compatible with current and future accessibility technology).
What is an ADA compliant website?
To avoid any potential legal action, you should ensure Americans with disabilities could access the services of your company through your website. If customers without visual, physical or mental impairments can access services or products on your website but an impaired person could not, that could count as discrimination.

A website that aligns with the Americans with Disabilities Act (ADA) is fully operable with assistive technology.

What are WCAG 2.0 accessibility standards?
The World Wide Web Consortium (W3C) defines global standards for website accessibility, with the Web Content Accessibility Guidelines (WCAG) 2.0 released in 2008. It has since been built upon, with WCAG 2.1 published in 2018, and WCAG 2.2 due for release in August 2023.
Written by:
Sabrina Dougall
Sabrina Dougall Web Marketing Expert

Sabrina is a business journalist whose career began in news reporting. She has a master’s in Investigative Journalism from City University London, and her work has appeared in The Times, The Daily Express, Money Saving Expert, Camden New Journal, Global Trade Review, and Computer Business Review. She specializes in writing about SEO (search engine optimization). Having run her own small business, Sabrina knows first-hand how critical digital marketing is to building a client base and local reputation.