How to Conduct a Simple Web Accessibility Audit

Ensuring your website is accessible to all users is critical to modern web design and development. This guide will walk you through conducting a basic accessibility audit on your website, helping you identify and address common issues that may prevent some users from fully engaging with your content.

What is Web Accessibility?

Web accessibility is the principle that everyone should be able to access your content. Just like in a physical store, some users will require accommodations to use the web. For example, blind and low-vision users typically browse the web using a screen reader — software that audibly reads out all text on a web page. This means that all the content on the page needs to be available as text to read, and seeing the visual aspects of the page is not required to understand it.

The Web Content Accessibility Guidelines (WCAG) provide a comprehensive standard for web accessibility. These guidelines are maintained by the World Wide Web Consortium (W3C), the standards body that oversees the web. Multiple levels of compliance are outlined —most organizations should aim to meet the Level AA standard.

The WCAG standards are divided into four main categories:

1. Perceivable: All users need to be able to perceive your content in the first place.
2. Operable: All users need to be able to perform any actions on the page and navigate around.
3. Understandable: The information and operation of the page need to be easily understood.
4. Robust: The page needs to work on all devices, including assistive devices.
   
   

Why Should You Care About Accessibility?

Web accessibility is not just a technical consideration. It's a crucial aspect of creating an inclusive online environment. Here's a closer look at why it matters:

1. Legal Compliance: Many countries have laws requiring websites to be accessible. In the United States, for example, courts have held that the Americans with Disabilities Act (ADA) applies to websites too. Many countries have equivalent laws, such as the ACA (Accessible Canada Act) in Canada, the Equality Act in the UK, and the European Accessibility Act in the EU, which will take effect June 28, 2025. Failing to meet standards can put you at legal risk.
2. Broader Audience: An accessible website can reach more users, including the millions of people with disabilities who use the internet.
3. Improved User Experience: Many accessibility features benefit all users, not just those with disabilities.
4. Better SEO: Many accessibility practices align with SEO best practices, potentially improving your search engine rankings.
5. Moral Imperative: Most importantly, it's about ensuring access to all users. If you neglect your website's accessibility, you're letting those users down and telling them they don't matter. That's a problem, both from a business and a moral perspective.
   
   

Simple Accessibility Audit Steps

Before getting too ahead of ourselves, it’s important to note this simple accessibility audit doesn’t cover everything in regards to accessibility. The following are just a few basic beginning tests that are simple to complete and can reveal serious problems. With that said, let’s move on!

Conducting an accessibility audit doesn't have to be a daunting task. By following these steps, you can identify many common accessibility issues and start improving your website's inclusivity. Let's dive into the process:

Automated Testing

Automated tools for accessibility testing are available and can catch many common issues. Here are some popular tools:

• aXe DevTools: Provided by Deque Systems, a leader in accessibility testing.
• Google Lighthouse: Part of Chrome's developer tools, which includes accessibility checks.

These tests can flag common issues with how your code is set up and highlight areas for review. However, it's important to note that while automated tools are helpful, they can't catch everything. They're a great starting point but shouldn't be your only method of testing.

A word of caution: Be wary of accessibility "overlays" - those widgets you sometimes see on websites that offer controls for adjusting the site's presentation. While they may seem helpful, accessibility experts generally don't recommend them. No overlay can fix all accessibility issues; it's better for the site to be accessible by default.

Manual Testing

You can also perform some tests manually. This is because necessary accessibility can be highly contextual. An automated test can check that you have alt text on your images but not that the alt text is actually useful or appropriate.

Empathy is the most essential skill when performing a manual test. It's about imagining yourself as a user who browses the web differently than you do.

Ultimately, the best way to do manual accessibility testing is with real users who use these technologies daily. This can be tricky to organize, but it'll give you real data with real users. However, there are still a few simple tests that anybody could perform, which can help catch some egregious and, unfortunately, common problems. They include:

Tabbing Through Your Site

One of the simplest yet most crucial tests you can perform is navigating your site using only a keyboard. Here's how to do it:

1. Start at your homepage.
2. Use the Tab key to move through interactive elements.
3. Use Enter to activate links and buttons.
4. Try to access all areas and functionalities of your site.

As you tab through your site, pay attention to the following:

• Visual Focus Indicator: As you tab, there must be a clear visual indication of where you are on the page. This is typically done by having an outline around the focused element. If your site doesn't have a visible focus state, that's a problem.
• Access to All Interactive Elements: You should be able to reach and interact with all elements using only the keyboard. If there's anything you can click with a mouse but can't access with a keyboard, that's a significant accessibility issue — and vice versa! Elements that aren’t interactive typically shouldn’t be focusable. 
• Skip Links: Your site should have "skip links," which are elements that are normally not visible but appear when the user focuses on them. These links allow users to skip past repetitive content (like headers) to the main content.
• Logical Focus Order: The focus should move logically and predictably as you tab through the page.
• Automatic Focus Management: For certain interactions (like opening a submenu or modal), focus should automatically move to the new content area.
• Focus Trapping: When a modal or dialog is open, the focus should be "trapped" within it until it closes and elements behind it should not receive focus.
• No Redundant Focusable Elements: Look for multiple unnecessary copies of a link. A common example would be a link card component: it's common to make the image, title, and "read more" text all separate links, which means a user would have to tab three times to get through it (three times as many button presses). They should only have to tab once. It is suggested to always put the link on the title element and then extend the click area over the whole card with CSS for mouse users.

If you can navigate your entire site and perform all tasks using only a keyboard, that's a good sign. If not, you likely have users who have been frustrated by the lack of keyboard accessibility.

Using a Screen Reader

Similarly, a good way to determine whether your site is accessible to screen readers is to try it yourself!

MacOS and iOS come with a screen reader called "VoiceOver", which you can enable in the system settings. On Windows, an excellent free screen reader is NVDA.

Using a screen reader can be pretty overwhelming at first.  They also come with quality-of-life features that average users will be familiar with, such as navigation options by page headings or links. There's certainly a learning curve to using a screen reader, but even the basic operation of reading a page from top to bottom can be useful.

Many screen readers have the feature of displaying a log of everything it's read out — check the settings for this. Having a log you can refer back to will help keep track of your test. For example of a good screen reader with a lot of shortcuts and guides, try out Deque.

Once your screen reader is installed and running, simply focus your page and try to navigate around. The arrow keys will help you with basic navigation. The primary things you're looking for are:

• Can you get all the same information by looking at the page? That means any images have descriptive text, directions don't rely on visual elements, and important context is not hidden from the user.
• Is the description for images solid? Because it's not part of the visual experience of using a website, image "alt" text is often neglected. Good alt text is concise and could conceivably replace the imagine itself without losing any context. For an interactive element, it should describe what it does and can sometimes be empty, if the image is truly just decorative. 
• When you're on an interactive element, do you know what that element will do before you press it? Links should describe their destination and be unique, and buttons should describe their actions. All form elements should have appropriate labels.
• Does the screen reader communicate all the necessary states on the page? For example, if checkboxes are checked or a toggle button is pressed, do you get some kind of notification when that state changes?
• Are things generally pronounced correctly? You shouldn't worry about the occasional word being pronounced oddly. Your users are probably used to it, but if everything is off, that's a sign that your page isn't configured to use the correct language. The screen reader may be trying to pronounce English text with French rules!
• Is it reading out anything it shouldn't? Hidden elements may still be picked up by screen readers, which can be confusing to the user.
  
  

Color Contrast Check

Proper color contrast is crucial for users with visual impairments or color blindness.

How to do it:

• Use a color contrast checker tool (many are available online)
• Check the contrast ratio between text and background colors

What to look for:

• Does your text meet the WCAG AA standard for contrast ratio?
• Are essential visual elements distinguishable for colorblind users?
• Is any important information conveyed by color alone?
• Do background images have sufficient contrast with the text above them? If not, consider adding an overlay to darken or lighten the image.
  
  

Content Structure Review

Proper content structure helps all users navigate your site more efficiently, especially those using assistive technologies.

How to do it:

• Review your heading structure
• Check your use of lists, tables, and other structural elements
• What to look for:
• Are headings used logically and hierarchically (H1, H2, H3, etc.)?
• Is content organized in a clear, logical manner?
• Are lists and tables used appropriately to structure information?
• Are there any references to visual positioning (e.g., "click the button on the right") that might not make sense to all users?

Is plain and clear language used whenever possible?

Review Page Settings

It's also a good idea to review your page's settings. Your developer may have provided you with accessibility controls for non-visual elements that you've overlooked, such as fields to help fill in hidden labels for screen readers.

You should also review fields for image alt text. Writing good alt text is somewhat contextual, but generally, you should be able to replace the image with its alt text without losing any information, and the alt text should be concise. Alt text that's part of an interactive element should describe the action the user should expect.

What to look for:

• Are there fields for alternative text for images? Are they filled in correctly?
• Are there options for adding captions or transcripts to audio and video content?
• Are there fields for adding labels to form elements?
• Is the page language set correctly?
• After reviewing these settings, verifying them with a screen reader is crucial to ensure they're being applied correctly.
  
  

Additional Considerations

1. Ensure that all functionality is available from a keyboard. This is important for people who may have motor disabilities and can't rely on a mouse as much.
2. Don't use any functionality, like flashing animation, that could cause seizures.
3. Provide alternatives for time-based media, such as audio or video. This can include captions for pre-recorded audio or live audio.
4. Ensure your visitors can pause, stop, or change the volume on any audio. This is especially important for users with hearing impairments.
5. Always help users navigate, find content, and determine their location through purposeful links, a sitemap, clear headings and labels, and visual indications.
6. Don't add unpredictable functionality to your web pages, like automatic form submissions, opening tabs in new windows, or switching focus abruptly throughout the page.
   
   

Get Help with Web Accessibility 

These audit steps can help you identify many common accessibility issues on your website. Still, web accessibility is complex, and a comprehensive audit often requires specialized knowledge and tools.

It's important to understand that accessibility is an ongoing process. As your site evolves and grows, you'll need to check and maintain its accessibility continually. While these tests are a great starting point, the ultimate test of accessibility is having real users with disabilities use your site.

If you need assistance with a more thorough accessibility audit or implementing accessibility improvements on your website, don't hesitate to contact us at Lynton. Our team of web experts can help ensure your site is accessible to all users, compliant with relevant laws, and provides the best possible user experience.