Example report · invented data only · not a live scan
Accessibilityby OpenSiteCheck

Accessibility report

Invented example for https://northstar-components.test/ · 2 example pages · 18 August 2026 at 12:00 UTC

Automated gradeDSerious problems found
Report ID
SAMPLE-2026-08-18
Problem types
3
Affected elements
4
Automated checker
axe-core 4.12.1
Everything below is invented.

We wrote the .test URLs, page titles, code, counts, check details, and suggestions for this example. We did not contact a real website or use a customer report.

Safe to share

Full report. Open each example page to review the problems, affected elements, and suggested changes.

Page 1 of 2Example checkout pagehttps://northstar-components.test/checkout Grade D · 2 problem types · 3 elements

Example URL: https://northstar-components.test/checkout · page loaded successfully · 31 example checks passed

serious severity

Text needs enough contrast to be easy to read

color-contrast · 2 affected elements · WCAG references: wcag2aa, wcag143, wcag21aa

Suggested change 1 of 1Muted helper text uses the same low-contrast component token in two places.
Example explanation

Both helper messages use a text color that is too close to the white panel behind it. Update the shared helper-text token rather than patching each message separately.

Who may be affected
People with low vision, reduced contrast sensitivity, or a screen affected by glare may not be able to read the helper text.
Why it matters
Important form instructions can disappear visually even though they remain in the page markup.
Estimated effort
minutes
Suggested code · review before using
<!-- Shared CSS: .field-help { color: #4b5563; } -->
<p class="field-help">We will only use this for your receipt.</p>

Elements with this problem

Element 1 of 2#email-help

Element has insufficient color contrast of 3.2:1; expected at least 4.5:1.

<p id="email-help" class="field-help">We will only use this for your receipt.</p>
Element 2 of 2#card-help

Element has insufficient color contrast of 3.2:1; expected at least 4.5:1.

<p id="card-help" class="field-help">Use the billing postcode for this card.</p>
serious severity

link-name · 1 affected element · WCAG references: wcag2a, wcag244, wcag412

Suggested change 1 of 1The receipt-help link contains an icon but no accessible name.
Example explanation

The icon-only link needs a programmatic name that describes its destination. Keep the visible icon decorative and add a concise label to the link.

Who may be affected
Screen-reader and voice-control users may be unable to identify or activate the link reliably.
Why it matters
A link without a name gives no indication of the action or destination.
Estimated effort
minutes
Suggested code · review before using
<a href="/receipt-help" aria-label="Help with receipts">
  <svg aria-hidden="true" focusable="false">...</svg>
</a>

Elements with this problem

Element 1 of 1a.receipt-help

Element does not have text that is visible to screen readers.

<a class="receipt-help" href="/receipt-help"><svg>...</svg></a>
Page 2 of 2Example account pagehttps://northstar-components.test/account Grade D · 1 problem type · 1 element

Example URL: https://northstar-components.test/account · page loaded successfully · 28 example checks passed

serious severity

The page must declare its language

html-has-lang · 1 affected element · WCAG references: wcag2a, wcag311

Suggested change 1 of 1The document root does not declare its language.
Example explanation

Declare the primary language on the document root so assistive technology can choose the appropriate pronunciation rules.

Who may be affected
People using screen readers, text-to-speech, translation, or language-aware reading tools may hear incorrect pronunciation.
Why it matters
Without a declared language, software has to guess how the page should be read.
Estimated effort
minutes
Suggested code · review before using
<html lang="en">

Elements with this problem

Element 1 of 1html

The <html> element does not have a lang attribute.

<html>

What automated checks cannot tell you

A real OpenSiteCheck report checks the public page views available at that time. It does not prove that a site conforms to WCAG, is accessible, or complies with the law.