Accessibility

Web Content Accessibility Guidelines 2.1 at Level AA. Not everything on every page has been through an audit by a third party, and where we fall short of the standard it is listed below rather than left for you to discover.

It is the question the whole design had to answer, because the four causes it distinguishes are four greys that differ mainly in hue and barely in lightness. A site that let colour carry the conclusion would be unusable for a large number of people and unreliable on a bad screen for everyone else.

So no colour on this site ever travels alone. Each of the four causes has:

• a colour, from the eight-token palette;
• a distinct pattern — a diagonal hatch, a fine dot field, a cross grid, a vertical rule — which is what actually identifies it;
• a written name, printed beside the swatch every time it appears.

The pattern names are given in the key in the navigation rail, which stays on screen. Turn the colour off entirely and every page still reads correctly.

For the same reason the stop-loss panel is not red. It is drawn in the same neutral greys as the rest of the page, and its urgency comes from being first and from saying specifically what will happen.

Computed rather than estimated, and re-derived from the stylesheet at build time so they cannot quietly drift:

Level AA asks for 4.5 : 1 on body text; every pairing above clears it, and most clear Level AAA. Two combinations fall below and are therefore never used anywhere: secondary grey text on the hairline colour, and secondary grey text on any of the four cause fills. Text on a cause fill is always the full-strength ink.

Yes. Everything interactive is a real button, link, input or disclosure element, reachable in reading order, with a visible focus outline drawn in ink at 2px rather than the browser’s faint default. A skip link is the first thing in the tab order on every page.

Nothing on this site is revealed by hovering. Every annotation, every label and every caption is printed under its figure, which is as much a decision about touch screens as it is about pointing devices.

There is almost no motion: no parallax, no autoplaying anything, no carousel. The one animation is a slow pulse on the loading strip, and it stops entirely when a device asks for reduced motion.

The layout reflows to 320px and holds up at 200% zoom without horizontal scrolling. Wide tables scroll inside their own frame rather than pushing the page sideways.

There is a print stylesheet, because a treatment sheet is meant to be taped to a machine. It drops the navigation, keeps the swatch patterns, and prints the ordered steps on one page.

• The distribution table on the front page is wide. It scrolls inside its own frame on a narrow screen, which works but is not as good as a layout that reflows.
• The annotated distribution view is a visual output. Every region it marks is also written out in text beside it, but the marked image itself is not a substitute for that text, and we would rather the text came first.
• No third-party audit has been carried out yet.

support@simplyhosieryonline.shop, or ring +44 1676 535432. Tell us the page and what happened; you do not need to know the name of the guideline. We answer within one working day and will say what we are going to do about it.