https://wheelchairrampcalculator.com/demo/broken/ 4 violations · 0 incomplete · 10 checks passed
Automated findings
| Rule | Impact | WCAG | Affected elements | Issue & suggested fix |
|---|---|---|---|---|
color-contrastElements must meet minimum color contrast ratio thresholds |
serious | 1.4.3 | .low-contrast<p class="low-contrast" data-astro-cid-2kbp62j7="">This paragraph is light grey on white at roughly 2.1:1, well below the 4.5:1 minimum for body text. It is he… |
Raise the contrast between text and background to at least 4.5:1 (3:1 for large text ≥24px, or ≥18.66px bold). Darken the text or lighten the background. Fix any of the following: Element has insufficient color contrast of 2.09 (foreground color: #b3b3b3, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1 |
html-has-lang<html> element must have a lang attribute |
serious | 3.1.1 | html<html data-astro-cid-2kbp62j7=""> |
Add a lang attribute to the <html> element, e.g. <html lang="en">, so screen readers use the correct pronunciation rules. Fix any of the following: The <html> element does not have a lang attribute |
image-altImages must have alternative text |
critical | 1.1.1 | img<img src="/og.png" width="120" height="63" data-astro-cid-2kbp62j7=""> |
Add an alt attribute that describes the image's purpose in context (alt="..."). If the image is purely decorative, use alt="" and keep it out of the accessibility tree. 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 tha… |
labelForm elements must have labels |
critical | 4.1.2 | input<input type="text" name="email" data-astro-cid-2kbp62j7=""> |
Associate a visible <label for="id"> with each control, or use aria-label/aria-labelledby when a visible label is not possible. 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, reference… |
Page-level checks
| Check | Result | WCAG |
|---|---|---|
| Language declared (html lang) | Issue missing or implausible | 3.1.1 |
| Page has a title | Pass Intentionally broken demo page (accessibility test target) | AccessProof | 2.4.2 |
| Exactly one h1 | Pass 1 found | 1.3.1 |
| Heading levels not skipped | Pass in order | 1.3.1 |
| Skip link to main content | Issue not found in first focusable links | 2.4.1 |