Skip to content
Pandus
en Change language
Menu

Sample

Sample report: what your client receives

This is a complete automated report of Linden & Loom, a fictional online shop, prepared under the brand of Kestrel & Pine, a fictional web studio. Both names are made up for this sample; the problems are real results of our scanner on the demo pages of the shop.

Open the sample PDF See pricing

The sample report

Kestrel & Pine

Sample with fictional names

Accessibility report

lindenloom.example

Checked on October 12, 2026 · Prepared by Kestrel & Pine

36 problems found

Problem types: 9 · pages checked: 3

Critical
6
Serious
27
Moderate
3
Minor
0

Critical problems: 6. They can stop some of your visitors from buying or contacting you.

What to fix first

  1. 1 Some buttons have no name ×4
  2. 2 Form fields have no label ×1
  3. 3 A dropdown has no label ×1
First screen of lindenloom.example as our scanner saw it.
The first screen of the page. Numbers mark problems from the list below.

All problems

1
Critical 4 elements

Some buttons have no name

WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.4.1.2

What this means for your visitors

Screen reader and voice control users cannot tell which button adds to cart, opens the menu or submits the search. This can stop them from buying at all.

Who is affected

  • blind customers
  • screen reader users
  • voice control users

How to fix

Give every button a name: visible text, aria-label, or aria-labelledby pointing to visible text. Icon-only buttons need an aria-label such as "Add to cart" or "Close". Do not rely on title attributes or CSS-only icons.

Part of this explanation is a machine translation that a native speaker has not reviewed yet.

Pages where it occurs

  • /×2
  • /product.html×2

Examples on your site

  • Screenshot of the element on your page, outlined in red: Some buttons have no name

    Element: button[type="button"]:nth-child(1)

    Code for the developer 
    <button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>
  • Screenshot of the element on your page, outlined in red: Some buttons have no name

    Element: .icons > button:nth-child(1)

    Code for the developer 
    <button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>

  • Element: .cart

    Code for the developer 
    <button type="button" class="cart"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><path d="M5 7h14l-1.5 12h-11z"></path><path d="M9 7a3 3 0 0 1 6 0"></path></svg></button>

Other elements with the same problem: 1.

2
Critical 1 element

Form fields have no label

WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.4.1.2

What this means for your visitors

Screen reader users hear only "edit text" and do not know whether to enter a name, phone or postcode. In checkout this leads directly to abandoned orders. Placeholder-only fields also confuse older customers once they start typing.

Who is affected

  • blind customers
  • screen reader users
  • older customers
  • people with cognitive disabilities
  • voice control users

How to fix

Connect a visible <label for> to each input, or wrap the input in the label. Use aria-label only when a visible label is truly impossible. A placeholder is not a label. Check search, newsletter, quantity and checkout fields.

Part of this explanation is a machine translation that a native speaker has not reviewed yet.

Examples on your site

  • Screenshot of the element on your page, outlined in red: Form fields have no label

    Element: input

    Code for the developer 
    <input type="number" value="1" min="1">
3
Critical 1 element

A dropdown has no label

WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.4.1.2

What this means for your visitors

Screen reader users hear only "combo box" and do not know whether it selects size, colour, quantity or country. This can block choosing a product variant or completing an order.

Who is affected

  • blind customers
  • screen reader users
  • voice control users
  • people with cognitive disabilities

How to fix

Connect a visible <label for> to each <select>, or use aria-labelledby pointing to visible text. Use aria-label only when no visible label is possible. Check variant pickers, sorting and country selectors.

Part of this explanation is a machine translation that a native speaker has not reviewed yet.

Examples on your site

  • Screenshot of the element on your page, outlined in red: A dropdown has no label

    Element: select

    Code for the developer 
    <select>
                <option>135 × 200 cm</option>
                <option>155 × 220 cm</option>
                <option>200 × 220 cm</option>
            </select>
4
Serious 19 elements

Text is hard to read because of low contrast

WCAG 2.2 1.4.3 (AA) Contrast (Minimum) · EN 301 549 9.1.4.3

What this means for your visitors

Shoppers who see less sharply, older customers and anyone using a phone outdoors may miss prices, delivery terms or button labels. Hard-to-read text leads to hesitation and abandoned carts.

Who is affected

  • people with low vision
  • older customers
  • people with colour vision deficiency
  • people on mobile in bright light

How to fix

Make the contrast ratio at least 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold). Check placeholders, disabled-looking states, text on images and sale badges. Fix colours in the design tokens or CSS rather than one element at a time.

Part of this explanation is a machine translation that a native speaker has not reviewed yet.

Pages where it occurs

  • /×13
  • /product.html×4
  • /contact.html×2

Examples on your site

  • Screenshot of the element on your page, outlined in red: Text is hard to read because of low contrast
    Contrast 3.93 : 1, needs at least 4.5 : 1 text #8c8178 on #2b2622, 9.8pt (13px)

    Element: .bar > span

    Code for the developer 
    <span>· Returns within 30 days</span>
  • Screenshot of the element on your page, outlined in red: Text is hard to read because of low contrast
    Contrast 3.93 : 1, needs at least 4.5 : 1 text #8c8178 on #2b2622, 9.8pt (13px)

    Element: .bar > span

    Code for the developer 
    <span>· Returns within 30 days</span>
  • Screenshot of the element on your page, outlined in red: Text is hard to read because of low contrast
    Contrast 2.88 : 1, needs at least 4.5 : 1 text #ffffff on #c98a5b, 11.3pt (15px)

    Element: button

    Code for the developer 
    <button type="submit" class="btn">Send</button>

Other elements with the same problem: 16.

5
Serious 5 elements

Images have no text description

WCAG 2.2 1.1.1 (A) Non-text Content · EN 301 549 9.1.1.1

What this means for your visitors

Screen reader users hear nothing or a file name such as "IMG_2041.jpg" instead of the product, colour or offer. They may miss key details and leave for a shop that describes its products.

Who is affected

  • blind customers
  • screen reader users
  • people with images turned off or on slow connections

How to fix

Add an alt attribute to every <img>. Describe what matters for the purchase (product, colour, key detail) in a short phrase. Use alt="" for purely decorative images so they are skipped. Do not repeat "image of" or stuff keywords.

Part of this explanation is a machine translation that a native speaker has not reviewed yet.

Examples on your site

  • Screenshot of the element on your page, outlined in red: Images have no text description

    Element: img[src$="hero.svg"]

    Code for the developer 
    <img src="/hero.svg" width="800" height="600">
  • Screenshot of the element on your page, outlined in red: Images have no text description

    Element: img[src$="duvet.svg"]

    Code for the developer 
    <img src="/duvet.svg">
  • Screenshot of the element on your page, outlined in red: Images have no text description

    Element: img[src$="towel.svg"]

    Code for the developer 
    <img src="/towel.svg">

Other elements with the same problem: 2.

6
Serious 3 elements

Some links do not say where they go

WCAG 2.2 2.4.4 (A) Link Purpose (In Context) · WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.2.4.4, 9.4.1.2

What this means for your visitors

Screen reader users hear just "link" and cannot tell whether it opens the cart, the account or Instagram. They lose time or give up on finding the cart or contact page.

Who is affected

  • blind customers
  • screen reader users
  • voice control users

How to fix

Give every link a text name: visible text, alt text on an image inside the link, or aria-label on icon-only links. The name should describe the destination, for example "Cart, 2 items". Hide decorative icons with aria-hidden="true".

Part of this explanation is a machine translation that a native speaker has not reviewed yet.

Examples on your site

  • Screenshot of the element on your page, outlined in red: Some links do not say where they go

    Element: .icons > a[href$="contact.html"]

    Code for the developer 
    <a href="/contact.html"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"></path></svg></a>
  • Screenshot of the element on your page, outlined in red: Some links do not say where they go

    Element: a[href$="contact.html"]:nth-child(1)

    Code for the developer 
    <a href="/contact.html"><svg width="14" height="14" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#7a4e2d"></circle></svg></a>

  • Element: .social > a[href$="contact.html"]:nth-child(2)

    Code for the developer 
    <a href="/contact.html"><svg width="14" height="14" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="4" fill="#7a4e2d"></rect></svg></a>
7
Moderate 1 element

Links in text look like normal text

WCAG 2.2 1.4.1 (A) Use of Color · EN 301 549 9.1.4.1

What this means for your visitors

People with colour vision deficiency or low vision may not notice links to delivery terms, size guides or returns, and miss information they need.

Who is affected

  • people with colour vision deficiency
  • people with low vision
  • older customers

How to fix

Underline links in body text, or give them another non-colour cue. If you rely on colour alone, the link needs at least 3:1 contrast with the surrounding text, plus a visible change on hover and focus.

Part of this explanation is a machine translation that a native speaker has not reviewed yet.

Examples on your site

  • Screenshot of the element on your page, outlined in red: Links in text look like normal text

    Element: .desc > a[href$="contact.html"]

    Code for the developer 
    <a href="/contact.html">care guide</a>
8
Moderate 1 element

Some headings are only bold or large text

WCAG 2.2 1.3.1 (A) Info and Relationships · EN 301 549 9.1.3.1

What this means for your visitors

Blind shoppers often jump from heading to heading to find sections such as "Description", "Delivery" or "Reviews". Fake headings are invisible to this navigation, so they have to listen through the whole page and may miss important information.

Who is affected

  • blind customers
  • screen reader users
  • people who navigate with keyboard shortcuts

How to fix

Turn text that works as a section title into a real heading (<h2>, <h3> and so on) in a logical order, and use CSS for the look. In editors, choose "Heading 2" or "Heading 3" in the format menu instead of making text bold or bigger. If the text is not a heading, leave it as a paragraph: axe marks this check as experimental and sometimes flags bold intro sentences.

Part of this explanation is a machine translation that a native speaker has not reviewed yet.

Examples on your site

  • Screenshot of the element on your page, outlined in red: Some headings are only bold or large text

    Element: .price

    Code for the developer 
    <p class="price">€129</p>
9
Moderate 1 element

Checkout fields are not filled in automatically

WCAG 2.2 1.3.5 (AA) Identify Input Purpose · EN 301 549 9.1.3.5

What this means for your visitors

Shoppers have to type addresses, phone numbers and emails by hand. People with motor or memory difficulties are hit hardest, and slow checkout costs orders for everyone.

Who is affected

  • people with motor disabilities
  • people with cognitive disabilities
  • mobile shoppers
  • all customers in checkout

How to fix

Use valid autocomplete tokens from the HTML specification that match the field, for example "email", "given-name", "postal-code", "tel". Fix typos and invented values; use "off" only where autofill would be wrong.

Part of this explanation is a machine translation that a native speaker has not reviewed yet.

Examples on your site

  • Screenshot of the element on your page, outlined in red: Checkout fields are not filled in automatically

    Element: input[type="email"]

    Code for the developer 
    <input type="email" placeholder="E-mail" autocomplete="e-mail-address">

Recommendations beyond WCAG 2.2 AA

Beyond the WCAG 2.2 AA level the laws rely on. Not counted as problems; fixing them makes the site easier to use.

  • Some content sits outside the page's main areas Elements: 2

    Parts of the page are not inside landmarks such as header, navigation, main content or footer. This is a recommended practice beyond the WCAG 2.2 AA level.

    Put all visible content inside landmark elements: <header>, <nav>, <main>, <aside> and <footer> (or their ARIA roles). Move stray blocks such as announcement bars, banners and newsletter forms into the right landmark, and make sure each page has exactly one <main>. Pop-ups and cookie banners can be marked up as a dialog or a labelled region.

  • Text does not reach the higher (AAA) contrast level Elements: 1 WCAG AAA

    Some text meets the basic contrast level but not the stricter one: 7:1 for normal text and 4.5:1 for large text. This is a recommended practice beyond WCAG AA, not a requirement.

    Where practical, raise the contrast to 7:1 for normal text and 4.5:1 for large text (24px, or 18.66px bold), starting with body text, prices and checkout. Darken text colours or lighten backgrounds in the design tokens or CSS. Fix the basic 4.5:1 contrast problems (the color-contrast rule) first; this check is only a suggestion on top.

Compared with the previous check

Check of October 5, 2026: 40 problems

New
19
Fixed
22
Remaining
17

Fixed since the previous check

  • ✓ Text is hard to read because of low contrast×7
  • ✓ Images have no text description×4
  • ✓ The page does not say which language it is in×3
  • ✓ Some buttons have no name×2
  • ✓ Some links do not say where they go×2
  • ✓ Form fields have no label×1
  • ✓ Links in text look like normal text×1
  • ✓ Some headings are only bold or large text×1
  • ✓ A dropdown has no label×1

Problems by check

Problems by check
DateProblems found
October 12, 202636
October 5, 202640

Pages checked

PageProblems
Linden & Loom – Linen and cotton for your homehttps://lindenloom.example/ 23
Washed linen duvet cover – Linden & Loomhttps://lindenloom.example/product.html 10
Contact – Linden & Loomhttps://lindenloom.example/contact.html 3

The same report as a PDF, for your records or your developer.

Open the sample PDF

Automated check, not a full audit. Not legal advice. Automated tools find only part of accessibility problems; keyboard and screen reader testing is still needed.