Do alfa-scrape and alfa-act share the same viewport?

[rvantonisse]

Hey there,

This question arose during a rerun of conflicting audit results (human vs SI Alfa). Looking at wether an element is exposed or not in the accessibility tree. Some elements like the (in)famous "hamburger" menu are depending on the browser viewport for visibility to the user.

The user in this case, alfa-scrape, views the page at a default viewport of 1280 X 720. Or we are asuming he is... If alfa-scrape would indeed see the page at this viewport, the hamburger menu button should indeed not be visible (on screen and inside accessibility tree). Instead runing alfa audits in this viewport, it is assessed as visible.

My implementation of Alfa: https://github.com/Bartimeus-Accessibility/accessibility-checker/tree/feature/Add-validation-command

if blame is mine ☹️

[kasperisager]

The scraper passes along its device information as an input aspect, which you seem to be correctly passing to the audit() function in your implementation:

alfa/packages/alfa-scrape/src/scraper.ts

Lines 53 to 63 in f1e9439

	const device: Device = {
	type: DeviceType.Screen,
	viewport: {
	width: viewport.width,
	height: viewport.height,
	orientation: Orientation.Landscape
	},
	display: {
	resolution: viewport.scale === undefined ? 1 : viewport.scale
	}
	};

If something, whether the rule in question or the style system, seems to think that this hamburger menu is visible when it really isn't, that could very well be a bug. Can you make a minimal reproduction that I can test?

[rvantonisse]

This page https://www.accessibility.nl/wai-tools/validation-test-sites/contact-stadsarchief-breda/
Testing with default scraper options + 20 second timeout and default audit with rule SIA_R12 "Buttons have an accessible name"

node index.js www.accessibility.nl/wai-tools/validation-test-sites/contact-stadsarchief-breda -r SIA_R12 with my implementation

[kasperisager]

I think I see what the issue is: The site in question uses the media query print, screen and (min-width: 40em) for hiding the hamburger menu and I had forgotten to implement parsing of lists of media queries. As such, that particular media query was being parsed as print 🤦‍♂️ Let me know if 36b5bb1 does the trick!

[rvantonisse]

Checking it out!

[rvantonisse]

This fix 36b5bb1 did make the test SIA_R12 pass on
https://www.accessibility.nl/wai-tools/validation-test-sites/contact-stadsarchief-breda/
as expected!

Fixed.

To answer the issue topic question: Yes, alfa-scrape and alfa-act share the same viewport. The scraper passes along its device information as an input aspect. (correct me if I am wrong)

[kasperisager]

Glad to hear!