Check Website Accessibility - Using WAVE and Google Lighthouse

The Digital Accessibility Enhancement Act, scheduled for 2025, marks a significant advance in the development of an inclusive digital society. It aims to improve the accessibility of digital products and services for people with disabilities. This legislation builds on existing legal frameworks for accessibility and extends them to meet the needs of the digital age.

It is a good reason to check if your website meets the requirements. In this article, you will learn how to use the tools WAVE and Lighthouse to identify issues, determine what actions are needed, and get a good idea of what it means to optimize your website to meet WCAG - AA criteria.

Why the WCAGs matter

A key aspect of this law is compliance with the Web Content Accessibility Guidelines (WCAG) developed by the World Wide Web Consortium (W3C). The WCAGs serve as an internationally recognized standard for web content accessibility and are divided into three levels of conformance: A, AA, and AAA. These guidelines offer detailed recommendations on how to design digital content to make it accessible to people with a range of disabilities, including visual, auditory, motor, and cognitive impairments.

The law is expected to include requirements ensuring that websites, mobile applications, and other digital technologies comply with WCAG standards. This means that developers and providers of digital products and services must design their offerings to be accessible to all users, regardless of their physical or sensory abilities. Key elements of the WCAG include ensuring keyboard operability, providing alternative text for visual content, enhancing the usability and understandability of content, and compatibility with assistive technologies.

The Digital Accessibility Enhancement Act will have far-reaching impacts on the public sector as well as on companies providing digital products and services for the German market. Implementing WCAG compliance will not only promote digital inclusion but also improve the quality and accessibility of online offerings overall.

Measuring accessibility with Google Lighthouse

Lighthouse is an open-source tool developed by Google to improve the quality of websites. It is a valuable resource for both developers and website operators to analyze and optimize the performance, accessibility, best practices for web applications, and search engine optimization (SEO) of your websites.
Accessibility and SEO have synergies that should not be underestimated when optimization aims not only at accessibility but also at increasing organic visibility. A whitepaper with helpful checklists is available from us.
The installation, functionality, and measurement of accessibility with Lighthouse are explained below.

Lighthouse can be installed and used in several ways:

• Lighthouse can be installed as an extension in the Google Chrome browser. You can simply visit the Chrome Web Store, search for Lighthouse, and add it.

• Lighthouse is also directly integrated into Chrome DevTools. To use it, you simply open the DevTools in Chrome, navigate to the "Lighthouse" tab, and start the analysis in Lighthouse.

• The website PageSpeed Insights also evaluates accessibility.

Lighthouse performs a series of tests to evaluate various aspects of a website. The results of these tests are summarized in a report that not only shows the performance of the page but also offers specific recommendations for improvement. The report is divided into several categories:

Categories measured in Lighthouse

Measuring accessibility with the Lighthouse tool

Accessibility is evaluated by Lighthouse through a series of automated tests as well as manual review recommendations. These tests include:

• Contrast ratios: Checking the text contrast compared to the background.

• Keyboard accessibility: Ensuring that all interactive elements of the website are reachable and usable by keyboard.

• Aria attributes: Use of ARIA (Accessible Rich Internet Applications) attributes to improve accessibility for screen readers and other assistive technologies.

• HTML structural elements: Using correct HTML elements to structure content and navigation elements.

• Classic SEO basics, such as heading structure, ALT attributes, or [lang] attributes.

It is important to note that despite the comprehensive tests by Lighthouse, a fully accessible website cannot be guaranteed solely through automated checks. The manual review recommendations provided by Lighthouse are a crucial step to ensuring comprehensive accessibility.

In the Google Developer Tools, a hierarchy of evaluation is published, where individual factors carry a weight from 1 to 10.
It is advantageous to focus first on the measures with a higher weight - interestingly, these factors are also closely linked to SEO measures.

Excerpt of individual metrics and weightings

The Google Tool Lighthouse shows the individual errors in website accessibility, categorized by topic. The display is in accordion format, ensuring an overview - see 1.

Lighthouse also offers users the option to display more information about the errors. In this example, it not only shows what an ALT attribute for images should look like but also how it should be best implemented in the source code so that it can be read by search engines and also by assistive technologies like screen readers - see 2.

The final part specifically displays the elements where the aforementioned error occurs, in the form of a screenshot and a snippet of the code. Unfortunately, the screenshots shown by the Lighthouse Tool are very unclear, making it difficult at first glance to place the element on the entire website - see 3.

Error display in Google Lighthouse

In summary, Lighthouse is a powerful tool that helps web developers and website operators analyze and optimize their websites. With its versatile installation and usage options and detailed reports and recommendations, Lighthouse plays an important role in modern web development, especially in the area of search engine optimization, where these values are an important indicator. So far, Google has not made a specific statement that the accessibility of a website is a ranking factor. However, many metrics are already indirectly evaluated. Accessible websites are becoming increasingly important, so it's only a matter of time before possible indicators and measurements are also found in the Google Search Console.

WAVE - Tool with visual marking of accessibility

You can also easily and freely test your website's accessibility using the WAVE tool. However, unlike the Lighthouse tool, it was not developed by Google itself. Lighthouse provides the advantage that the results come directly from Google and may be a more significant indicator for ranking. WAVE was developed by the recognized organization WebAIM and also adheres to WCAG guidelines. The results of the respective tools should thus not differ significantly when testing a website for accessibility. Therefore, for us, the clear presentation of results and the handling of the tool are in the foreground. There is also a paid version. The WAVE API is installed locally and can analyze your entire website. In this article, we present the free version and do not go into the WAVE API further.

WAVE is available both as an online version and as a practical browser extension for Chrome and Firefox, allowing web content to be made easily and efficiently accessible. When using it, you stay visually on the website (see Figure 4). The tool shows accessibility hints and errors using small icons. This immediate feedback allows you to quickly identify and address issues. WAVE pays particular attention to critical aspects of accessibility - from alt attributes to the labeling of forms to contrast issues. It also shows whether your website has a clear structure. Additionally, the WAVE tool considers ambiguous or non-descriptive links and the use of ARIA labels, which can be used to provide an optimal web experience for people using screen readers.

Using the WAVE Tool on the Google Store

Error identification

On the left side of the screen, there is a dashboard. It serves to navigate and display accessibility elements. The menu consists of six different sections and is intuitively usable. In addition to the summary of how many errors and contrast errors, warnings, features, structural elements, and ARIA usages there are, they are listed in the "Details" tab. Here you can click directly to the cause on the website. Under "Reference," you find a detailed description of the problem and how to fix it (see Figure 5).

Dashboard of the WAVE Tool (Section 1 - 3)

Furthermore, there is the option to disable styles or open the HTML code directly at the appropriate place. The WAVE tool ensures that every error can be found and identified.

The tool for testing websites for accessibility also shows the tab order (navigation with the tab key to all interactive elements - links & form fields). It provides an overview of the structural setup with headings and offers the option to manually check contrasts (see Figure 6). This can be important, for example, for contrast ratios on relevant images, as the WAVE tool does not check these. In some cases, for example, when text is directly in the image, it is also important that it can be read by everyone.

Interpretation of the results

Errors and contrast errors are usually clear violations of WCAG Level AA guidelines and should be rectified before the Accessibility Enhancement Act takes effect. In the case of warnings, the WAVE tool identifies potential barriers that are not as drastic and not always based on a legal basis. However, all results should generally be critically examined and controlled before implementation.

With the use of features and ARIA labels, these are HTML elements designed, among other things, to enable accessible websites. However, they should be used correctly. For example, an existing alt attribute of an image is marked as a feature. However, the quality or correct use cannot be captured by the WAVE tool. Alt attributes should ideally describe the content of the image as they are read aloud by screen readers. You need to check for yourself if they are well-chosen. Another example is ARIA labels. Here, correct use is also important. The WAVE tool shows all used labels. However, they can also be used incorrectly and cause more barriers. To check if they are used correctly, it's very helpful to use your website with a screen reader. For Windows devices, we recommend the screen reader NVDA, which is free to download and easy to use. Apple devices have the "VoiceOver" accessibility feature integrated.

The tab order should follow a logical sequence of links, visually counting up from left to right and from top to bottom on the website. If this is not the case, the code needs to be adjusted.

Conclusion - Lighthouse and WAVE

The benefits of accessibility are clear. It's an opportunity for website operators to improve usability and make content accessible to all. At the same time, visibility also benefits from accessible implementation.

But which tool should you use to check your website for accessibility? In this blog article, we introduced two tools, Lighthouse and WAVE. These are our two favorites. Both can be used as browser extensions or directly on the respective website. Lighthouse is a Google tool and has the advantage that the results may soon directly influence the ranking. Implementing the tool's suggestions puts you in a good position from an SEO standpoint. In our opinion, WAVE clearly has the edge in terms of result presentation. Errors and notices are directly visible on the page. From a contrast checker to the display of the structure to the option to disable styles, the WAVE tool offers a wide variety of applications. It remains clear and easy to use. The errors and warnings of the two tools are very similar according to our experience.

However, it is important to emphasize that these are automated tools. The actual assessment and understanding of barriers require human judgment. Therefore, it is recommended to further review the identified results with screen readers to get a realistic picture of a website's accessibility. Another aspect is that they only analyze individual pages and not the entire website. This can lead to missing problems that arise from the interaction of different pages.

Do you need help checking and implementing accessibility for your website? The warriors from Berlin are happy to assist you. By June 28, 2025, all affected websites must be accessible. Prepare now and stand out from your competitors! You can contact us for a non-binding offer at any time.