Shadow DOM Support

As of our February 2024 update, Siteimprove Accessibility now analyzes Shadow DOM using the same process used for reviewing standard HTML content.

What is Shadow DOM?

Shadow DOM is a powerful tool used by web developers for creating new websites. It offers encapsulation, modularity, and improved reusability, which contribute to building more maintainable and scalable web applications.

Shadow DOM is one of the three main technologies of web components.

How do I know if my website has been built using Shadow DOM?

You can ask your web developers, or you can inspect the web pages in your browser using the following process:

1. Go to the URL in your browser
2. Open the DevTools (In Chrome you can right click on the content on the page and click "Inspect" or you can use your F12 key)
3. When you hover over the code in the DevTools window it will highlight the part of the visible page content that the code relates to
4. Search for the element you're interested in and look for “shadow-root” in the code. The content within the shadow-root is the Shadow DOM content

Crawlers and Shadow DOM

Traditional web crawlers may face challenges when it comes to handling content within Shadow DOM. Shadow DOM is designed to encapsulate and isolate the internal structure of a component, making it less accessible to standard crawling techniques.

Search engines and web crawlers typically rely on parsing the HTML structure of a webpage, but the content inside Shadow DOM is hidden from this direct view. As a result, the information within Shadow DOM may not be effectively indexed or understood by conventional crawlers.

Siteimprove and Shadow DOM Support

Siteimprove has historically encountered the same challenge that most other web crawlers have faced with Shadow DOM. Siteimprove crawled HTML, Javascript, and CSS, and the content was then analyzed by the Siteimprove content products (Quality Assurance, Accessibility, SEO, Policy). The content was rendered in the Siteimprove page reports and any issues were highlighted in those reports. This process functioned well as long as there are no Shadow DOM elements on a page. 

If Shadow DOM elements existed on a page and without the ability to render Shadow DOM, the page reports in Siteimprove were unable to show those elements. The Shadow DOM would also not be analyzed and the issues were not highlighted in the page reports. The gravity of this problem depends on the amount of Shadow DOM used on your websites pages:

• In some cases the Shadow DOM elements would only include small parts of a page, such as a dropdown, with no significant impact on results
• In other cases it could affect major parts of a page including the header, all the menu items, and all links in it
• In the worst case scenarios it could impact the entire website and all its content

With this Accessibility update, the Siteimprove crawler will first detect and parse the Shadow DOM content on your pages. The Accessibility product then analyzes this data, rendering the page report – including Shadow DOM elements – and highlighting issues found in Shadow DOM elements in the page report.