This is an example report. It was made of a demo café page we built ourselves, with the failures we see most often on real sites (open the demo page). Your report looks like this for your own site, page by page, up to 50 pages, and again every week.

Get the full report for your site Run a free scan first

Example report

This subscription is canceled. Weekly re-scans run only while it is active.

Accessibility statement: the "known shortcomings" paragraph, ready to copy

Public-sector sites in the EU must publish an accessibility statement that lists known shortcomings; other sites often do. This text says what the automated check found, criterion by criterion, and nothing more. Edit it freely.

Known shortcomings

An automated check by Sigila on 28 September 2026 (2 page views of getsigila.com) found failures against the following WCAG 2.1 level A/AA criteria. They were found automatically and will be confirmed and fixed.

– WCAG 1.1.1 Non-text Content (level A): 2 elements on 1 pages.
– WCAG 1.3.1 Info and Relationships (level A): 2 elements on 1 pages.
– WCAG 1.4.3 Contrast (Minimum) (level AA): 29 elements on 1 pages.
– WCAG 1.4.4 Resize Text (level AA): 2 elements on 1 pages.
– WCAG 3.1.1 Language of Page (level A): 2 elements on 1 pages.
– WCAG 4.1.2 Name, Role, Value (level A): 14 elements on 1 pages.

Automated checks cover roughly a third of the WCAG 2.1 AA criteria. The remaining criteria have been, or will be, reviewed manually.

1 page scanned 28 Sept 2026, 08:08 UTC · 51 WCAG failures — 12 critical, 37 serious, 2 moderate · 8 best-practice notes

Not scanned: 3 pages beyond this plan's 1

The site has at least 4 pages; a scan covers 1: the start page, then the sitemap in order, then links found on the way. These were found but not scanned:

Download the findings: CSV · JSON (every element with its selector, HTML and fix; yours to keep and share)

Automated checks cover roughly a third of WCAG 2.1 AA. This is honest guidance, not a compliance certificate.

Add 94.237.112.217 to your allowlist so weekly scans see the same page your visitors do.

What changed since the previous scan

This week: 0 likely fixed, 0 likely new, 51 unchanged

2 page views compared with the previous scan. Likely, because a page can change in ways an automated check cannot tell apart from a fix.

https://getsigila.com/demo-site/index.html · Desktop 1366×900 · 24 WCAG failures — 6 critical, 17 serious, 1 moderate

Screenshot of https://getsigila.com/demo-site/index.html with 24 accessibility failures circled

Through six lenses

Screenshot of https://getsigila.com/demo-site/index.html, original

Screenshot of https://getsigila.com/demo-site/index.html seen with deuteranopia

Drag to compare: Deuteranopia ↔ original

The lenses cover the top of the page.

Site-level checks

Looks OKMore than one way to find this page · WCAG 2.4.5search and navigation menu on this page. Who this affects: Everyone, and especially people who find menus or search hard to use. What this rule means →
Likely failsEverything reachable with the keyboard · WCAG 2.1.12 interactive elements cannot be reached with the keyboard. Who this affects: People who cannot use a mouse, and screen reader users. What this rule means →
1. a Lahjakortit — not reached by Tab
2. span.fake-btn Lähetä tilaus — not focusable: no tabindex
Keyboard focus trail. Every Tab stop numbered in order; red numbers had no visible focus.
Looks OKKeyboard focus never gets stuck · WCAG 2.1.2Focus moved through 18 stops and out of the page. Who this affects: Keyboard and screen reader users. What this rule means →
Looks OKTab order follows the page · WCAG 2.4.3Tab order follows the page top to bottom (18 stops, see the focus picture). Who this affects: Keyboard and screen reader users. What this rule means →
Likely failsKeyboard focus is visible · WCAG 2.4.718 of 18 focus stops show no visible change when focused (red numbers in the focus picture). Who this affects: Keyboard users. What this rule means →
1. 1a.brand Kahvila Kajo
2. 2a Menu
3. 3a Tilaa
4. 4a Yhteystiedot
5. 5input Hae...
6. 6button
7. 7a.btn Katso lisää
8. 8button.icon-btn
9. 9button.icon-btn
10. 10a tästä
11. 11button.icon-btn
12. 12input Nimi
13. 13input Sähköposti
14. 14select Noutopaikka Keskusta Ranta
15. 15iframe
16. 16a Takaisin ylös
17. 17a Tietosuoja
18. 18a Evästeet
Looks OKFocusing a control changes nothing by itself · WCAG 3.2.1Focusing 18 controls in turn changed nothing on its own. Who this affects: Keyboard and screen reader users, and people with cognitive disabilities. What this rule means →
Not applicableChanging a setting changes nothing unexpected · WCAG 3.2.2No select controls outside forms to test on this page. What this rule means →
Likely failsFits 320 px without sideways scrolling · WCAG 1.4.10At 320 px wide the page needs sideways scrolling: content is 780 px wider than the screen. Who this affects: People with low vision who zoom in a long way. What this rule means →
320 px wide. The page at 320 CSS px, the width WCAG 1.4.10 requires to work without sideways scrolling.
Check by handWorks at 200 % zoom · WCAG 1.4.4At 200 % zoom (683 px wide) content is 417 px wider than the screen. See the 200 % picture. Who this affects: People with low vision. What this rule means →
200 % zoom. The page at 683 px, what a desktop visitor sees zoomed to 200 %.
Check by handSurvives wider text spacing · WCAG 1.4.12With WCAG text spacing applied, 1 element clip their text. See the text-spacing picture. Who this affects: People with dyslexia and low vision who use their own reading settings. What this rule means →
1. p Klassikko, jota ei tarvitse selittää. Kaneli, kard — 47 px of text hidden below
Text spacing. The page with WCAG 1.4.12 text spacing applied (line height 1.5, wider letters and words, paragraph gaps).
Likely failsMoving content can be paused · WCAG 2.2.2Something moves or changes by itself (1 moving element) and no pause or stop control was found. Who this affects: Screen reader users, whose reading the movement interrupts; blind and low-vision people, for whom a changing page is hard to make sense of; and people with attention difficulties. What this rule means →
1. span infinite animation
Not applicableAccessible name contains the visible text · WCAG 2.5.3No controls with a separate accessible name to compare. What this rule means →
Likely failsPersonal-detail fields declare their purpose · WCAG 1.3.52 fields asking for personal details (name, email, phone, address) without an autocomplete attribute. Who this affects: People with motor or cognitive disabilities, for whom typing is slow or error-prone. What this rule means →
1. input Nimi — no autocomplete attribute
2. input Sähköposti — no autocomplete attribute
Not applicableThe menu is the same on every page · WCAG 3.2.3One page only; there is nothing to compare with. What this rule means →
Looks OKControls are at least 24 by 24 pixels · WCAG 2.5.8Every control is at least 24 by 24 px, or has that much room to the next one (10 checked, 8 inline text links exempt; WCAG 2.2). What this rule means →
Looks OKNothing works only by shaking or tilting the device · WCAG 2.5.4The page listens for no device motion or tilt. Who this affects: People who cannot move a device, or whose device is mounted. What this rule means →
Not applicableContent that appears on hover can be dismissed · WCAG 1.4.13Nothing on the page opens on hover. What this rule means →
Not applicableStatus messages reach assistive technology · WCAG 4.1.3No search to try a status message with. What this rule means →
Looks OKSingle letter keys do not trigger shortcuts · WCAG 2.1.4The page did not react to any of the single letter keys tried. Who this affects: People who use voice control, where spoken words can trigger letters by accident. What this rule means →
Check by handGestures also work with simple taps · WCAG 2.5.1The page listens for touch or pinch gestures (2 listeners); whether every gesture also works with a simple tap needs a person. Who this affects: People with limited hand movement, and people who use a head pointer or eye tracking. What this rule means →
1. window touchstart listener
2. window touchend listener
Check by handActions happen on release, not on press-down · WCAG 2.5.2The page acts while a control is pressed down (3 listeners), not only on release; whether a mistaken press can be cancelled needs a person. Who this affects: People with tremor or limited motor control. What this rule means →
1. window pointerdown listener
2. window touchstart listener
3. window mousedown listener
Check by handForm field boundaries have 3:1 contrast · WCAG 1.4.114 form fields with a boundary or fill under 3:1 against what is next to it; fields on photos and gradients need a person. Who this affects: People with low vision. What this rule means →
1. input Hae... — top border 2.06:1
2. input Nimi — top border 1.61:1
3. input Sähköposti — top border 1.61:1
4. select select — top border 1.4:1
Looks OKReading order matches the code order · WCAG 1.3.2The visible reading order matches the code order. Who this affects: Screen reader users, and people who change how the page is displayed. What this rule means →
1. (reading order) “Klassikko, jota ei tarvitse selittää. Ka” is before “Päivän keitto” in the code, but below it on the page
Check by handInvalid input produces an error message · WCAG 3.3.1Invalid input left 2 fields without a clear, linked error message — or the form reacts only on submit, which Sigila never does. Who this affects: Screen reader users, colour-blind people and people with cognitive disabilities. What this rule means →
1. input Nimi — no error message appeared after invalid input (it may validate only on submit)
2. input Sähköposti — no error message appeared after invalid input (it may validate only on submit)
Not applicableError messages say how to fix it · WCAG 3.3.3No errors appeared to judge. What this rule means →
Not applicableConsequential forms have a review step · WCAG 3.3.4No forms with legal or financial consequences were found. What this rule means →

Every WCAG 2.1 A/AA failure, and how to fix it

critical Buttons must have discernible text · 4 elements · WCAG 4.1.2

Who this affects: Screen reader and voice control users.

Ensure buttons have discernible text

3 of these are the same .card > .icon-btn — one change fixes all.

How to fix this rule (Deque University) →

Element .search > button

HTML

<button type="button"><svg width="16" height="16" viewBox="0 0 16 16"><circle cx="7" cy="7" r="5" fill="none" stroke="#2f5d50" stroke-width="2"></circle><path d="M11 11l4 4" stroke="#2f5d50" stroke-width="2"></path></svg></button>

How to fix

Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element does not have an implicit (wrapped) <label>
  Element does not have an explicit <label>
  Element's default semantics were not overridden with role="none" or role="presentation"

Element .card:nth-child(1) > .icon-btn

HTML

<button class="icon-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 2v12M2 8h12" stroke="#2f5d50" stroke-width="2"></path></svg></button>

How to fix

Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element does not have an implicit (wrapped) <label>
  Element does not have an explicit <label>
  Element's default semantics were not overridden with role="none" or role="presentation"

Element .card:nth-child(2) > .icon-btn

HTML

<button class="icon-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 2v12M2 8h12" stroke="#2f5d50" stroke-width="2"></path></svg></button>

How to fix

Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element does not have an implicit (wrapped) <label>
  Element does not have an explicit <label>
  Element's default semantics were not overridden with role="none" or role="presentation"

Element .card:nth-child(3) > .icon-btn

HTML

<button class="icon-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 2v12M2 8h12" stroke="#2f5d50" stroke-width="2"></path></svg></button>

How to fix

Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element does not have an implicit (wrapped) <label>
  Element does not have an explicit <label>
  Element's default semantics were not overridden with role="none" or role="presentation"

critical Images must have alternative text · 1 element · WCAG 1.1.1

Who this affects: People who use a screen reader, and anyone whose images do not load.

Ensure <img> elements have alternative text or a role of none or presentation

How to fix this rule (Deque University) →

Element img

HTML <img src="data:image/svg+xml;u...">

How to fix

Fix any of the following:
  Element does not have an alt attribute
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element's default semantics were not overridden with role="none" or role="presentation"

critical Select element must have an accessible name · 1 element · WCAG 4.1.2

Who this affects: Screen reader and voice control users.

Ensure select element has an accessible name

How to fix this rule (Deque University) →

Element select

HTML

<select onchange="location.hash = this.value">
      <option value="">Noutopaikka</option>
      <option value="#keskusta">Keskusta</option>
      <option value="#ranta">Ranta</option>
    </select>

How to fix

Fix any of the following:
  Element does not have an implicit (wrapped) <label>
  Element does not have an explicit <label>
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element's default semantics were not overridden with role="none" or role="presentation"

serious Elements must meet minimum color contrast ratio thresholds · 13 elements · WCAG 1.4.3

Who this affects: Practically everyone: enough contrast helps every reader in every situation, and it is essential for people with low vision and for older readers.

Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds

3 of these are the same .card > p — one change fixes all.

3 of these are the same .card > .price — one change fixes all.

How to fix this rule (Deque University) →

8
Element section > div > p:nth-child(2)
HTML <p>Paahdamme kahvimme itse Kajon takahuoneessa. Pullat leivotaan joka aamu kello viisi, ja suodatinkahvi on aina tuoretta. Tule istumaan ikkunapöytään.</p>
Colours #9a9a9a on #ffffff · ratio 2.81 (needs 4.5:1)
How to fix
```
Fix any of the following:
  Element has insufficient color contrast of 2.81 (foreground color: #9a9a9a, background color: #ffffff, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
```

Element .btn

HTML <a class="btn" href="#tilaa">Katso lisää</a>

Colours #ffffff on #8fd1b6 · ratio 1.75 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 1.75 (foreground color: #ffffff, background color: #8fd1b6, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1

Element section > div > .muted-note

HTML <p class="muted-note">Avoinna arkisin 7–18, viikonloppuisin 9–17.</p>

Colours #9a9a9a on #ffffff · ratio 2.81 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 2.81 (foreground color: #9a9a9a, background color: #ffffff, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1

11
Element .card:nth-child(1) > p
HTML <p>Klassikko, jota ei tarvitse selittää. Kaneli, kardemumma ja voi. Leivottu aamulla, myyty puoleen päivään mennessä lähes aina kokonaan loppuun jokaisena päivänä.</p>
Colours #8c8c8c on #ffffff · ratio 3.36 (needs 4.5:1)
How to fix
```
Fix any of the following:
  Element has insufficient color contrast of 3.36 (foreground color: #8c8c8c, background color: #ffffff, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1
```

Element .card:nth-child(2) > p

HTML <p>Tumma paahto, kevyt maitovaahto. Kaurajuomalla ilman lisämaksua.</p>

Colours #8c8c8c on #ffffff · ratio 3.36 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 3.36 (foreground color: #8c8c8c, background color: #ffffff, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1

Element .card:nth-child(3) > p

HTML <p>Vaihtuu joka päivä. Katso <a href="#">tästä</a> mitä tänään on.</p>

Colours #8c8c8c on #ffffff · ratio 3.36 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 3.36 (foreground color: #8c8c8c, background color: #ffffff, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1

Element .card:nth-child(1) > .price

HTML <span class="price">2,50 €</span>

Colours #aaaabb on #ffffff · ratio 2.28 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 2.28 (foreground color: #aaaabb, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1

Element .card:nth-child(2) > .price

HTML <span class="price">3,90 €</span>

Colours #aaaabb on #ffffff · ratio 2.28 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 2.28 (foreground color: #aaaabb, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1

Element .card:nth-child(3) > .price

HTML <span class="price">9,50 €</span>

Colours #aaaabb on #ffffff · ratio 2.28 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 2.28 (foreground color: #aaaabb, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1

20
Element footer > .wrap
HTML <div class="wrap"> Kahvila Kajo © 2026 · <a href="#">Tietosuoja</a> · <a href="#">Evästeet</a> <div class="muted-note">Tämä on Sigilan demosivu, jossa on tahallaan tyypillisiä saavutettavuuspuutteita. Kahvilaa ei ole olemassa.</div> </div>
Colours #a0a0a0 on #efefef · ratio 2.27 (needs 4.5:1)
How to fix
```
Fix any of the following:
  Element has insufficient color contrast of 2.27 (foreground color: #a0a0a0, background color: #efefef, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
```

Element .wrap > a[href="#"]:nth-child(1)

HTML <a href="#">Tietosuoja</a>

Colours #b0b0b0 on #efefef · ratio 1.88 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 1.88 (foreground color: #b0b0b0, background color: #efefef, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1

Element a[href="#"]:nth-child(2)

HTML <a href="#">Evästeet</a>

Colours #b0b0b0 on #efefef · ratio 1.88 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 1.88 (foreground color: #b0b0b0, background color: #efefef, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1

23
Element .wrap > .muted-note
HTML <div class="muted-note">Tämä on Sigilan demosivu, jossa on tahallaan tyypillisiä saavutettavuuspuutteita. Kahvilaa ei ole olemassa.</div>
Colours #c4c4c4 on #efefef · ratio 1.51 (needs 4.5:1)
How to fix
```
Fix any of the following:
  Element has insufficient color contrast of 1.51 (foreground color: #c4c4c4, background color: #efefef, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1
```

serious ARIA hidden element must not be focusable or contain focusable elements · 1 element · WCAG 4.1.2

Who this affects: Screen reader and voice control users.

Ensure aria-hidden elements are not focusable nor contain focusable elements

How to fix this rule (Deque University) →

Element a[href$="#top"]

HTML <a href="#top" aria-hidden="true">Takaisin ylös</a>

How to fix

Fix all of the following:
  Focusable content should have tabindex="-1" or be removed from the DOM

serious Frames must have an accessible name · 1 element · WCAG 4.1.2

Who this affects: Screen reader and voice control users.

Ensure <iframe> and <frame> elements have an accessible name

How to fix this rule (Deque University) →

Element iframe

HTML <iframe src="about:blank" width="600" height="220" style="border:1px solid #ddd"></iframe>

How to fix

Fix any of the following:
  Element has no title attribute
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element's default semantics were not overridden with role="none" or role="presentation"

serious <html> element must have a lang attribute · 1 element · WCAG 3.1.1

Who this affects: Screen reader users.

Ensure every HTML document has a lang attribute

How to fix this rule (Deque University) →

Element html

HTML <html>

How to fix

Fix any of the following:
  The <html> element does not have a lang attribute

serious <ul> and <ol> must only directly contain <li>, <script> or <template> elements · 1 element · WCAG 1.3.1

Who this affects: People who use a screen reader or other assistive technology.

Ensure that lists are structured correctly

How to fix this rule (Deque University) →

18
Element ul
HTML <ul> <div>Kajonkatu 4, 00100 Helsinki</div> <div>Puhelin 040 123 4567</div> </ul>
How to fix
```
Fix all of the following:
  List element has direct children that are not allowed: div
```

moderate Zooming and scaling must not be disabled · 1 element · WCAG 1.4.4

Who this affects: People with low vision.

Ensure <meta name="viewport"> does not disable text scaling and zooming

How to fix this rule (Deque University) →

24
Element meta[name="viewport"] (not visible on the page)
HTML <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
How to fix
```
Fix any of the following:
  user-scalable=no on <meta> tag disables zooming on mobile devices
```

Best practice · 4 notes for developers

Recommended, not required by WCAG 2.1 A or AA. Not circled in the picture. These come from axe-core's best-practice rules: things that make a page easier to use with assistive technology, but that no WCAG 2.1 A or AA success criterion requires.

serious Elements should not have tabindex greater than zero · 1 element

Ensure tabindex attribute values are not greater than 0

How to fix this rule (Deque University) →

–
Element nav > a[href="#"]
HTML <a href="#" tabindex="3">Lahjakortit</a>
How to fix
```
Fix any of the following:
  Element has a tabindex greater than 0
```

moderate Heading levels should only increase by one · 1 element

Ensure the order of headings is semantically correct

How to fix this rule (Deque University) →

–
Element #yhteys
HTML <h5 id="yhteys">Löydät meidät</h5>
How to fix
```
Fix any of the following:
  Heading order invalid
```

moderate Page should contain a level-one heading · 1 element

Ensure that the page, or at least one of its frames contains a level-one heading

How to fix this rule (Deque University) →

–

Element html

HTML <html>

How to fix

Fix all of the following:
  Page must have a level-one heading

moderate All page content should be contained by landmarks · 1 element

Ensure all page content is contained by landmarks

How to fix this rule (Deque University) →

–
Element .ticker
HTML <div class="ticker"><span>★ Syyskuun tarjous: kaikki pullat 2,50 € ★ Uusi paahto saapunut ★ Viikonloppuna brunssi 10–14 ★</span></div>
How to fix
```
Fix any of the following:
  Some page content is not contained by landmarks
```

https://getsigila.com/demo-site/index.html · Phone 390×844 · 27 WCAG failures — 6 critical, 20 serious, 1 moderate

Screenshot of https://getsigila.com/demo-site/index.html with 27 accessibility failures circled

Through six lenses

Drag to compare: Deuteranopia ↔ original

The lenses cover the top of the page.

Site-level checks

Looks OKMore than one way to find this page · WCAG 2.4.5search and navigation menu on this page. Who this affects: Everyone, and especially people who find menus or search hard to use. What this rule means →
Likely failsMoving content can be paused · WCAG 2.2.2Something moves or changes by itself (1 moving element) and no pause or stop control was found. Who this affects: Screen reader users, whose reading the movement interrupts; blind and low-vision people, for whom a changing page is hard to make sense of; and people with attention difficulties. What this rule means →
1. span infinite animation
Not applicableAccessible name contains the visible text · WCAG 2.5.3No controls with a separate accessible name to compare. What this rule means →
Likely failsPersonal-detail fields declare their purpose · WCAG 1.3.52 fields asking for personal details (name, email, phone, address) without an autocomplete attribute. Who this affects: People with motor or cognitive disabilities, for whom typing is slow or error-prone. What this rule means →
1. input Nimi — no autocomplete attribute
2. input Sähköposti — no autocomplete attribute
Looks OKControls are at least 24 by 24 pixels · WCAG 2.5.8Every control is at least 24 by 24 px, or has that much room to the next one (10 checked, 8 inline text links exempt; WCAG 2.2). What this rule means →
Looks OKNothing works only by shaking or tilting the device · WCAG 2.5.4The page listens for no device motion or tilt. Who this affects: People who cannot move a device, or whose device is mounted. What this rule means →
Check by handWorks with the phone turned the other way · WCAG 1.3.4Turned the other way round, the page needs sideways scrolling (256 px); a person confirms whether content is lost. Who this affects: People whose phone or tablet is mounted in one position, for example on a wheelchair. What this rule means →
Check by handGestures also work with simple taps · WCAG 2.5.1The page listens for touch or pinch gestures (2 listeners); whether every gesture also works with a simple tap needs a person. Who this affects: People with limited hand movement, and people who use a head pointer or eye tracking. What this rule means →
1. window touchstart listener
2. window touchend listener
Check by handActions happen on release, not on press-down · WCAG 2.5.2The page acts while a control is pressed down (3 listeners), not only on release; whether a mistaken press can be cancelled needs a person. Who this affects: People with tremor or limited motor control. What this rule means →
1. window pointerdown listener
2. window touchstart listener
3. window mousedown listener
Check by handForm field boundaries have 3:1 contrast · WCAG 1.4.114 form fields with a boundary or fill under 3:1 against what is next to it; fields on photos and gradients need a person. Who this affects: People with low vision. What this rule means →
1. input Hae... — top border 2.06:1
2. input Nimi — top border 1.61:1
3. input Sähköposti — top border 1.61:1
4. select select — top border 1.4:1
Looks OKReading order matches the code order · WCAG 1.3.2The visible reading order matches the code order. Who this affects: Screen reader users, and people who change how the page is displayed. What this rule means →
1. (reading order) “Klassikko, jota ei tarvitse selittää. Ka” is before “Päivän keitto” in the code, but below it on the page

Every WCAG 2.1 A/AA failure, and how to fix it

critical Buttons must have discernible text · 4 elements · WCAG 4.1.2

Who this affects: Screen reader and voice control users.

Ensure buttons have discernible text

3 of these are the same .card > .icon-btn — one change fixes all.

How to fix this rule (Deque University) →

Element .search > button

HTML

<button type="button"><svg width="16" height="16" viewBox="0 0 16 16"><circle cx="7" cy="7" r="5" fill="none" stroke="#2f5d50" stroke-width="2"></circle><path d="M11 11l4 4" stroke="#2f5d50" stroke-width="2"></path></svg></button>

How to fix

Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element does not have an implicit (wrapped) <label>
  Element does not have an explicit <label>
  Element's default semantics were not overridden with role="none" or role="presentation"

Element .card:nth-child(1) > .icon-btn

HTML

<button class="icon-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 2v12M2 8h12" stroke="#2f5d50" stroke-width="2"></path></svg></button>

How to fix

Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element does not have an implicit (wrapped) <label>
  Element does not have an explicit <label>
  Element's default semantics were not overridden with role="none" or role="presentation"

Element .card:nth-child(2) > .icon-btn

HTML

<button class="icon-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 2v12M2 8h12" stroke="#2f5d50" stroke-width="2"></path></svg></button>

How to fix

Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element does not have an implicit (wrapped) <label>
  Element does not have an explicit <label>
  Element's default semantics were not overridden with role="none" or role="presentation"

Element .card:nth-child(3) > .icon-btn

HTML

<button class="icon-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 2v12M2 8h12" stroke="#2f5d50" stroke-width="2"></path></svg></button>

How to fix

Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element does not have an implicit (wrapped) <label>
  Element does not have an explicit <label>
  Element's default semantics were not overridden with role="none" or role="presentation"

critical Images must have alternative text · 1 element · WCAG 1.1.1

Who this affects: People who use a screen reader, and anyone whose images do not load.

Ensure <img> elements have alternative text or a role of none or presentation

How to fix this rule (Deque University) →

Element img

HTML <img src="data:image/svg+xml;u...">

How to fix

Fix any of the following:
  Element does not have an alt attribute
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element's default semantics were not overridden with role="none" or role="presentation"

critical Select element must have an accessible name · 1 element · WCAG 4.1.2

Who this affects: Screen reader and voice control users.

Ensure select element has an accessible name

How to fix this rule (Deque University) →

Element select

HTML

<select onchange="location.hash = this.value">
      <option value="">Noutopaikka</option>
      <option value="#keskusta">Keskusta</option>
      <option value="#ranta">Ranta</option>
    </select>

How to fix

Fix any of the following:
  Element does not have an implicit (wrapped) <label>
  Element does not have an explicit <label>
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element's default semantics were not overridden with role="none" or role="presentation"

serious Elements must meet minimum color contrast ratio thresholds · 16 elements · WCAG 1.4.3

Who this affects: Practically everyone: enough contrast helps every reader in every situation, and it is essential for people with low vision and for older readers.

Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds

3 of these are the same .card > p — one change fixes all.

3 of these are the same .card > .price — one change fixes all.

How to fix this rule (Deque University) →

Element a[href$="#menu"]

HTML <a href="#menu">Menu</a>

Colours #cfe0d8 on #ffffff · ratio 1.37 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 1.37 (foreground color: #cfe0d8, background color: #ffffff, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1

Element nav > a[href$="#tilaa"]

HTML <a href="#tilaa">Tilaa</a>

Colours #cfe0d8 on #ffffff · ratio 1.37 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 1.37 (foreground color: #cfe0d8, background color: #ffffff, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1

Element a[href$="#yhteys"]

HTML <a href="#yhteys">Yhteystiedot</a>

Colours #cfe0d8 on #ffffff · ratio 1.37 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 1.37 (foreground color: #cfe0d8, background color: #ffffff, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1

Element nav > a[href="#"]

HTML <a href="#" tabindex="3">Lahjakortit</a>

Colours #cfe0d8 on #ffffff · ratio 1.37 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 1.37 (foreground color: #cfe0d8, background color: #ffffff, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1

12
Element section > div > p:nth-child(2)
HTML <p>Paahdamme kahvimme itse Kajon takahuoneessa. Pullat leivotaan joka aamu kello viisi, ja suodatinkahvi on aina tuoretta. Tule istumaan ikkunapöytään.</p>
Colours #9a9a9a on #ffffff · ratio 2.81 (needs 4.5:1)
How to fix
```
Fix any of the following:
  Element has insufficient color contrast of 2.81 (foreground color: #9a9a9a, background color: #ffffff, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
```

Element .btn

HTML <a class="btn" href="#tilaa">Katso lisää</a>

Colours #ffffff on #8fd1b6 · ratio 1.75 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 1.75 (foreground color: #ffffff, background color: #8fd1b6, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1

Element section > div > .muted-note

HTML <p class="muted-note">Avoinna arkisin 7–18, viikonloppuisin 9–17.</p>

Colours #9a9a9a on #ffffff · ratio 2.81 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 2.81 (foreground color: #9a9a9a, background color: #ffffff, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1

15
Element .card:nth-child(1) > p
HTML <p>Klassikko, jota ei tarvitse selittää. Kaneli, kardemumma ja voi. Leivottu aamulla, myyty puoleen päivään mennessä lähes aina kokonaan loppuun jokaisena päivänä.</p>
Colours #8c8c8c on #ffffff · ratio 3.36 (needs 4.5:1)
How to fix
```
Fix any of the following:
  Element has insufficient color contrast of 3.36 (foreground color: #8c8c8c, background color: #ffffff, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1
```

Element .card:nth-child(2) > p

HTML <p>Tumma paahto, kevyt maitovaahto. Kaurajuomalla ilman lisämaksua.</p>

Colours #8c8c8c on #ffffff · ratio 3.36 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 3.36 (foreground color: #8c8c8c, background color: #ffffff, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1

Element .card:nth-child(3) > p

HTML <p>Vaihtuu joka päivä. Katso <a href="#">tästä</a> mitä tänään on.</p>

Colours #8c8c8c on #ffffff · ratio 3.36 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 3.36 (foreground color: #8c8c8c, background color: #ffffff, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1

Element .card:nth-child(1) > .price

HTML <span class="price">2,50 €</span>

Colours #aaaabb on #ffffff · ratio 2.28 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 2.28 (foreground color: #aaaabb, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1

Element .card:nth-child(2) > .price

HTML <span class="price">3,90 €</span>

Colours #aaaabb on #ffffff · ratio 2.28 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 2.28 (foreground color: #aaaabb, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1

Element .card:nth-child(3) > .price

HTML <span class="price">9,50 €</span>

Colours #aaaabb on #ffffff · ratio 2.28 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 2.28 (foreground color: #aaaabb, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1

24
Element footer > .wrap
HTML <div class="wrap"> Kahvila Kajo © 2026 · <a href="#">Tietosuoja</a> · <a href="#">Evästeet</a> <div class="muted-note">Tämä on Sigilan demosivu, jossa on tahallaan tyypillisiä saavutettavuuspuutteita. Kahvilaa ei ole olemassa.</div> </div>
Colours #a0a0a0 on #efefef · ratio 2.27 (needs 4.5:1)
How to fix
```
Fix any of the following:
  Element has insufficient color contrast of 2.27 (foreground color: #a0a0a0, background color: #efefef, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
```

Element .wrap > a[href="#"]:nth-child(1)

HTML <a href="#">Tietosuoja</a>

Colours #b0b0b0 on #efefef · ratio 1.88 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 1.88 (foreground color: #b0b0b0, background color: #efefef, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1

Element a[href="#"]:nth-child(2)

HTML <a href="#">Evästeet</a>

Colours #b0b0b0 on #efefef · ratio 1.88 (needs 4.5:1)

How to fix

Fix any of the following:
  Element has insufficient color contrast of 1.88 (foreground color: #b0b0b0, background color: #efefef, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1

serious ARIA hidden element must not be focusable or contain focusable elements · 1 element · WCAG 4.1.2

Who this affects: Screen reader and voice control users.

Ensure aria-hidden elements are not focusable nor contain focusable elements

How to fix this rule (Deque University) →

Element a[href$="#top"]

HTML <a href="#top" aria-hidden="true">Takaisin ylös</a>

How to fix

Fix all of the following:
  Focusable content should have tabindex="-1" or be removed from the DOM

serious Frames must have an accessible name · 1 element · WCAG 4.1.2

Who this affects: Screen reader and voice control users.

Ensure <iframe> and <frame> elements have an accessible name

How to fix this rule (Deque University) →

Element iframe

HTML <iframe src="about:blank" width="600" height="220" style="border:1px solid #ddd"></iframe>

How to fix

Fix any of the following:
  Element has no title attribute
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element's default semantics were not overridden with role="none" or role="presentation"

serious <html> element must have a lang attribute · 1 element · WCAG 3.1.1

Who this affects: Screen reader users.

Ensure every HTML document has a lang attribute

How to fix this rule (Deque University) →

Element html

HTML <html>

How to fix

Fix any of the following:
  The <html> element does not have a lang attribute

serious <ul> and <ol> must only directly contain <li>, <script> or <template> elements · 1 element · WCAG 1.3.1

Who this affects: People who use a screen reader or other assistive technology.

Ensure that lists are structured correctly

How to fix this rule (Deque University) →

22
Element ul
HTML <ul> <div>Kajonkatu 4, 00100 Helsinki</div> <div>Puhelin 040 123 4567</div> </ul>
How to fix
```
Fix all of the following:
  List element has direct children that are not allowed: div
```

moderate Zooming and scaling must not be disabled · 1 element · WCAG 1.4.4

Who this affects: People with low vision.

Ensure <meta name="viewport"> does not disable text scaling and zooming

How to fix this rule (Deque University) →

27
Element meta[name="viewport"] (not visible on the page)
HTML <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
How to fix
```
Fix any of the following:
  user-scalable=no on <meta> tag disables zooming on mobile devices
```

Best practice · 4 notes for developers

serious Elements should not have tabindex greater than zero · 1 element

Ensure tabindex attribute values are not greater than 0

How to fix this rule (Deque University) →

–
Element nav > a[href="#"]
HTML <a href="#" tabindex="3">Lahjakortit</a>
How to fix
```
Fix any of the following:
  Element has a tabindex greater than 0
```

moderate Heading levels should only increase by one · 1 element

Ensure the order of headings is semantically correct

How to fix this rule (Deque University) →

–
Element #yhteys
HTML <h5 id="yhteys">Löydät meidät</h5>
How to fix
```
Fix any of the following:
  Heading order invalid
```

moderate Page should contain a level-one heading · 1 element

Ensure that the page, or at least one of its frames contains a level-one heading

How to fix this rule (Deque University) →

–

Element html

HTML <html>

How to fix

Fix all of the following:
  Page must have a level-one heading

moderate All page content should be contained by landmarks · 1 element

Ensure all page content is contained by landmarks

How to fix this rule (Deque University) →

–
Element .ticker
HTML <div class="ticker"><span>★ Syyskuun tarjous: kaikki pullat 2,50 € ★ Uusi paahto saapunut ★ Viikonloppuna brunssi 10–14 ★</span></div>
How to fix
```
Fix any of the following:
  Some page content is not contained by landmarks
```