Accessibility

The site should work for you whether you scroll with a trackpad, tab with a keyboard, listen with a screen reader, or prefer the page to keep still.

Our target

We build to the Web Content Accessibility Guidelines (WCAG) 2.2, level AA.

WCAG 2.2 AA self-assessment: Not assessed yet. This is our own check, not a third-party audit.

How the site is built for access

Everything is in the HTML

The animated dot that builds the home page is decoration and is hidden from screen readers. With reduced motion turned on, nothing moves and every page is shown finished. If you start with the keyboard, the opening animation is skipped.

All of the words, headings, links and the brief form are ordinary HTML, in reading order, with headings that run from H1 to H3 without skipping. A screen reader reads the story as a well-structured page. It doesn’t have to make sense of the picture.

Reduced motion

If your device is set to reduce motion, the site follows that setting automatically. You get the reduced-motion version: nothing is animated, the page simply flows, and the drawing is shown as still, captioned stages you can step through.

The motion toggle

The footer has a Motion: Full / Reduced switch. Your choice is remembered on this device and overrides your system setting. Switching reloads the page and returns you to the section you were reading.

Even in full motion, the page only builds as you scroll. When you stop, the dot keeps breathing and looks around for a few seconds, then rests. Nothing else on the page changes. To stop that too, choose Reduced; in reduced motion nothing moves at all. The site has no flashing content.

Keyboard

  • Every link, button and form control can be reached and used with the keyboard.
  • A Skip to content link sits at the top of every page, plus Skip to the brief wherever the brief form appears.
  • Focus is always visible and is never hidden behind the header.
  • In the brief form, project options are real checkboxes and radio buttons. Use Space to tick a checkbox and the arrow keys to move between radio options.
  • When you move between form steps, or when something goes wrong, focus moves to the step heading or the error, so you know where you are.

Screen readers

  • Every form field has a visible label.
  • Errors appear only after you try to continue, are announced politely, and are linked to the field they belong to.
  • Decorative drawings and the dot are hidden from assistive technology.
  • The page language is set to English.

Seeing and touching

  • Text and controls meet AA contrast. Our bright vermilion is used for decoration and buttons, never for text and never as the only way to show a state.
  • Tap targets are at least 44 pixels.
  • Form text is 16 pixels, so phones don’t zoom in when you start typing.
  • Windows High Contrast and other forced-colour modes are designed for. The drawing is hidden, and the content and the concept page remain.
  • If a script fails or JavaScript is off, you get the finished page with the same words. The content doesn’t change.

Known limitations

We’d rather tell you than let you find out.

  • The concept sites are demonstrations. The three concept builds shown in our work (Oarlock, Somerwell and Ovenbird) are design pieces. They haven’t been held to the same standard as this site, and they haven’t been audited.
  • Screen readers aren’t tested yet. VoiceOver on macOS is on our checklist. VoiceOver on iPhone and NVDA on Windows haven’t been tested yet either. They’re on our launch list.
  • Real-device testing is incomplete. Our performance checks run on one reference Mac. Results on other phones and laptops show as “Not measured yet” on How this site was built until we’ve tested them.
  • Booking uses a third-party window. If you book a call through Cal.com, its booking window is Cal.com’s own, and we can’t control its accessibility. You can always email us to arrange a time instead.
  • The email fallback depends on your email app. If the form opens your email app rather than sending directly, how that works depends on the app you use.

Tell us what doesn’t work

If something on this site gets in your way, we want to know. Tell us the page, what you were trying to do and, if you’re happy to share it, the browser and assistive technology you use.

Email sales@vividwebdesigns.com. We read every message ourselves. If you need any of the site’s content in another format, ask and we’ll send it.

Let's build yours.

Tell us what you're making. You'll hear back from the people doing the work.

Start the brief