How to Use the Page Inspector in WebYes Accessibility
Last updated on 16 September 2025
What is The Page Inspector?
The ‘Page Inspector’ is one of the most helpful features of WebYes Accessibility. In the ‘Inspector tool’, you can view the issues highlighted for each element on your website page.
Inspector tool
Features
- Elements having issues highlighted in the red box and circles for easier identification.
- The inspector tool allows you to hide specific elements by toggling the ‘Hide element’ option.
- Option to view the focus order of the accessible elements on the website.
- AI-generated insights for each issue detected in the Page Inspector.
Steps to Use The Page Inspector Tool
- First, select the ‘Pages’ option on the top navbar of WebYes Accessibility as shown below.
Pages option
- Then, select the page that you want to resolve the issues. In the pages section, the pages are prioritised by the number of issues each page has.
Page selection
- After selecting the page, you will see the issues listed for that specific page. Click on it to get started.
Issues listed
- When the issues are clicked, you will see a pop-up, as shown below, that has details of the WCAG criteria which is not followed, along with the ‘View in inspector’ button. Click on it to view the Inspector Tool.
‘View in inspector’ button
- The Inspector Tool will be seen as shown below. You will see that the affected elements will be listed on the left side, and each of them will be highlighted on the website with red circles along with a red highlight box, as shown below.
Highlighted elements
- Click on the ‘Generate solution’ option to view the solution.
Generate solution option
- You will see the AI solution for that particular issue as shown below. Make sure to get these solutions reviewed and validated before implementation.
AI-solution pop-up
- If you wish to find the location of that specific code, click on ‘Show code’ next to the Generate solution option, as shown below.
‘Show code’ option
- Then a pop-up will open which automatically scrolls down and highlights the code snippet (in red rectangle) that needs resolving, as shown below.
Highlights where the code is while inspecting
Hide Option
You can use the ‘Hide element’ option to remove elements, which makes it difficult to identify or view elements that need fixing. This is especially useful when a cookie banner or advertisement overlaps the element that needs to be resolved of issues. You can see how the website looks before and after turning on the ‘Hide element’ option.
Note: After toggling the ‘Hide element’ to on, click on the elements that you want to remove.
Hide element turned off
Hide element turned on
From the above comparison, you can see that the image element, along with the navbar, has been removed, making the page simpler and easier to identify and resolve issues.
Focus Order
In the Inspector tool, you can see the focus order of the selected webpage to check for accessibility while clicking the tab key. Click on the ‘Focus order’ option on the bottom left, shown below.
Focus order option
You will then see the focus order listed on the left side of the page, while it is simultaneously illustrated in real time on the webpage to the right.
Focus order list and illustration
Click on an element in the listed focus order, and the Inspector tool will automatically detect and highlight the corresponding element. This will help you understand if your website navigation follows a logical focus order and there are no breaks in that flow.
If you want to know more about WebYes Accessibility, refer to ‘Getting Started with WebYes Accessibility’.