Written by Sabrina Dougall Updated on July 31, 2023 On this page What Is an Accessible Website? Legal Penalties for Inaccessible Websites Boost Accessibility, Reach More Customers How to Write Image Alt Text Creating a Website for Distracted Users Best Website Accessibility Checker Apps Accessibility Improves Your Website for Search Engines Think User: Think Accessibility FAQs Expand “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 largerContrast between background and text colorsLinks you can navigate using the keyboardAlt text that's useful for understanding the meaning and purpose of each imageVideos with captions and any audio fully transcribedError messages are communicated with text, not just colorWhy 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:AccessibilityOz made this website so you can navigate menu links using the tab key. Legal Penalties for Inaccessible WebsitesIn 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 CustomersThe 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: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.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.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.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 TextUse this list as a quick reference to ensure you're writing alternative text properly:Describe the main features of the imageIf the image contains text, write this outIf an image is decorative, leave alt text blankLeave out details that don't contribute to meaning Creating a Website for Distracted UsersPhysical 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.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 UsersHere's a summary of advice from the W3C Web Accessibility Initiative on creating understandable content for readers with cognitive disabilities:Use simple words instead of jargonSpell out abbreviationsClearly label web forms (for typing in email addresses, and so on)Enable auto-fillAllow opportunities for the user to correct mistakesShow a confirmation message after form submissionAvoid time-based design features, such as windows appearing or disappearingRemember 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 AppsI've mentioned a few different tools throughout this piece, but here's a run-down:1. WAVE Evaluation ToolWAVE 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 pageLearn how to fix each issueDrawbacks: Takes some patience to get used toAltered webpage is hard to compare with the original2. “Inspect” Tool on Your BrowserThe 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 pageNo need to install anythingDrawbacks: No suggestions for improvementYou'll need other sources to know what to do next3. Web Disability SimulatorConsider 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 perspectivesUnderstand user barriersEasy tips to improve accessibilityDrawbacks: Limited range of disabilities simulatedWon't simulate assistive technology Accessibility Improves Your Website for Search EnginesYour 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 websitePages structured with logical headings and subheadingsContent that helps the user achieve their goal or answer their queryAlternative text that describes the contents or function of an imageLabeling your product photos with detailed file names can help Google to index your images. Think User: Think AccessibilityAs 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 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.