Case Study: Defining Accessibility for 3D Media

Google
  • Partners: Google & Shopify
  • Role: Accessibility Specialist
  • Year: 2019
  • Focus: New Media Standards, Web Components, and Emerging Tech

The Challenge

In 2019, Shopify prepared to launch support for 3D product models, allowing merchants to showcase products in a fully interactive third dimension. While video accessibility was well-understood, 3D models on the web were a "frontier" technology. There were no established WCAG patterns or W3C guidance on how to make a 3D object understandable for someone using a screen reader, a keyboard, or voice dictation.

The Solution

I initiated a collaborative effort between Shopify’s Rich Media team and the Google engineers responsible for the <model-viewer> web component. My role was to act as the accessibility architect, testing the component against various assistive technologies and advocating for features that would make 3D content inclusive.

Key contributions & advocacy:

  • Defining the "3D Model" role: Since "3D model" is not a native HTML element, I advocated for using aria-roledescription="3d model" on the canvas to provide immediate semantic context to screen reader users, distinguishing it from static images or passive videos.
  • Keyboard navigation & focus: I identified the need for a visible :focus-visible ring so sighted keyboard users could track their position, and I pushed for consistent arrow-key support to rotate the model across different browsers.
  • Stage-specific descriptions: I proposed making "stage descriptions" configurable. This allowed merchants to provide unique alt-text for different angles (e.g., describing the back of a backpack vs. the front), ensuring the "depth" of the model was actually communicated audibly.
  • Alternative inputs: I recommended adding dedicated button controls for zoom and rotation to support users with limited mobility or those using voice dictation, rather than relying solely on complex touch/swipe gestures.

The Impact

While not every recommendation was implemented immediately, this collaboration significantly moved the needle for the <model-viewer> component. It helped set a precedent for how 3D media should be handled on the web, ensuring that as e-commerce moves into more immersive spaces, accessibility isn't left behind.

Deep Dive