Accessibility

What has been implemented

Accessibility was treated as part of the design rather than as a pass at the end. The following are built in throughout:

• A skip-to-content link as the first focusable element on every page.
• Semantic landmarks: one main region per page, labelled navigation, real headers and footers.
• A single visible focus style, applied via :focus-visible so it appears for keyboard users without following the mouse.
• Logical heading order on every route, with one h1 per page and no skipped levels.
• The mobile navigation and search panel are modal dialogues: focus moves in, is trapped while open, returns to the trigger on close, and Escape dismisses them.
• Page scroll is locked while an overlay is open, with scrollbar-width compensation so the page behind does not shift.
• Buttons are buttons and links are links. Nothing that navigates is a button, and nothing that acts is a link.
• Card links wrap the headline and are stretched across the card, so each story is one link whose accessible name is its headline.
• Every image carries meaningful alt text from the content model; alt text is never generated from a title at render time.
• Form fields have real labels, describedby hints, aria-invalid on error, and a live region announcing the result.
• All motion is decorative and removed entirely under prefers-reduced-motion, including hover image scaling and smooth scrolling.
• No interaction depends on hover alone; every hover affordance is also reachable by keyboard.
• Interactive targets in the header, navigation and forms clear a 44px touch target.
• Decorative rules, numerals and separator glyphs are aria-hidden so they are not announced.

Colour and contrast

Body copy, metadata and headings are set in tones measured against the paper background. The lightest tone used for small text measures approximately 5.7:1, which passes AA for normal-size text.

Every text tone in the palette clears 4.5:1 against the grounds it is used on, at any size. The lightest tones are reserved for rules and dividers, which carry no text and so have no contrast requirement. Both rules are documented in the design system and checked by an automated scan.

Colour is never the sole carrier of meaning. Status marks pair a colour with a text label, and links are distinguished by underline or weight as well as by colour.

Known limitations

These are unresolved, and listing them is more useful than omitting them:

• No testing with real screen readers (NVDA, JAWS, VoiceOver) has been performed. Verification so far is structural and automated.
• No testing with users of assistive technology has been performed.
• The site has one colour scheme. There is no dark mode, and no high-contrast or forced-colours mode has been specifically tested.
• The table-of-contents rail does not indicate which section you are currently reading; it is a set of links rather than a progress indicator.
• The brand directory presents tabular data as definition lists laid out in a grid. This gives every value a label at all screen sizes, but it is not a table, so screen-reader table navigation shortcuts do not apply to it.
• Long editorial headlines rely on text-wrap: balance, which is unsupported in older browsers. Those browsers get ordinary wrapping: legible, but less tidy.
• Search results do not manage focus after navigation, because search is a standard page load rather than a live-updating region.

Reporting a problem

If something on this site is difficult or impossible to use with assistive technology, that is a defect and we want to know. Write to hello@petite-revue.com, or use the accessibility route on the contact page, which fills in the subject line for you.

The most useful report names the page and what happened. If you are comfortable saying so, the browser, device or assistive technology involved narrows it down considerably. No response time is promised, but accessibility reports are read before feature work.