Accessibility

The BundleM8 bundle form is built to be usable by everyone, including customers who use a keyboard, a screen reader or other assistive technology. This page describes what the form does and how your choices affect it.

What the form does

Standard form controls

Every option is a real radio button or checkbox inside a label, grouped with its group's title. Assistive technology announces each group's name, each option's name and price, and whether it's selected, just like any other form.

This applies to all three layouts. Grid tiles and rows look different, but they use the same controls underneath.

Keyboard support

Customers can complete the whole form with a keyboard:

• Tab moves between groups, the quantity selector and the add to cart button.
• Arrow keys move between options in a group of radio buttons.
• Space selects an option.

Every control shows a visible outline when it has keyboard focus.

Selection rules and errors

• Each group's rules, such as "Choose up to 3.", are read out with the group's name, even when selection hints aren't shown on screen.
• When a selection isn't valid, the error message is announced straight away, and focus moves to the group that needs attention.
• Errors are shown as text, not only by colour.

Live updates

• The price total is announced when it changes, for example "Total Price: $61.20".
• The add to cart button announces when it's busy, and ignores extra presses while the bundle is being added, so it can't be added twice by accident.
• For very large bundles that load when the page opens, the form announces that it's loading.

Other details

• Fixed products are announced as "(Included)" so customers know why they can't be changed.
• Unavailable products are disabled and labelled [Unavailable].
• Product images in grid and row layouts are treated as decorative, because the product's name is already read out.
• In Windows High Contrast mode, the form switches to standard system controls and highlights selected tiles with a system colour.
• When customers have asked their device to reduce motion, the form turns off its animations.
• Text sizes and line spacing scale when customers zoom or enlarge text in their browser.

What you can do

The form's accessibility also depends on choices you make.

Choose readable colours

Low-contrast colours make the form hard to see. BundleM8 warns you about colours that fall below the WCAG contrast guidelines in Settings → Appearance, and suggests readable alternatives. See Colour contrast.

Write clear titles and labels

• Give each group a title that says what to do, such as "Choose your grind" rather than "Options".
• Keep product labels short and distinct. Customers using a screen reader hear the full label for every option.
• Avoid relying on images alone to tell products apart.

Show selection hints

Turning on Show selection hints helps every customer understand the rules before they start, and reduces errors at add to cart.

Test your page

Try adding a bundle using only your keyboard, and with your device's screen reader (VoiceOver on Mac and iPhone, Narrator on Windows, TalkBack on Android). If you've changed the form's styling with CSS, check that focus outlines and selected states are still visible.