We are improving the accessibility of variant selects, surcharge selects and color filters.
This change applies to all 3G templates and is controlled via UMS.
Update management preview key: variant_and_filter_labels
The change is scheduled for release on September 30, 2026. If you are an addon developer, please review the changes described below now and adjust your addons accordingly. On the release date, these improvements will be rolled out to the majority of customers. E-shops using Deferred Template Updates will have time until October 14, 2026 to modify their customizations and accept the update.
You can preview the changes by running the command shoptet.helpers.enableUpdatePreview('variant_and_filter_labels') in the browser console.
sr-only class and use the new advanced-parameter-input class instead of display: none. The second label element has been removed. Each checkbox also has a screen-reader-only label containing the value and product count; the title attribute has been moved from the label element to an inner span element with the class .advanced-parameter-inner, where it is used to generate a tooltip.<label for> elements. Visible captions previously rendered as plain text, <strong> or <span> are now <label> elements with the same appearance. Surcharge selects have a new id in the format surcharge-parameter-id-{id}. In the Tango template, the simple variant select gets a new visible label, which was previously missing.#simple-variants or .hidden-split-parameter) has role="radiogroup" and is named by its caption via aria-labelledby. Each swatch radio is named via aria-labelledby pointing at the .parameter-value span, which is now rendered with the hidden attribute; swatch images have an empty alt. The placeholder radio .variant-default is no longer checked and is hidden with the hidden attribute. It had to be both hidden and unchecked so that keyboard and screen reader navigation of the variant group works correctly in Safari..variant-default is not checked anymore, the “variant not chosen” state is detected by a new public function shoptet.variantsCommon.hasUnselectedVariantGroup() (true when any variant radio group has no checked input). hasToDisableCartButton() and the form submit handler use it instead of .variant-default:checked. Resetting split variants (unavailable.js) now unchecks the selected radio instead of checking the placeholder.role="tabpanel" moved from the <ul> to a new wrapper <div>, so the file list keeps its list semantics.<td colspan="2"> instead of <th colspan="2">.Review custom CSS/JS connected to these elements. If you target the color filter inputs, variant captions, consents or the related files tab using selectors, please review them — the new label elements, the wrapper around the related files list and the changed position of filter checkboxes may break your selectors. If your scripts detect an unselected variant via .variant-default:checked, you can use shoptet.variantsCommon.hasUnselectedVariantGroup() instead.