The impact of accessibility on SEO

Today accessibility not just a favor but a right. Worldwide, about 15% of the population has some form of disability. All things considered (as, for example, do the elderly), about a quarter of the world’s population benefits from an accessible website. Not taking this seriously means shooting yourself in the foot.
With my experience working with organizations to make their websites more accessible, I want to take you through how I optimize this for my clients. From understanding the different needs and challenges of users to applying practical techniques and tools that make any site more accessible.(1)
How does accessibility affect SEO?
Accessibility of a website is an important aspect that has a definite impact on SEO (more than you think):
- User experience: accessible websites offer a better user experience, which in turn can lead to a lower bounce rate and longer visit duration. Google and other search engines appreciate this, and it can help with higher rankings.
- Mobile responsiveness: websites that work well on mobile devices are often ranked higher by search engines. Since mobile accessibility is an important part of overall accessibility, it plays a role in SEO.
- Site speed: an accessible website will often be optimized for speed. Faster load times contribute to a better user experience, which in turn can have a positive impact on rankings.
- Alt texts for images: using alt texts helps describe images for people using a screen reader. This is not only good for accessibility but also helps search engines understand the image content.
- Semantic HTML: well-structured HTML not only makes a Web site more accessible but also helps search engines better understand the content. Proper use of headings (H1, H2, etc.) and other semantic elements can contribute to SEO.
- Link accessibility: clear and descriptive link text makes navigation easier for users and also provides context for search engines.
- Compliance and fines: in some jurisdictions, Web sites that do not comply with accessibility standards may be subject to fines and penalties.
- Duplication of content: accessible websites often avoid unnecessary duplication of content, such as having separate mobile versions of pages. This can help avoid problems with duplicate content, which in turn is beneficial for SEO.
In general, improving a website’s accessibility can lead to a better user experience, which translates into signals that are positive for search engines (Chrome has a test for accessibility in it for a reason). An accessible site can attract more traffic, retain users longer, and ultimately contribute to a higher ranking in search results.(2)(3)
How does Lighthouse test for accessibility?
Chrome DevTools offers an accessibility audit via the Lighthouse tool, which can rate a page on various accessibility aspects. Here are some of the aspects on which Chrome DevTools can test:
- Image descriptions: verify that all images have an alt text that describes what is in the image.
- Contrast ratio: assess whether the text has sufficient contrast with the background, which is important for readability.
- Form elements: verify that form fields have correct labels and descriptions so that users understand what information is required.
- Keyboard navigation: verify that the website is navigable with a keyboard, without the need for a mouse.
- Document structure: analyze semantic HTML structure, including the proper use of headings, roles and other important HTML elements.
- Aria features: tests whether ARIA (Accessible Rich Internet Applications) features are correctly implemented to improve accessibility for screen readers.
- Zoom and scalability: verify that users can zoom and scale the text up to 200% without losing functionality or content.
- Language attributes: verify that the correct language is defined in the HTML, which helps screen readers read the content correctly.
- Table formatting: assess whether tables are correctly formatted with appropriate headings and data cells so that information is presented logically.
- Audio and video: tests for the presence of subtitles, transcripts or other alternatives to multimedia content.
- Focus management: evaluate whether focusable elements have a logical sequence and whether there are visible focus indicators.
- Color blindness: some tools can simulate how a page looks to users with different types of color blindness, although this may not be directly in Chrome DevTools.
- Timing and animations: analyze whether the site offers time limits and whether movements and animations can be paused or stopped.
- Obsolete or incorrect HTML: check for the presence of obsolete or incorrectly used HTML elements that may affect accessibility.
Lighthouse in Chrome DevTools provides a standardized and comprehensive way to identify these and other accessibility issues, and often offers suggestions and documentation on how to fix the problems. It is a valuable tool for developers who want to improve the accessibility of their Web sites.(4)
Accessibility solving and the resources needed
Below is a table of some key accessibility issues, their priority, possible solutions and the resources needed. Priorities may vary depending on the specific needs of a Web site and its users, but this provides a general overview.(5)
Item | Priority | Solution | Resources |
---|---|---|---|
Image descriptions | High | Add alt text to all images describing content. | HTML/CSS knowledge, Screen reader tools for testing. |
Contrast ratio | High | Adjust colors to meet the minimum contrast ratio. | Color contrast tools such as WebAIM’s Contrast Checker. |
Form Elements | High | Label form fields clearly and use appropriate HTML elements. | HTML/CSS knowledge, accessibility testing tools such as AXE. |
Keyboard navigation | High | Make sure that all interactive elements are accessible from the keyboard. | Testing with keyboard, browser development tools. |
Document structure | Medium | Use semantic HTML such as correct headings and lists. | HTML/CSS knowledge, semantic testing tools. |
Aria features | Medium | Use ARIA roles and attributes as necessary and appropriate. | ARIA specification, Screen reader tools for testing. |
Zoom and scalability | Medium | Ensure that text and content can be enlarged without loss of functionality. | Browser testing, mobile emulator. |
Language attributes | Low | Define the primary language of the page using the lang attribute. | HTML knowledge. |
Table Format | Low | Use appropriate table elements such as <thead> , <th> , etc. | HTML/CSS knowledge. |
Audio and video | Medium | Provide subtitles, transcripts or other alternatives for multimedia content. | Video editing software, transcription tools. |
Focus Management | Medium | Provide a logical focus sequence and visible focus indicators. | Keyboard testing, browser development tools. |
Colorblindness | Low | Test and design for different types of color blindness. | Colorblindness simulator tools. |
Timing and animations | Low | Offer options to pause or stop movements and animations, and provide sufficient time for time-bound actions. | JavaScript/CSS knowledge, Animation control tests. |
Outdated/incorrect HTML | Low | Replace or update outdated or incorrectly used HTML elements. | HTML/CSS knowledge, Validator tools such as W3C Validator. |
It is important to note that accessibility is not a one-time project, but an ongoing process. Regular testing and updating, and engaging users with different needs, can help make a Web site as accessible as possible.
What I often see with clients is that the same mistakes keep creeping in. Particularly issues surrounding the components that are frequently changed on a Web site:
- The structure of the HTML;
- matters surrounding images;
- adjustments in mobile usability;
- the readability of texts;
- contrast (colors).
Such things are quite often overlooked in an organization. Especially during “quick” website changes, this can go wrong.
Getting started with the accessibility of your website
Working on website accessibility can be a complex process, but it can be structured using a framework. Here is a general framework that can be used to improve the accessibility of a Web site:(6)
1. Understanding and awareness
Goal: Make sure the entire team understands what accessibility means and why it is important.
- Training and education: provide training to developers, designers and content creators on accessibility standards and techniques.
- Research: research the specific needs and requirements of your users, including legal obligations.
2. Planning
Goal: Define clear goals and establish a plan to achieve them.
- Policy: develop an accessibility policy, including standards such as WCAG.
- Priorities and goals: identify priority areas and set measurable goals.
- Tools and resources: choose the tools, technologies and resources that will be used.
3. Design and development
Goal: Integrate accessibility at every stage of design and development.
- Accessible design: use accessible design patterns and color schemes.
- Semantic code: write clean, semantic HTML and CSS.
- Keyboard and screen reader friendly: ensure full keyboard accessibility and test with screen readers.
- Responsiveness: ensure responsiveness on different devices and screen sizes.
4. Testing
Purpose: verify that the site meets the accessibility standards set.
- Automated testing: use tools such as Lighthouse to test for common problems.
- Manual tests: perform manual tests such as keyboard navigation and screen reader tests.
- User testing: involve real users with different needs in the testing process.
5. Implementation and maintenance
Goal: Launch the accessible website and continue to maintain it.
- Implementation: go live with the tested and validated accessible website.
- Continuous monitoring and updates: regularly monitor and update the website according to the latest standards and technologies.
- Feedback loop: establish a system for user feedback to enable continuous improvement.
6. Documentation and Training
Goal: Document all processes and train the team to ensure that accessibility becomes an integral part of the organizational culture.
- Document processes and guidelines: create manuals and documentation for future use.
- Training and awareness: continue to train and make team members aware of the importance of accessibility.
Closing
This framework is a guide for working on accessibility and can be adapted to the unique needs and challenges of each project. By making accessibility an integral part of the entire process, organizations can ensure an inclusive user experience for all.
Conclusion
As discussed in this article: The accessibility of a website plays a huge role in both its SEO and conversion. This failure to optimize also means that you no longer “appeal” to a quarter of your visitors (even more than that for some sites).
Use Lighthouse’s standard tools to map this thoroughly. One-time optimization often does not provide the desired outcome. I see it as a process for every SEO project (because otherwise it’s back to the same level six months later). Good luck!
- Initiative, W. W. A. (s.d.). Introduction to Web Accessibility. Web Accessibility Initiative (WAI). https://www.w3.org/WAI/fundamentals/accessibility-intro/
- Kc, A. (2023, April 4). The Impact of Website Accessibility on SEO: An In-depth Analysis. ADA Site Compliance. https://adasitecompliance.com/website-accessibility-seo-impact/
- UserWay. (2024, Jan. 11). SEO & Accessibility in 2024 🔥 Key Strategies for Success. UserWay Blog. https://userway.org/blog/the-impact-of-accessibility-on-seo/
- Lighthouse accessibility scoring. (2019, Sept. 19). Chrome For Developers. https://developer.chrome.com/docs/lighthouse/accessibility/scoring
- Overview. (2016, Sept. 27). Chrome For Developers. https://developer.chrome.com/docs/lighthouse/overview
- 30 Web Accessibility Tips | AccessComputing. (s.d.). https://www.washington.edu/accesscomputing/30-web-accessibility-tips