Square Online Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance
Last updated: 2026-05-22
Square Online is Square's website and online-store builder, built on the Weebly platform Square acquired, and it is a common choice for the exact businesses most exposed to accessibility complaints: restaurants taking online orders, retailers selling a handful of products, salons and studios booking appointments, and other small operations that want a store connected to their Square point of sale. It is approachable and largely no-code, with a free tier, which is part of why so many non-technical owners use it, and also why accessibility is frequently overlooked. Square Online makes many structural decisions for you, which prevents some mistakes, but the choices that remain in the owner's hands are exactly the ones that cause WCAG failures: whether each product image has alt text, whether the chosen theme and Site Styles colors meet contrast minimums, whether 'Text' elements have been visually styled to look like headings instead of using real heading levels, and whether banner slideshows autoplay. The checkout and online-ordering flows, the cart drawer, the mobile menu, and coupon/announcement popups all introduce keyboard and screen-reader considerations that the default templates do not fully solve. On lower-tier plans you also have limited ability to add custom code, so the realistic fixes lean on platform settings, choosing accessible themes, and content discipline rather than rewriting markup. With the European Accessibility Act now enforceable for businesses selling to EU consumers and ADA Title III lawsuits in the US continuing to target small-business and restaurant sites, Square Online merchants should treat these items as part of setting up the store, not as an afterthought. This checklist walks through the failures we see most often and the specific Square Online steps to fix each one.
Common Accessibility Issues
Square Online product images, menu-item photos, and gallery images carry an alt-text field that is optional and frequently left blank, especially when items are imported in bulk or synced from the Square item library. When the field is empty, the rendered image either has empty alt or falls back to a filename, so blind and low-vision shoppers using a screen reader cannot tell what the product is. For an online store this directly blocks the core task of choosing and buying a product.
In the Square Online editor, open each product or item, find the image's alt-text / description field, and write a concise description of what the image shows (for example 'Margherita pizza with fresh basil', not 'IMG_2043'). For bulk-imported catalogs, work through the item list and add alt text to each image. Leave alt empty only for purely decorative images. Make adding alt text a step in your add-a-product routine so new items never ship without it.
<!-- Product image with empty alt -->
<img src=".../margherita.jpg" alt=""><!-- Alt text describing the product -->
<img src=".../margherita.jpg" alt="Margherita pizza with fresh basil and mozzarella">Square Online themes and the Site Styles color settings often pair light-gray text with white backgrounds, use pale button fills, or place white text on light brand colors, falling below the 4.5:1 ratio required for normal-size text (3:1 for large text and UI components). Sale badges, price tags, and 'Add to cart' buttons are common offenders. Because the editor previews on the theme's own background, owners rarely notice.
In Site Styles (or the theme editor), check body text on its background, button text on the button fill, link colors, and sale/badge colors against a contrast checker, and adjust the color values until they meet at least 4.5:1 for normal text and 3:1 for large text and UI components. Choose or customize a higher-contrast theme if the default palette cannot be made to pass. Re-check button hover/focus states and any text placed over banner images.
/* Light-gray price text on white */
color: #b0b0b0; /* ~2.3:1 on #fff - fails *//* Darkened price text */
color: #444444; /* ~9:1 on #fff - passes */Square Online's editor lets you drop Text/Title elements and make them large and bold so they look like section headings without being marked up as headings, and the drag-and-drop section layout can produce a heading order that does not match the visual structure. Screen reader users who navigate by headings then find no headings, or an order that jumps around, and cannot understand how the page is organized.
Use the editor's heading/title styles (Heading 1, Heading 2, and so on) for actual section titles rather than enlarging body text. Keep one main page heading and a logical order beneath it without skipping levels. When you rearrange sections, re-check that the heading order still reads top to bottom in a sensible hierarchy. Avoid using a heading style purely to make one line look bigger.
<!-- Body text enlarged to look like a heading -->
<p style="font-size:28px;font-weight:700">Our Menu</p><!-- Real heading element -->
<h2>Our Menu</h2>Checkout and Online-Ordering Form Fields Labelled by Placeholder; Errors Not Associated
WCAG 3.3.2Square Online's checkout, contact, and online-ordering forms sometimes present field names as placeholder text inside the inputs and surface validation errors in a way that is not programmatically tied to the specific field. Placeholder-only labels disappear when the shopper types, are read inconsistently by screen readers, and are typically low-contrast. Unassociated errors leave screen reader users unsure which field failed and why, which can stop a purchase from completing.
Where the builder lets you configure form fields (contact forms, custom order fields), enable persistent visible labels rather than relying on placeholders, and mark required fields in text. For the built-in checkout, keep the standard fields and avoid removing labels; if you add custom code on a plan that allows it, associate each error message with its field via aria-describedby and set aria-invalid on the failed field. Test the full checkout with the keyboard and a screen reader and confirm errors are announced and reachable.
<!-- Field name as placeholder, error not tied to field -->
<input type="tel" placeholder="Phone number">
<div class="form-error">Please enter a valid phone number.</div><label for="order-phone">Phone number <abbr title="required">*</abbr></label>
<input type="tel" id="order-phone" required aria-required="true"
aria-invalid="true" aria-describedby="order-phone-error">
<div id="order-phone-error" role="alert">Please enter a valid phone number.</div>On phones, Square Online collapses navigation into a hamburger menu. When it opens, keyboard focus may not move into the menu, focus may not be contained while it is open, the Escape key may not close it, and closing it may not return focus to the hamburger button. Keyboard and screen reader users can then end up navigating the page behind the menu or losing their place.
Confirm the hamburger button is a real button with an accessible name (for example 'Open menu') and exposes aria-expanded. When the menu opens, focus should move into it and stay within it until it closes, Escape should close it, and focus should return to the hamburger button. Square Online's default behavior varies by theme, so test on a real phone or with the browser narrowed and the keyboard only; if your plan allows custom code, add a snippet to handle focus movement and Escape. Prefer themes whose menus behave correctly out of the box.
<!-- Hamburger as a div, no name or state -->
<div class="nav-toggle"></div><button class="nav-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="main-nav">
<span aria-hidden="true"></span>
</button>
<nav id="main-nav">...</nav>Square Online banner and image-slideshow sections can auto-advance between slides without offering a user control to pause or stop the motion. Auto-moving content that runs longer than five seconds must be pausable, and moving content also disrupts screen reader users and people with attention-related or cognitive disabilities who cannot finish reading a slide before it changes.
In the slideshow/banner section settings, turn off automatic rotation, or set a single static banner image. If you keep a rotating banner, ensure there is a visible, keyboard-operable pause control and that the previous/next controls are reachable by Tab with accessible names. For most small-business homepages a single strong static banner communicates the offer better than a rotating one.
<!-- Auto-rotating banner, no pause control -->
<div class="slideshow" data-autoplay="true" data-interval="4000"> ... </div><!-- Autoplay off, or add a pause control -->
<div class="slideshow" data-autoplay="false"> ... </div>
<button type="button" aria-label="Pause slideshow">Pause</button>When a shopper adds an item, Square Online often slides in a cart drawer or opens a quick-view panel. These behave like modal dialogs but commonly do not move focus into the panel, do not trap focus while open, and do not return focus when closed, and they may not be dismissible with Escape. Keyboard and screen reader users can lose track of where they are mid-purchase.
Treat the cart drawer and quick-view as dialogs: move focus into the panel when it opens, keep focus within it until it closes, allow Escape to close it, and return focus to the control that opened it. Give the panel role="dialog" with aria-modal and an accessible name. The default theme markup may not do all of this; on plans that allow custom code, add a snippet to handle focus, and test the add-to-cart flow with the keyboard only.
<!-- Cart drawer shown but focus stays on the page behind it -->
<aside class="cart-drawer is-open"> ... </aside><aside class="cart-drawer is-open" role="dialog" aria-modal="true" aria-label="Your cart">
<button type="button" aria-label="Close cart">x</button>
...
</aside>
<!-- JS: move focus in on open, trap, Escape to close, restore focus on close -->Square Online announcement bars and promotional/coupon popups (newsletter or discount overlays) often appear on load. If a popup does not move focus to itself, cannot be closed with the keyboard, or its close control is not focusable, keyboard and screen reader users can be blocked from the page behind it. An announcement bar's dismiss control is frequently an icon with no accessible name.
Ensure any popup that appears on load can be closed from the keyboard: its close button must be focusable, operable with Enter/Space, and have an accessible name (for example 'Close offer'). For overlay popups, move focus into the dialog on open and return it on close. Give the announcement-bar dismiss control a real button with an aria-label. Prefer announcements that do not block the page on entry. On plans without custom code, choose popup options that include an accessible, labelled close control.
<!-- Icon-only close, not focusable, no name -->
<span class="announcement-close"></span><button type="button" class="announcement-close" aria-label="Close offer">x</button>Square Online-Specific Tips
- Add alt text as part of adding every product. Square Online's image alt field is optional and bulk imports leave it blank, so build the habit of writing a short description ('Iced oat latte in a clear cup') each time you create or edit an item.
- Fix color contrast in Site Styles, not page by page. Square Online applies your theme palette site-wide, so correcting body text, button, link, and badge colors once in Site Styles repairs the whole store, check each pairing with a contrast checker including hover/focus states.
- Use real heading styles for section titles instead of enlarging body text, and re-check heading order after you drag sections around. A logical heading structure is what lets screen reader and keyboard users skim your page.
- Turn off banner auto-rotation. A single strong static banner is more accessible and usually converts at least as well as a rotating one; if you keep rotation, make sure there is a visible, keyboard-operable pause control.
- Remember that lower-tier Square Online plans limit custom HTML/embed code. Where you cannot add code, lean on platform settings, choosing an accessible theme, and content discipline (alt text, headings, contrast, static banners) to cover most of the WCAG basics.
- Test the whole purchase path on a phone with the keyboard and a screen reader: open the menu, add to cart, open the cart drawer, and complete checkout. The product pages may pass while the cart, checkout, or mobile menu still trap focus or hide errors.
Recommended Tools
axe DevTools
Browser extension that scans the published Square Online store for WCAG violations with specific fixes. Run it across product pages, the cart drawer, and the checkout, not just the homepage.
WAVE by WebAIM
Visual evaluator that flags missing image alt text, contrast failures, empty buttons, and heading-order problems directly on the page, helpful for non-technical merchants to see exactly what to fix.
WebAIM Contrast Checker
Check Square Online Site Styles colors (body text, buttons, links, sale badges) against 4.5:1 and 3:1. Fixing colors in Site Styles corrects contrast across the entire store at once.
VoiceOver (iOS) / TalkBack (Android)
Because most Square Online traffic is mobile, test the store with the built-in mobile screen readers: walk the menu, product pages, cart, and checkout to verify alt text, labels, and focus handling on a real device.
Lighthouse (Chrome DevTools)
Built-in Chrome accessibility audit that catches common Square Online issues like low contrast and missing accessible names. Treat a high score as a starting point and combine it with manual keyboard and screen-reader testing.
Further Reading
Other CMS Checklists
Get our free accessibility toolkit
We're building a simple accessibility checker for non-developers. Join the waitlist for early access and a free EAA compliance checklist.
No spam. Unsubscribe anytime.