# Accessibility

> What Smootify tells screen readers about the parts it renders, such as the chosen option, a value that cannot be bought or a form error, and what stays with your design, from real buttons and labels to contrast and focus styles.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/start/accessibility  
Updated: 2026-10-10

Smootify shows states with classes, such as `is-active` on the chosen colour. It also writes the same states for screen readers, so a visitor who cannot see the design hears what it shows. The rest is up to the design: the elements you choose, their labels, the contrast and the focus styles. This page covers both parts.

## What Smootify writes for you

There is nothing to set. Smootify adds these attributes next to the classes it already sets:

| State | Class you style | What a screen reader hears |
|---|---|---|
| the chosen value, on a button | `is-active` | pressed (`aria-pressed="true"`) |
| the chosen value, on a link | `is-active` or `w--current` | current (`aria-current="true"`) |
| a value that cannot be bought | `is-disabled` | unavailable (`aria-disabled="true"`) |
| a link to the current page | `w--current` | current page (`aria-current="page"`) |

Where these apply:

- **Swatches:** `variant-swatches`, `addon-swatches`, `filter-swatches`, the swatches of dynamic properties, and the buttons of `wishlist-toggle`.
- **Dropdowns and popovers of values:** the pickers for variants, add-ons, filters, sorting, the product configurator and markets. Their values are links, so the chosen one is “current”.
- **Gallery thumbnails:** the thumbnail of the image on screen.
- **Product links** (`product="url"`, `product="link"`), when they point to the current page, as Webflow does for its own links (with the class `w--current` too). A `?variant=` in the address and a final `/` do not count: the link to `/products/tee` is current on `/products/tee?variant=…`, not on `/products/tee-shirt`.

A value that cannot be bought stays focusable and clickable, because a sold-out variant can still be chosen.

Smootify also:

- **names values that have no text.** A swatch that shows only a colour or an image is read with its value’s name, such as “Red”;
- **groups the values of an option.** `variant-swatches`, `variant-dropdown`, `variant-popover` and `variant-selector` are read as a group named after the option, such as “Color”;
- **reads errors out.** The Error message of a Form Block (add to cart, cart, account forms) is announced as soon as it shows;
- **marks the chosen tab** of `subscription-swatches` when it switches tabs itself;
- **writes alt texts from Shopify** on the images it fills. When the Shopify image has no alt text, the one you set in Webflow stays.

For example, this swatch has no text, only a colour. Smootify names each copy after its value:

```html
<variant-swatches data-option="1">
  <button><span option="bg-color"></span></button>
</variant-swatches>
```

## What stays with your design

- **Real buttons.** Things that act, such as swatches, quantity steps and Buy now, are Custom elements with the tag `button`. A Webflow Button publishes a link, and a screen reader announces a link.
- **Names for icon buttons.** Smootify names only swatch values. A button that shows only an icon, such as the plus and minus of a quantity, a remove button in the cart or a cart icon, needs a name: add the custom attribute `aria-label` with what it does.
- **Labels for fields.** Give every field a label: the quantity field, the discount code field, the fields of account and address forms. Webflow’s field Label element works.
- **Contrast.** Check the contrast of your text and of your states. A sold-out value styled with `is-disabled` must stay readable, and the chosen value must differ by more than colour alone, for example with a border.
- **Focus styles.** Style the **Focused (keyboard)** state of buttons, swatches and links in the Style panel, so keyboard users see where they are.
- **Alt texts.** Write them in Shopify, on the product’s media. If you group gallery images by alt text, the variant tag is read aloud: see [Product gallery and media](https://www.smootify.io/docs/build/product-gallery).
- **Ratings.** Stars drawn from a rating metafield are only a picture. Show the number as text too.

This quantity field names its two icon buttons with `aria-label`:

```html
<quantity-input>
  <button data-action="minus" aria-label="Decrease quantity">-</button>
  <input name="quantity">
  <button data-action="plus" aria-label="Increase quantity">+</button>
</quantity-input>
```

**The mini cart.** Built with a dialog or a popover, the cart gets the browser’s own keyboard behaviour: Escape closes it, and a dialog keeps the focus inside while it is open. A cart opened with your own `data-trigger` elements does not. See [Build the cart](https://www.smootify.io/docs/build/cart).

Smootify writes the states. Whether the whole site meets an accessibility standard depends on the site: test it with a screen reader and a keyboard before you publish.

## Where people get stuck

> [!STUCK]
> - **A style on the chosen value does nothing in a dropdown.** Dropdown values are links, which get "current", not "pressed". Style the `is-active` or `w--current` combo class.
> - **A sold-out value cannot be chosen any more.** A style or an interaction blocks its click. Smootify keeps unavailable values clickable on purpose: style `is-disabled` without blocking the click.
> - **A picker is read with the wrong name.** It has an `aria-label` copied from another element. Smootify never replaces a name you set: remove it, and Smootify names the group after the option.
> - **An icon button is read only as "button".** It has no text. Add `aria-label` as a custom attribute.
> - **Buy now or a quantity step is read as a link.** It is a Webflow Button, which publishes a link. Use a Custom element with the tag `button`.