[Question]: Draw bound box on the Website

[Justin-Xiang]

Project

accessibility-checker for Node

Description

Hi Developers,

I've noticed a bounding box in the result JSON file when using accessibility-checker. I'd like to know the resolution that accessibility-checker uses, as I want to accurately draw the bounding box on the website. The values in the JSON appear to be absolute positions.

Thanks in advance!

[Justin-Xiang]

sample codes:

const aChecker = require("accessibility-checker");

aChecker
    .getCompliance("https://www.reddit.com", "Reddit")
    .then((results) => {
        const report = results.report;
        console.log(report);
    })
    .catch((err) => {
        console.error(err);
    })
    .finally(() => {
        aChecker.close().catch(console.error);
    });

[tombrunet]

Resolution isn't applicable within a web page context. They're referred to as "CSS pixels", which are device agnostic. Resolution is a property of the screenshot, so it depends on the mechanism by which you're taking a screenshot and what device the screenshot was taken on.

[Justin-Xiang]

I’m using the code above to inspect an HTML file, and in my results.json, I get bounds values such as left, top, height, and width. My question is: what viewport size is used to test this HTML file? Knowing this would allow me to accurately draw the bounding box. For instance, if the test is performed at 800x600 or 1200x960, using the same values to draw a bounding box would yield different results depending on the viewport size.