Barrierefreiheits-Check für eine Seite

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Harbour Yoga</title>
<style>
body { font-family: sans-serif; background: #f4f1ea; color: #1a1a1a; margin: 0; padding: 16px; }
.card { background: #ffffff; padding: 16px; margin-bottom: 16px; }
.intro { color: #777777; }
.btn { background: #f5a623; color: #ffffff; border: 0; padding: 4px 8px; font-size: 14px; }
a { color: #0f5f73; }
a, button, input { outline: none; }
.small-link { font-size: 12px; }
footer { color: #9a9a9a; }
</style>
</head>
<body>
<h1>Harbour Yoga</h1>
<div class="card">
  <h3>Classes this week</h3>
  <p class="intro">Small groups, all levels, mats provided.</p>
  <img src="studio.jpg" width="320" height="180">
  <p>Monday 18:00<br>Wednesday 07:30<br>Saturday 10:00</p>
  <a href="/classes">Click here</a>
</div>
<div class="card">
  <h2>Stay in touch</h2>
  <input type="email" placeholder="Your email">
  <button class="btn">Sign up</button>
  <a class="small-link" href="/privacy">Privacy</a>
</div>
<footer>Harbour Yoga, made with care</footer>
</body>
</html>

# Accessibility audit: input.html (Harbour Yoga)

Scope: static review of the HTML and CSS only. Nothing was run in a browser or with a screen reader.
## Summary
9 findings: 2 blocker, 4 serious, 3 moderate
Worst contrast: button 2.03:1 (needs 4.5:1)
Fix 1: label the email field (line 29)
Fix 2: restore the focus outline (line 13)

## Contrast (WCAG AA: 4.5:1 for text under 24px)
| Element | Text | Background | Ratio | Result |
|---|---|---|---|---|
| Body text | #1a1a1a | #f4f1ea | 15.43:1 | Pass |
| Links | #0f5f73 | #ffffff | 7.23:1 | Pass |
| .intro (line 10) | #777777 | #ffffff | 4.48:1 | Fail (just under 4.5) |
| .btn (line 11) | #ffffff | #f5a623 | 2.03:1 | Fail |
| footer (line 15) | #9a9a9a | #f4f1ea | 2.49:1 | Fail |

## Findings, ordered by impact
1. **Blocker - email field has no label (line 29).** A placeholder is not a label and disappears when typing. Fix: `<label for="email">Your email</label>` and `id="email"` on the input.
2. **Blocker - focus outline removed (line 13).** Keyboard users cannot see where they are. Fix: delete `outline: none`, or add `a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; }`.
3. **Serious - button contrast 2.03:1 (line 11).** Fix: `color: #1a1a1a` on `#f5a623` gives 8.59:1.
4. **Serious - image has no alt (line 23).** Fix: `alt="Group class in the studio"` if it carries meaning, or `alt=""` if decorative. Confirm which with the page owner.
5. **Serious - footer contrast 2.49:1 (line 15).** Fix: `color: #595959` on `#f4f1ea` gives 6.21:1.
6. **Serious - tap targets too small (lines 11, 14, 31).** The Sign up button is about 24px tall (14px text + 8px padding, estimated from the CSS) and the 12px Privacy link is smaller than 44px. Fix: `min-height: 44px; min-width: 44px; padding: 0 16px;` on `.btn`, and `display: inline-block; min-height: 44px; line-height: 44px;` on `.small-link`.
7. **Moderate - intro text 4.48:1 (line 10).** Fix: `color: #595959` on `#ffffff` gives 7.00:1.
8. **Moderate - heading order (lines 18, 21).** The page jumps from `h1` to `h3`, then `h2`. Fix: make "Classes this week" an `h2`.
9. **Moderate - schedule is a list written with line breaks (line 24).** Screen readers cannot announce "list of 3". Fix: `<ul><li>Monday 18:00</li><li>Wednesday 07:30</li><li>Saturday 10:00</li></ul>`. Also, the link "Click here" (line 25) has no meaning out of context; use "See all classes".

## Not checked
Zoom to 200%, reduced motion, screen reader announcements, form error messages, and real keyboard order. Automated and static checks do not replace testing with real users, including people who use assistive technology.

---
name: a11y-audit
description: Audits a small HTML page for contrast, missing labels and alt text, heading order, tap targets and focus visibility, then lists fixes ordered by impact. Use when a page needs an accessibility check before launch or after a redesign.
---
# Accessibility Audit
Reads one HTML page and returns a ranked, copy-ready list of accessibility fixes with real contrast numbers.

## When to use
- Before launching or sharing a page, form or landing page.
- After a redesign that changed colors, forms or layout.
- Not for whole sites, native apps or PDFs; say so and ask for one page at a time.

## Inputs
- The HTML file (with its inline CSS) or the page source pasted as text. If CSS lives in another file, ask for it.
- Optional: target level (default WCAG 2.2 AA) and which parts matter most (for example the signup form).

## Steps
1. Read the whole file and note line numbers for every finding.
2. Contrast: list each text color, its real background, and its font size. Compute the ratio with a short script (relative luminance, then (lighter + 0.05) / (darker + 0.05)). Round to two decimals. Required: 4.5:1 for normal text, 3:1 for text of 24px or larger or 19px bold, and 3:1 for button borders and icons.
3. Names: every input has a visible `<label>` tied by `for` and `id`; every `img` has `alt` (empty for decorative); every button and link has text that makes sense out of context ("Click here" fails).
4. Structure: one `h1`, no skipped heading levels, real `ul`/`ol` for lists, `lang` on `html`, landmarks (`main`, `nav`, `footer`).
5. Tap targets: interactive elements should be at least 44 by 44 px. Estimate from CSS (font size + padding) and say it is an estimate.
6. Focus: look for `outline: none` or `outline: 0` without a replacement, and for clickable `div` or `span` elements that a keyboard cannot reach.
7. Rank findings: Blocker (a task cannot be completed), Serious (hard to complete), Moderate (confusing or tiring). Order by impact, then by effort.
8. For each finding write the line number, the problem, and a ready fix (code or exact new color with its computed ratio).

## Output
Write `a11y-report.md` next to the page, never into it. Layout: title and scope, summary count by severity, a contrast table (element, text, background, ratio, pass/fail), numbered findings with severity, then a "Not checked" section.
End the report with: automated and static checks do not replace testing with real users, including people who use assistive technology.

## Rules
- Never invent a ratio; compute every one. Never invent problems that the file does not show.
- State clearly what you could not check (zoom, screen reader output, real keyboard order, live error messages).
- Do not change the user's page; propose fixes in the report. Write results to a new file, never overwrite the page.
- Ask about images whose purpose is unclear instead of guessing alt text.
- This is guidance, not a legal compliance opinion; legal questions go to a professional.