Accessibility considerations for the official notice artwork

An official graphic still needs an accessible context

Preserving fixed artwork does not remove the surrounding page’s accessibility obligations. Give the image concise alternative text that identifies its purpose, preserve a visible route to authoritative information, and ensure adjacent headings explain why it is present.

Test perception and operation

Review at 200% zoom, with narrow reflow, high contrast settings and images disabled. Check that the QR destination is also available as an ordinary link for people who cannot scan it from the same device. Sticky controls, banners and dialogs must not obscure the placement.

Keep the page around it conformant

WCAG 2.2 AA review should cover keyboard order, visible focus, text and non-text contrast, target size and error handling. Do not place essential instructions only inside an image. Record manual findings alongside automated axe results because scanners cannot judge prominence, cropping or QR usability.

Test with browser zoom and text spacing overrides before deciding a graphic is usable. The surrounding layout should reflow without horizontal scrolling, and focus should never become hidden behind a sticky header or consent layer.

Provide more than a QR code

A QR code inside the official graphic can be useful, but a shopper viewing the page on the same phone may not be able to scan it. Keep an ordinary, descriptive link to the authoritative EU information adjacent to the asset. The link should remain keyboard reachable, visibly focused and understandable out of context.

Alternative text should identify the image’s purpose without copying every word of the fixed artwork. Essential implementation guidance belongs in HTML around the image. When images are disabled, the shopper should still understand that an EU legal-guarantee notice is being presented and have a direct source link.

Combine automated and manual evidence

Axe can detect many semantic, contrast and name problems, but it cannot decide whether the notice is prominent, whether its QR code scans after optimisation, whether the chosen language is appropriate, or whether a sticky checkout control obscures it. Record automated results and manual observations separately.

The real Notice27 evidence was reviewed at desktop, tablet and mobile sizes, including a 390-pixel viewport with matching client and scroll widths. Zero serious or critical axe findings were recorded on the tested WooCommerce templates. That is evidence for the reviewed fixture—not a universal WCAG conformance claim for every merchant theme.

Review the complete purchase process, because WCAG conformance applies to full pages and complete processes rather than a single component in isolation. A notice can have accurate alternative text while the surrounding cart or checkout still has an inaccessible error, hidden focus indicator or keyboard trap.

Preserve image dimensions in markup so the browser can reserve space before the asset arrives. Lazy-load evidence that sits below the fold, but avoid delaying the notice itself when its approved placement should be encountered before purchase. Recheck visual stability on a throttled mobile connection.

• Check 200% zoom, reflow, text spacing and images-disabled behaviour.
• Use keyboard-only navigation through nearby links and purchase controls.
• Verify focus is not hidden by sticky headers, banners or chat widgets.
• Retest after image optimisation, theme changes and checkout updates.