Many fundamental best practices in accessibility overlap with SEO, making it essential to address accessibility issues to enhance the user experience and improve search rankings.
In this blog post, we will explore the core areas of accessibility, discuss useful tools for auditing, and provide a practical audit template.
Accessibility Standards
Before you start auditing for accessibility it’s important to familiarize yourself with the WCAG to understand the requirements. There are countless resources out there that can help you with specific issues but WCAG sets the standard.
WCAG levels of conformance are divided into three levels: A, AA and AAA. Level A addresses the most basic accessibility issues and is the most commonly accepted standard. Level AA includes more advanced features such as keyboard accessibility, more contrast and larger text size. Level AAA is the highest standard and includes unique features like sign language, better colour contrast and larger text size.
When starting a project, you should identify the level of compliance your project needs to meet and make sure you stick to it.
It is important to note that there is no one-size-fits-all approach to accessibility auditing. You should consider the type of site you are auditing, such as a corporate website or eCommerce store. You should also consider the target audience, such as people with disabilities, elderly people or users in developing countries.
Resources for testing & auditing accessibility
The tools and techniques you use to audit for accessibility will depend on the type of project you are auditing and the level of compliance you are aiming for. There are loads of tools available, such as automated auditing tools, browser extensions and manual techniques. Most of the available tools are free and easy to use. Here are a few commonly used ones:
Lighthouse
Lighthouse is an open-source tool built into the Google Chrome browser’s Developer Tools. It provides an Accessibility audit that checks for common accessibility issues and generates a report with recommendations.
AxeDev Tools
AxeDev Tools is an open-source accessibility testing toolkit developed by Deque Systems. It offers browser extensions for Chrome and Firefox that scan web pages for accessibility issues and provide detailed reports.
Sitebulb
Sitebulb is a crawling tool which has the option to audit a site for accessibility issues. This tool scans for issues across a whole site using the AxeDev Tools framework to identify issues. I recommend this tool as it allows you to look for issues at scale.
WAVE Web Accessibility Evaluation Tool
WAVE is a web accessibility evaluation tool provided by WebAIM. It allows you to enter a URL or upload HTML files to generate reports highlighting potential accessibility errors and providing suggestions for improvement.
Chrome DevTools
This browser extension is available for Chrome and Firefox and offers a variety of web development and accessibility testing tools, including options for inspecting and analyzing page structure, colour contrast, and more.
Accessibility Insights
This is a suite of tools provided by Microsoft for evaluating and fixing accessibility issues. It includes a browser extension, a Windows desktop app, and an automated testing service.
Testing with assistive technology
Use screen readers, such as NVDA (NonVisual Desktop Access) or VoiceOver, to navigate and interact with the website. Test with other assistive technologies relevant to the accessibility requirements.
Manual mobile testing
I also like to navigate the mobile version of a website using only my knuckles to simulate what a user with limited hand mobility may experience.
Auditing for accessibility
Once you have identified the tools you need to use, you can create an audit report. This should include an overview of the results, a list of issues, and recommendations to address the issues. Your audit report should be easy to read and understand so that your client can take action to make their site more accessible.
I have put together a template for auditing accessibility which includes resources to help you learn more about each issue.
At the end of the audit, you should summarise your findings and any recommendations you have for improving the site’s accessibility. Your client should be able to use this report to develop a plan of action for addressing any issues that were identified.
By including accessibility in your SEO audits, you can ensure that your client’s websites are accessible to everyone who visits them.
Web Accessibility Fundamentals
Once you are comfortable with WCAG standards, the tools you are using and have set up your auditing document. You are ready to go below is a brief list of some of the areas you will need to audit.
- Keyboard navigation: Ensure that all functionality, including navigation and interactive elements, can be accessed using only the keyboard. Test tab navigation, focus indicators, and interactive elements.
- Alt text for images: Verify that all images have descriptive alternative text (alt text) that conveys their purpose or meaning. Ensure decorative images have empty alt attributes.
- Headings and structure: Check that headings are used properly and in a hierarchical order (h1, h2, h3, etc.). Ensure content is organized using appropriate HTML elements (e.g., headings, lists) to create a logical structure.
- Colour contrast: Evaluate colour contrast ratios to ensure that text is readable. Use a colour contrast checker tool to verify that the text meets the WCAG contrast requirements.
- Form accessibility: Test form elements, such as input fields, checkboxes, and radio buttons, to ensure they are accessible via keyboard navigation and have associated labels for screen readers.
- Links and navigation: Verify that links have meaningful names or descriptions and make sense out of context. Check navigation menus, breadcrumbs, and skip links to ensure they are accessible and properly labelled.
- Multimedia content: Evaluate audio and video content for captions, transcripts, and audio descriptions. Ensure media players are accessible and provide controls for playback.
- Focus and visibility: Confirm that all interactive elements receive keyboard focus and have visible focus indicators. Ensure the website layout and styling are responsive and adaptable for different screen sizes.