Accessibility

A gallery that only some people can walk into is not a gallery. This page says what has actually been built into Mirevoir, what is still short of where it should be, and what happens when you tell us.

What we build to

The target is the Web Content Accessibility Guidelines, version 2.2, at level AA. That is a target, not a certificate — nobody outside the house has audited this site. What follows is written from the code, not from a template.

What is in place

• Structure. Every page carries one first-level heading and its headings descend in order. The header, the main region and the footer are real landmarks, and both menus are named, so a screen reader can jump between them instead of reading from the top each time.
• Keyboard.Every link, button and field is reachable and operable from the keyboard alone, in the order it appears on the page. Nothing here needs a hover, a drag or a pointer — the movement on a drop card is decoration over information that is already written out. The first thing the keyboard reaches on any page is a link that skips the header and drops you into the content.
• The mobile menu. It is a proper dialog. Opening it moves your focus into it and holds it there, so you cannot tab into the page hidden behind it. Escape closes it, and closing it puts your focus back on the button you opened it with rather than at the top of the document.
• Focus.Focus is never suppressed. A brass outline sits three pixels clear of whatever holds it, in one style, on every control on the site — including every field on both forms. Anything the browser scrolls to, whether an in-page link or something that has just taken focus, is offset clear of the fixed header instead of landing underneath it.
• Contrast.Body copy and headings are near-black on bone, far above the ratio the standard asks for. The faint tier was rebuilt to clear four and a half to one on every ground it is set against — lot numbers, captions and dated labels on both the paper canvas and the sunken band, the slashes that divide a lot line, and the placeholder text in every field of both forms.
• Targets. The two buttons that open and close the mobile menu carry a hit area of at least forty-four pixels square, which is larger than the mark drawn inside them.
• Images.Every product photograph is described by what it is and what shade it is — matte lipstick in deep crimson, not product image. The sold-out seal is a drawn mark, so it is hidden from assistive software and its words are given again as text.
• Motion. If your system asks for reduced motion, this site listens. The reveals become plain, the ticker stops and resets to the start rather than freezing mid-word, and the countdown drops its seconds so nothing on the page is in permanent movement.
• The forms.Every field on the drop list and on the message form is labelled, typed and left to your browser to autofill. Both confirmations replace the form they answer, so both are announced to a screen reader and both take your focus, which means you are told what happened rather than left at the top of the page wondering. The countdown, which changes every second, is deliberately silent — it is given once as a sentence instead.

Where it is not there yet

• The hairlines — the rules between sections, and the line under each form field at rest — are drawn far below the ratio the standard asks of a control you have to find. A field is legible by its label and its focus outline rather than by its underline. This is the next thing on the list.
• Outside the mobile menu, tap targets are the size of the text they sit on. Links in a run of body copy and in the footer columns are smaller than the forty-four pixels a finger wants, and they sit close together.
• Type is set in fixed pixel sizes. Page zoom scales it correctly to two hundred per cent without clipping or overlap, but a text-only size increase does not move it.
• The sold-out seal sets its last line at seven pixels. It is decorative and every word of it is repeated in the page text, but it is smaller than any type should be.
• Testing is done by hand, with a keyboard and a screen reader, against the browsers we have. It is not an audit, and it does not cover every reader and browser pair.