Accessibility of EtchwpKits components
EtchwpKits components are built to follow the Web Content Accessibility Guidelines (WCAG) 2.2. This page explains what every component takes care of, what we check before one ships, and what is still up to your own site.
Accessibility is part of how each component is built, not an add-on. Every component follows the same rules for structure, keyboard use, focus, motion and images, and an automated check holds each one to several of them before it ships.
- Every section is named by its heading. The section points at its own heading, so a screen reader lists the sections of a page by name and a visitor can jump straight to one.
- Heading levels are a setting. Most sections start with the same intro, whose Heading Level setting decides the level: a hero uses h1, other sections h2. Keep one h1 per page. If a page has two heroes, set the second one to h2.
- Lists stay lists. Cards, stats, team members and logos that do not look like a list are still marked up as one, so a screen reader announces how many items there are.
- Decoration stays silent. Decorative shapes, icons, overlays and background pictures are hidden from screen readers, so they never read out as clutter.
- Everything works without a mouse. Tab moves from one link, button or field to the next, Enter follows a link, and Enter or Space presses a button. A row of tabs is one stop for Tab, and the arrow keys move between its tabs (see below). Anything a pointer reveals on hover also responds to the keyboard.
- Real buttons and links. Controls are buttons and links, not clickable boxes. A button that shows only an icon has a name that says what it does, such as "Next slide" or "Close menu".
- A visible focus ring. A control reached by keyboard shows a ring drawn from your Automatic.css focus settings (focus colour, width and offset), so changing them in ACSS changes them in every component.
- Focus goes back where it came from. When a component moves focus, for example back to the menu button after a menu closes, the page does not jump.
- Hidden means hidden. Content that is closed or off screen, such as a collapsed answer or an inactive tab, is hidden from screen readers and keyboard focus too, not only made invisible.
Interactive components follow the established patterns, so they behave the way assistive software expects.
| Component | How it works |
|---|---|
| Menus and site headers | A row of links and buttons you can Tab through. A button opens its panel and says whether it is open. Esc closes the panel and returns focus to its button, and a click outside the menu or moving focus out of it closes it too. Only one panel is open at a time. A panel that opens on hover also opens on click and with Enter, so it works on touch screens. The mobile menu keeps the rest of the page out of reach while it is open and returns focus to its toggle when it closes. |
| Accordions and FAQs | Each question is a button that says whether its answer is open. A closed answer is hidden from everyone, screen readers included. |
| Tabs | Tab moves into the row of tabs, the arrow keys move between them, and Home and End jump to the first and the last. |
| Sliders and carousels | Previous and next buttons with names, and the current slide announced politely as it changes. A slider that moves on its own always has a pause button. |
| Countdowns and rotating text | A countdown is not read out every second. Text that rotates is announced when it changes, without interrupting. |
- Reduced motion is respected. A visitor who has asked their device for reduced motion gets still versions: animations stop and the content shows at rest.
- Motion rests when nobody sees it. An animation pauses while its section is off screen or the browser tab is hidden.
- Sliders always have a pause button. A slideshow, a carousel or tabs on a timer have a small round play and pause button beside their own arrows or dots. Its name says what a press will do, and the motion stays stopped until it is pressed again.
- Other long motion has a setting. A marquee, a ticker, a looping demo, a slow drift in the background or a ticking countdown has a Show Pause Button setting, off by default. Turned on, the same round button appears under what moves. Its Pause Button Label and Play Button Label settings let you name it in your own language.
- Motion that ends within five seconds, or that only moves while the visitor hovers or scrolls, needs no button.
- Decorative pictures have an empty alt text and are hidden from screen readers.
- Pictures with meaning come with alt text that describes the sample picture. When you put in your own picture, write alt text for it too: in the component's settings when it has one for the picture, otherwise on the image itself in Etch.
- A collage of several pictures is treated as decoration and hidden from screen readers as a whole. If it carries meaning on your page, say it in the text next to it.
The contact form works with the EtchwpKits Companion plugin.
- Every field has a visible label, and required fields are marked, for screen readers too.
- When a visitor sends the form with something missing, a message at the top says what is wrong, the fields in question are marked as invalid, and focus moves to the first one.
- Whether the message was sent or failed is announced to screen readers.
- Every label, message and button text is a setting, so the whole form can speak your language.
Before a component ships, it is tried in a real browser with JavaScript turned off (the content still shows) and in the Etch builder, and every interactive one with the keyboard only and with reduced motion turned on.
An automated check also runs on every component file. Among other things, it rejects a component when:
- a section's name does not point at its heading;
- a script animates without honouring reduced motion;
- a script moves focus in a way that makes the page jump;
- an optional pause button ships turned on, or is not wired to its setting and labels;
- a group of pictures hidden from screen readers is not also marked as one single image.
Some of what makes a page accessible comes from your site and your content, not from the components:
- Colour contrast. The components take their colours from your Automatic.css palette. Body text needs a contrast of at least 4.5 to 1 against its background, large text at least 3 to 1, and the edges of fields and focus rings at least 3 to 1 against what is around them. Check your palette with a contrast checker, in light and dark mode if you use both.
- Alt text for your own pictures, as described under Images.
- Heading order. One h1 per page, and levels in order: h2 under the h1, h3 under an h2.
- Link and button texts that say where they lead, such as "See our pricing" rather than "Click here".
- Show Pause Button turned on in every section that has the setting, if your site must meet WCAG 2.2.