In BRIEF.md, Maison Lumen defines its aesthetic as quiet luxury: “Restraint over spectacle, craft over campaigns, and proof over adjectives. Every client site has to feel like walking into the house itself, and still meet WCAG 2.2 AA.”
Accessibility is the digital equivalent of architectural hospitality. Just as a physical Paris or Milan flagship does not force a guest through a heavy door without assistance or print a horology catalogue in unreadable ink, a digital flagship for our own agency and our three showcase clients—an electric grand tourer automaker, an independent haute horology house, and an invitation-only private estate (BRIEF.md)—must treat W3C WCAG 2.2 Level AA (published as a W3C Recommendation on October 5, 2023) as a mark of craft rather than a regulatory compromise.
font-weight: 100–200) with muted taupe, champagne, or warm grey text on off-white or charcoal backgrounds. Ultra-thin strokes suffer from sub-pixel anti-aliasing drop-off on standard-DPI screens and fail WCAG SC 1.4.3 Contrast (Minimum), which mandates at least 4.5:1 contrast for normal text and 3:1 for large text (≥18pt / 24px regular, or ≥14pt / 18.66px bold). Furthermore, SC 1.4.4 Resize Text and SC 1.4.12 Text Spacing require layouts not to clip or overlap when text is zoomed to 200% or when line-height (1.5), letter-spacing (0.12em), and word-spacing (0.16em) are increased.font-weight: 400 minimum for body copy at ≥4.5:1 contrast (ideally ≥7:1 for prolonged reading), and reserve delicate weights (300) strictly for display headings ≥24px that clear 4.5:1.linear-gradient) or solid surface token behind the text container so the worst-case background pixel still clears 4.5:1 (verified with the WebAIM Contrast Checker).#FFFFFF text on #000000 (21:1) can cause halation (astigmatism blooming) for users with visual impairments, while secondary labels and hairline input borders (#2A2A2A on #111111) routinely fail both SC 1.4.3 Contrast (Minimum) and SC 1.4.11 Non-text Contrast (3:1 required for UI component boundaries and state indicators).#0E0E10 or #141311) with warm alabaster text (#F2EFE9, ~16:1 contrast), muted stone secondary text (#A8A298, ~6.8:1 contrast), and subtle brass/stone borders that maintain ≥3:1 against adjacent surfaces.muted, include a persistent, keyboard-accessible <button> (“Pause film” / “Play film”) with ≥3:1 contrast, and honour @media (prefers-reduced-motion: reduce) by halting autoplay in JS (video.pause()), disabling scroll-linked transforms, and displaying a curated high-resolution poster still.cursor: none) to render a lagging JS circle, and hijack wheel/touch events with inertia libraries. Hiding the OS cursor breaks assistive screen magnifiers and custom high-visibility OS pointers. Scroll-jacking breaks Space / PageDown / arrow-key scrolling (SC 2.1.1 Keyboard), causes motion sickness, and can trap focus (SC 2.1.2 No Keyboard Trap).cursor: none and never hijack native document scroll. Rely on native browser scrolling (scroll-behavior: smooth only inside @media (prefers-reduced-motion: no-preference)) and understated CSS hover transitions on elements themselves.<button> controls (satisfying SC 2.5.7 Dragging Movements and SC 2.5.8 Target Size (Minimum)), wrap the gallery in <section aria-roledescription="carousel" aria-label="...">, and manage inert or tabindex on hidden slides.outline: none is the single most common CSS anti-pattern on luxury sites because designers dislike the default browser blue ring. Removing it violates SC 2.4.7 Focus Visible (Level AA) and SC 1.4.11 Non-text Contrast.:focus-visible—for example, a 2px solid high-contrast border in warm ivory or burnished gold (≥3:1 against background) with outline-offset: 4px, or a dual-ring (box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg)) that remains legible over any image or surface, aligned with the WCAG 2.2 SC 2.4.13 Focus Appearance benchmark.alt attributes entirely (falling back to filenames like IMG_8842_v3.webp), stuff them with marketing clichés, or write verbose descriptions on purely atmospheric textures—violating SC 1.1.1 Non-text Content.alt="Three-quarter profile of the Aethelgard GT in brushed titanium grey, showing flush pillarless glass and forged 21-inch aero wheels" or alt="Macro view of Calibre 04 hand-bevelled German silver bridges and free-sprung balance wheel").alt="" (and aria-hidden="true" on decorative inline <svg>) so screen readers are not cluttered with noise.placeholder text instead of persistent <label> elements, low-contrast bottom rules (<3:1), and colour-only error states—failing SC 3.3.2 Labels or Instructions, SC 1.3.1 Info and Relationships, SC 1.3.5 Identify Input Purpose, and SC 3.3.1 Error Identification.<label for="..."> elements above each field. Ensure input borders have ≥3:1 contrast against the page background (SC 1.4.11). Include standard autocomplete attributes (name, email, tel). Use <fieldset> and <legend> for radio groups (e.g., preferred boutique city: Paris, Milan, Geneva). On validation error, set aria-invalid="true", connect a descriptive message via aria-describedby (“Please enter a valid telephone number including country code”), and avoid custom JS date-pickers unless they implement full WAI-ARIA Date Picker Dialog keyboard navigation.<dialog> (aria-modal="true", focus moved inside on open, Escape closes/rejects, background set to inert) or place it first in the DOM order with scroll-padding-bottom matching its height so focused elements are never obscured. Give “Reject non-essential” equal visual weight and contrast as “Accept” (aligning with EU GDPR / CNIL dark-pattern rules and WCAG contrast).What’s New in WCAG 2.2 (W3C WAI) introduced nine new success criteria (and removed 4.1.1 Parsing). The key AA and A additions every Maison Lumen flagship must pass are:
scroll-padding-top and scroll-padding-bottom on html so tabbed elements scroll clear of sticky chrome.× buttons, and footer social icons—must have a minimum 24×24px hit box (and ideally 44×44px on touch viewports per SC 2.5.5).<button>Rotate left 15°</button>, <button>Next chapter</button>).autocomplete="current-password" / one-time-code), copy-pasting into Passcode/OTP fields, WebAuthn/Passkeys, or magic email links.p-carousel, p-modal, p-pin-code, p-button-pure), enforcing high-contrast dark/light themes, 200% text zoom resilience, and full keyboard operability while preserving unmistakable automotive prestige.@media (prefers-reduced-motion: reduce) fallbacks, and clean VoiceOver semantics.<10 employees and <€2M turnover) are exempt. For a Paris/Milan agency like Maison Lumen, compliance is mandatory under French (RGAA / Article 47 Law No. 2005-102) and Italian (AgID Stanca Law) market surveillance.Reviewers (reviews/<slug>.md) can audit every site against this 12-point WCAG 2.2 AA checklist:
<24px regular / <18.66px bold) measures ≥4.5:1 against its exact background; large display type (≥24px) measures ≥3:1 (recommended ≥4.5:1 if weight is 300).4.5:1.≥3:1 contrast against adjacent surfaces in both light and dark sections.320px CSS width (400% zoom) and with WCAG text-spacing overrides applied, no text is clipped (overflow: hidden on fixed-height boxes) and no horizontal scrollbar appears.<button>. Enabling prefers-reduced-motion: reduce halts autoplay videos and disables parallax/scroll transitions.cursor: none is never used; native browser scrolling (Space, PageDown, Up/Down arrows, trackpad) is unintercepted.≥3:1) :focus-visible indicator on every interactive element, include a “Skip to main content” link (SC 2.4.1), and sticky headers/footers never obscure the focused element.24×24px (or 24px radial spacing).<button> controls without dragging.<img> elements have specific, craft-accurate alt descriptions; purely decorative images use alt="" and decorative <svg> elements use aria-hidden="true".<label for="...">, valid autocomplete token, ≥3:1 border contrast, programmatic error messages (aria-invalid + aria-describedby), and supports paste/autofill.<html lang="...">, descriptive <title>, <header>, <main id="main">, <nav>, <footer>, sequential <h1>–<h3> hierarchy without skipped levels, and consistent concierge contact placement.:root with pre-audited contrast ratios: body text ≥7:1, secondary captions ≥4.5:1, and hairline rules/input borders ≥3:1 against their surface token. Test: Run automated contrast checks and verify zero text elements fall below 4.5:1 (3:1 for ≥24px).font-weight: 300 to headings ≥24px (1.5rem) and forbid font-weight: 100–200 entirely. Whenever text overlays hero imagery, apply a CSS gradient scrim or solid backdrop plate so contrast against the worst-case image pixel remains ≥4.5:1. Test: Disable images or replace them with solid #FFFFFF and #000000 test blocks in DevTools; overlaid text must still pass 4.5:1.:focus-visible indicator and scroll-padding-top across all four sites (SC 2.4.1, 2.4.7, 2.4.11): Add a first-child <a class="skip-link" href="#main">Skip to main content</a> and style :focus-visible { outline: 2px solid var(--focus-color); outline-offset: 4px; } with ≥3:1 contrast, plus html { scroll-padding-top: var(--header-height, 5rem); }. Test: Tab through the entire page from the URL bar; every interactive control must show a clear ring and never hide behind a sticky header.@media (prefers-reduced-motion: reduce) and explicit Pause buttons (SC 2.2.2, 2.3.3): Every ambient video must include a visible <button type="button" aria-pressed="false">Pause motion</button> and automatically pause on load when window.matchMedia('(prefers-reduced-motion: reduce)').matches is true, while CSS disables all transitions/animations. Test: Emulate prefers-reduced-motion: reduce in browser DevTools and confirm zero animations or playing videos run.cursor: none, scroll-jacking, and drag-only galleries (SC 2.1.1, 2.5.7): Keep native OS cursors and native browser scrolling intact on all pages. Prefer static asymmetric editorial grids for lookbooks, watch calibres, and estate galleries; if a carousel or slider is used, provide single-click <button> controls (“Previous”, “Next”) alongside keyboard arrow support. Test: Grep CSS/JS for cursor: none and wheel/touchmove preventDefault(); operate all galleries with a single click or keyboard Tab + Enter.24×24px minimum hit area (44×44px preferred) on all interactive controls (SC 2.5.8): Set min-width: 24px; min-height: 24px; (and padding to reach 44×44px on touch controls) on all buttons, nav links, gallery controls, and form inputs. Test: Run document.querySelectorAll('a, button, input, select, textarea') in DevTools and assert getBoundingClientRect().width >= 24 && height >= 24 for every non-inline interactive element.alt text for editorial plates and alt="" for decorative flourishes (SC 1.1.1): Require every product, architectural, or horological photograph to describe material, perspective, and subject matter in 10–25 factual words, while marking ornamental monograms, dividers, and ambient textures with alt="" or aria-hidden="true". Test: Inspect all <img> and <svg> nodes; confirm zero missing alt attributes, zero filename alt strings, and aria-hidden="true" on all decorative SVGs.<label> elements, autocomplete, and aria-describedby error states (SC 1.3.5, 3.3.1, 3.3.2, 3.3.8): Never use placeholder-only inputs. Pair every field with a visible <label for="...">, standard HTML autocomplete attributes, ≥3:1 border contrast, native <input type="date"> or accessible radio pills, and text-based error messages linked via aria-describedby. Test: Submit an empty or invalid booking form using only the keyboard and verify focus moves to or announces the specific text error for each field.Files changed: None (read-only research task; read examples/maison-lumen/BRIEF.md).