Making a 3D product configurator keyboard-accessible (BFSG / WCAG 2.1 AA)

Since June 2025, the EU Accessibility Act (and Germany's national transposition, the BFSG) requires many commercial websites to meet WCAG 2.1 AA. A 3D product configurator embedded on a covered site is in scope. The parts that cause the most failures are not the form fields around the configurator. They are the interactive editing points on the 3D canvas itself.

Why a WebGL canvas is the hard part

A standard HTML form is reasonably accessible by default: inputs have labels, buttons have text, and the browser handles focus order. A WebGL canvas is opaque to assistive technology. Screen readers see a single element with no internal structure. Drag handles and 3D editing icons rendered inside the canvas have no accessible name, no role, and no keyboard event unless you explicitly wire them up. The canvas is where most configurators fail an accessibility audit.

The approach: parallel accessible controls

The most practical solution is to keep the canvas as the visual surface and expose all configuration actions through accessible HTML controls placed alongside it. The canvas stays visually primary. The accessible path uses real inputs: number fields for dimensions, select elements for material and colour, buttons for actions. Every change made through either path updates the same state, so the 3D view reflects what the keyboard user has selected.

This is more reliable than trying to make the canvas itself keyboard-operable, because screen reader behaviour on canvas elements varies significantly across browser and reader combinations.

Checklist for WCAG 2.1 AA compliance

• Complete keyboard path: Every configuration option reachable by Tab and arrow keys, without requiring a mouse or touch gesture.
• Visible focus indicators: Focus rings must meet AA contrast ratio (3:1 against adjacent colours). Do not suppress the browser default outline without providing a visible replacement.
• No focus trap: Users who Tab into the configurator area must be able to Tab out of it. If the canvas receives focus, Escape or Tab must move focus to the next element.
• Labels on every control: Each input, button, and select must have an associated label element or an aria-label attribute. "Width" is a label. An icon with no text is not.
• Colour contrast on all text: Labels, values, and descriptions must meet 4.5:1 for normal text, 3:1 for large text.
• No colour-only information: If selected state or an error state is indicated only by colour, add text or an icon so users who cannot distinguish colours can read the state.
• Alternative to drag: If the 3D model has drag handles for resizing or repositioning, provide a number input as an alternative. WCAG 2.5.1 (Pointer Gestures) requires that path-based gestures have a single-pointer alternative.
• Status messages announced: When the configurator updates (price changes, a selection is applied), announce the change to screen readers using aria-live regions so keyboard users are not left guessing whether their action worked.

Testing the accessible path

Close your mouse and Tab through the entire configurator. Every option must be reachable and operable. Then run the page through the axe browser extension or Google Lighthouse (Accessibility audit). Target zero WCAG AA violations. Common failures: missing labels on icon-only buttons, missing focus indicators after CSS resets, and colour contrast failures on placeholder text.

If you use a screen reader during testing, NVDA on Windows and VoiceOver on Mac are free. Tab to the configurator section and check that the reader announces each control name and current value. If it reads "canvas" or nothing at all, the HTML alternative controls need more work.

Scope: who is covered under BFSG

In Germany, the BFSG covers private-sector service providers offering services to consumers from June 28 2025, with a two-year grace period for products already on the market. Configurators embedded on dealer or retailer websites that sell directly to consumers are likely in scope. If your B2B site sells only to businesses (not end consumers), the picture is different. Check with legal counsel for your specific situation. The technical requirements are WCAG 2.1 AA regardless of which national law applies.