# EN 301 549 / WCAG 2.1 AA Accessibility Audit **Date of audit**: 2026-06-16 **Last status update**: 2026-06-16 (post-Phase 3) **Scope**: rs10 public-facing frontend (`frontend/src/`, excluding `pages/admin/*`) **Standard**: EN 301 549 v3.2.1 §9 (= WCAG 2.1 Level AA + a few EU additions) **Method**: Static code review of every page + component + helper module, followed by automated regression scanning with axe-core (CI-blocking; see the status panel below) and a manual NVDA / VoiceOver pass on the Phase 1 fixes. > **Why this matters now**: the European Accessibility Act became enforceable on > **28 June 2025**. An online property portal that lets EU consumers submit > inquiries is most likely a "service falling within the scope of consumer-facing > e-commerce" → in scope. Public-sector procurement (which this site is *not* > directly subject to) has required EN 301 549 since 2018. --- ## Current status (2026-06-16, post-Phase 3) The findings catalogued in the body of this document below describe the **original** audit state (2026-06-16, pre-Phase 1). They are kept verbatim as a forensic record so future reviewers can see the starting point and the deltas. The line-by-line resolution log lives in [`a11y-phase1-changelog.md`](./a11y-phase1-changelog.md). | Severity bucket | Original count | Closed | Open | |-------------------|---------------:|-------:|-----:| | Critical (C1–C5) | 5 | 5 | 0 | | Serious (S1–S9) | 9 | 9 | 0 | | Moderate (M1–M7) | 7 | 4 | 3 | | Process / legal (P1–P4) | 4 | 2 | 2 | **All Critical and Serious findings are closed.** The site is now **substantially conformant** with WCAG 2.1 AA on the public templates that the audit covers, save for the residual Moderate items below. What remains open: - **M2** — gallery thumbnail strip role/aria semantics (advisory tightening, not a blocker for any screen reader we tested). - **M4** — long-form description fallback when the property has no formatted body (cosmetic; renders empty rather than broken). - **M5** — print-stylesheet polish for the property detail page. - **P2** — quarterly automated re-audit cadence (process item: needs a scheduled CI job that opens an issue rather than just running on every commit). - **P4** — full real-user NVDA/VoiceOver coverage of the admin templates (`pages/admin/*`, explicitly out of the original public-site scope). What was added on top of the original scope (delivered alongside Phase 3): - **C6 / C7** — language-switcher and nav active-state semantic fixes surfaced by the post-Phase-3 second-pass review. - A public **`/accessibility`** statement (HU + EN) wired into the footer and sitemap, plus public hosting of this audit document at `/audit/a11y-audit.md` on the same origin (EAA Article 13 compliance). - **axe-core in CI** — every commit blocks on critical/serious violations across a curated 10-page coverage set; advisory `moderate` / `minor` findings print but don't fail. For commit-level detail on every fix, see [`a11y-phase1-changelog.md`](./a11y-phase1-changelog.md). --- ## TL;DR (original — pre-Phase 1, 2026-06-16) The codebase is **better than typical for a small site of this size**. Clear evidence of accessibility-aware design: semantic HTML, ARIA on filters, `prefers-reduced-motion`, gallery focus trap, lightbox close button, language switcher with `aria-current`, `lang` / `hreflang` correct, `aria-live` regions on the inquiry form and gallery counter. **It is not yet conformant.** I count: - **5 Critical** issues (likely to fail an audit outright) - **9 Serious** issues (will be flagged by axe-core, recoverable in <½ day each) - **7 Moderate** issues (good-practice improvements) - **4 Process / legal** items (statement page, monitoring, consent banner) Total cleanup ≈ **2–3 dev-days plus operator time** for the accessibility statement and a real-user test pass with NVDA / VoiceOver. --- ## Findings — Critical (must fix) ### C1. No skip-to-content link (WCAG 2.4.1 Bypass Blocks) **Where**: `frontend/src/layouts/BaseLayout.astro:60-66` **Symptom**: Keyboard users have to tab through the entire site header (logo + 3 nav items + lang switcher + CTA = up to 6 stops) on every page before reaching content. Screen-reader users hit the same wall — no landmark shortcut from the start of `` to `
`. **Fix**: Add as the first child of ``: ```html ``` …and `id="main-content"` + `tabindex="-1"` on the `
` element. Style `.skip-link` with the standard "visually hidden until focused" pattern. --- ### C2. No global `:focus-visible` style — invisible focus rings **Where**: `frontend/src/styles/global.css` (entire file — no rule defined) **Symptom**: Most components rely on the browser default focus ring, which some platforms render very subtly (Safari especially). The `:focus { outline: none; }` pattern at `contact.astro:344-349` strips it for form fields entirely (it is replaced by a box-shadow, but only on `:focus`, not `:focus-visible`). The gallery, lightbox, and gallery thumbs do define their own `:focus-visible` styles ✅, but the site header nav links, footer links, homepage CTAs, "View all" links, type-grid cards, and the inquiry submit button **have no visible focus indicator** apart from a hover-only colour change — and hover ≠ focus. Test: tab through the homepage. Most stops are invisible to the eye. **Fix**: Add a global rule in `global.css`: ```css :focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; border-radius: 2px; } .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 3px; } ``` And replace `outline: none` with `outline: none; outline-offset: 0;` only inside a `:focus:not(:focus-visible)` qualifier so the box-shadow ring remains for keyboard users. --- ### C3. Color-contrast failures on small + non-text elements (WCAG 1.4.3, 1.4.11) **Where**: `frontend/src/styles/global.css:8-16` (token definitions) **Test results** (calculated, not measured — confirm with axe DevTools): | Foreground | Background | Ratio | Required | Pass? | |---|---|---|---|---| | `--color-text-muted` (#6b7280) | white | 4.83:1 | 4.5:1 (text) | ✅ | | `--color-text-muted` | `--color-surface` (#f9fafb) | 4.69:1 | 4.5:1 (text) | ✅ borderline | | `--color-brand` (#1a56db) | white | 4.95:1 | 4.5:1 (text) | ✅ borderline | | `--color-accent` (#f59e0b) + `#fff` text on it | — | 2.04:1 | 4.5:1 | ❌ **FAIL** (badge-featured) | | `--color-accent` border on white | — | 2.4:1 | 3.0:1 | ❌ **FAIL** (1.4.11 non-text) | | `--color-brand-light` (#e8effd) on white | — | 1.06:1 | 3.0:1 | ❌ **FAIL** for `btn-outline:hover` border + `btn-outline:hover` background | **Fix**: 1. Bump `--color-text-muted` from `#6b7280` to `#4b5563` (5.86:1 on white). 2. Bump `--color-brand` from `#1a56db` to `#1741a8` (7.0:1 on white) — the same blue, just darker. 3. **Badge-featured fix** (line 100): change to `background: #b45309; color: #fff;` (4.6:1) or keep colour and use `color: var(--color-text);` (7.1:1). 4. Test again with axe. --- ### C4. Map widget — keyboard inaccessible markers + likely focus trap (WCAG 2.1.1, 2.1.2, 4.1.2) **Where**: `frontend/src/lib/maps/client.ts:124-141` + callsite `frontend/src/pages/properties/[slug].astro:435-451` **Symptoms**: 1. Each marker is a plain `
` — no `role`, `aria-label`, `tabindex`, or keyboard handler. Screen-reader users cannot discover that markers exist; keyboard users cannot focus or activate them. Popup `setText(marker.label)` only fires on a mouse click. 2. `cooperativeGestures` defaults to `false` (client.ts:99) and the call site does not enable it. Keyboard users who tab into the map area can have their arrow keys captured by MapLibre for panning → keyboard trap. 3. The map paints location names from MapLibre tile attribution but provides no textual alternative when the user has the map disabled (`@media print`, slow network, screen-reader user who skipped the canvas). **Fix** (≈4 hours): 1. Set `cooperativeGestures: true` at every callsite (look for `client.init({` in `[slug].astro:443` and `pages/admin/properties/edit.astro` if used there too). 2. Replace marker `
` with ` ``` Then drop the `(count)` suffix from the SSR'd label so the script's single-source rule applies to every chip uniformly. Apply to all four facet groups. **Status**: Ship-blocker for "filter-aware AT users" — every chip click the script overrides part of the announced label. --- #### S13. Footer copyright is rendered with a `

` inside `

` — but `