Articles on: Seller Cases

Storefront Keyboard Accessibility

Keyboard accessibility allows your customers to browse, customize, and purchase personalized products on your storefront using only a keyboard. This ensures an inclusive shopping experience and helps your store meet accessibility standards such as the Americans with Disabilities Act (ADA) in the US and the European Accessibility Act (EAA / EN 301 549) in the EU.


Keyboard navigation is enabled automatically across all Teeinblue personalization forms and popups. You do not need to configure extra code or custom settings.



📖 Table of Contents




1. How keyboard navigation works on your store


Customers who cannot or prefer not to use a mouse can interact with every step of the personalization process using standard keyboard keys:


  • Tab: Move focus forward to the next interactive field, button, or option.
  • Shift + Tab: Move focus backward to the previous element.
  • Enter / Spacebar: Select an option, open a dropdown, trigger buttons, or upload an image.
  • Arrow keys (Up / Down / Left / Right): Navigate within option groups (radios, color swatches) and select items inside dropdown menus.
  • Escape: Close an open dropdown list or dismiss a popup modal.


Every element currently in focus displays a bold, high-contrast focus ring so shoppers can clearly track their position on the page.



2. Form controls and customization options


All standard Teeinblue personalization fields support keyboard interaction:


  • Text and Number Inputs: Focus lands directly into the typing area.
  • Product Variant Swatches & Radios: Customers can navigate through color swatches or size buttons using Arrow keys, and confirm or toggle choices with Spacebar or Enter.
  • Clipart Selectors: Clipart thumbnails are fully accessible via Tab and selectable using Enter or Spacebar.
  • Dropdown Menus: Press Enter to open the list, use Arrow Down or Arrow Up to highlight an option, and press Enter to confirm the selection. Pressing Escape closes the list without changing the value.
  • Switches & Checkboxes: Press Spacebar or Enter to toggle optional features on or off.
  • Date Pickers & Maps: Date selectors support arrow-key navigation without submitting the form unexpectedly. Location search fields allow keyboard selection from suggested addresses.



3. Image upload, repositioning, and cropping


For products that require customer photo uploads, keyboard users can complete the entire configuration through dedicated on-screen controls:


Action

Keyboard Support

How to do it

Upload Photo

Full

Press Tab to reach the upload button, then press Enter or Spacebar to open the file selection window.

Replace Photo

Full

Focus on the Replace photo button in the popup and press Enter or Spacebar.

Move / Nudge Photo

Full

In the reposition popup, Tab to the toolbar buttons (Move Left, Move Right, Move Up, Move Down) and press Enter to nudge the image position.

Zoom & Rotate

Full

Tab to the Zoom In, Zoom Out, Rotate Clockwise, or Rotate Counter-Clockwise buttons and press Enter.

Save / Cancel

Full

Tab to the Save or Cancel button and press Enter.

Crop Frame Adjustment

Partial

Zooming, photo replacement, and final crop confirmation are keyboard-operable. Repositioning the crop frame stencil currently requires mouse or touch input.



4. Popups, dialogs, and focus trapping


When a customer clicks to open a popup (such as the Personalize button popup or the Live Preview gallery):


  • The customer's previous focused element on the product page is saved.
  • Keyboard focus immediately moves inside the popup to the first interactive field.
  • Focus is trapped inside the popup: pressing Tab cycles only through elements inside the dialog, preventing the background page from scrolling or receiving accidental clicks.
  • When the customer closes the popup (or presses Escape), keyboard focus automatically returns to the button that originally opened it.



5. Form validation and error focus


If a required field is left empty or invalid when the customer clicks Add to Cart:


  • The page automatically scrolls to the first invalid field.
  • Keyboard focus jumps directly into that invalid input after scrolling finishes.
  • If an order confirmation agreement checkbox is required, focus immediately jumps to the checkbox so the customer can check it with Spacebar.



6. Compliance notes and limitations


  • This feature covers the Teeinblue Personalization Form and its built-in dialogs. Overall storefront compliance also depends on your active Shopify theme and any other apps installed on your store.
  • While core personalization options and repositioning controls are fully keyboard-operable, fine-tuning the boundary of the image crop stencil and freeform custom color pickers currently require a pointer device.
  • IMPORTANT: Do not hide or override browser :focus-visible outline styles in your store theme's custom CSS. Removing focus outlines will prevent keyboard-only shoppers from seeing their position on the form.

Updated on: 14/10/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!