> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://support.teeinblue.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 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](#2-1-how-keyboard-navigation-works-on-your-store) * [2. Form controls and customization options](#2-2-form-controls-and-customization-options) * [3. Image upload, repositioning, and cropping](#2-3-image-upload-repositioning-and-cropping) * [4. Popups, dialogs, and focus trapping](#2-4-popups-dialogs-and-focus-trapping) * [5. Form validation and error focus](#2-5-form-validation-and-error-focus) * [6. Compliance notes and limitations](#2-6-compliance-notes-and-limitations) --- ## 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.