2.0 Beta

Smootify 2.0 is in public beta. Your 1.x store keeps working. Move when you want.

What changed
Log inStart free

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.

v2.0 beta
Open .md
On this page
  1. What Smootify writes for you
  2. What stays with your design
  3. Where people get stuck

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:

is-active

The chosen value, on a button

Heard as
pressed
Written
aria-pressed="true"
is-activeorw--current

The chosen value, on a link

Heard as
current
Written
aria-current="true"
is-disabled

A value that cannot be bought

Heard as
unavailable
Written
aria-disabled="true"
w--current

A link to the current page

Heard as
current page
Written
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:

Example structure of the Navigator
variant-swatchesCustom Elementdata-option=1
buttonCustom Element
Text Spanoption=bg-color

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.
  • 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:

Example structure of the Navigator
quantity-inputCustom Element
buttonCustom Elementdata-action=minusaria-label=Decrease quantity
Text“-”
Text FieldName “quantity”
buttonCustom Elementdata-action=plusaria-label=Increase quantity
Text“+”

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.

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

Check these first

  • 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.

    ↑ ↓ to moveEnter to openEsc to close