Shopify Accessibility Checklist for the Holiday Rush

A Shopify accessibility checklist for the holiday rush is a short, timed job, not a rebuild. Black Friday falls on Friday, November 27, 2026, and the pages that change most before that date break most often: new product photos, sale banners, a revised checkout, and a holiday popup. Run the checks below on those pages first, in that order, before you add more sale content.

Key takeaways

• Write alt text for every product photo that carries buying information, and leave a truly decorative image with an empty alt attribute.
• Put sale prices, dates and terms in real text, not only inside a banner image.
• Label every checkout field, describe every error in text, and move focus to the error a shopper must fix.
• Test the whole holiday path with a keyboard only, including the popup and the cart drawer, before the rush starts.

Shopify accessibility checklist: product photos and sale banners

Start with the catalog pages shoppers will open first. A product photo is not decoration when it tells a shopper the color, the material, the fit or a detail that changes the purchase. WCAG success criterion 1.1.1, Non-text Content, at Level A, calls for a text alternative that serves the same purpose. For a product photo, name what a buyer needs to decide, in plain words:

<img src="wool-scarf-navy.jpg" alt="Navy wool scarf with a fringed edge">

Do not copy the file name into the alt field, and do not start with "image of", since a screen reader already announces the element as an image. For a variant photo, name what changed: "Same scarf in charcoal" tells a shopper exactly what is different. For a lifestyle photo that shows texture, name that quality, since a shopper cannot feel the fabric through a screen.

Decorative images work the other way. A background swirl or divider that adds no buying information should carry an empty alt attribute, so assistive technology skips it:

<img src="divider.png" alt="">

An empty alt attribute is a deliberate choice. A missing alt attribute is not: when it is missing, some screen readers read the file name aloud.

Check variant selectors next. When a shopper picks a size or a color, name the choice in text beside the swatches. WCAG success criterion 1.3.1, Info and Relationships, at Level A, calls for information shown by presentation to be programmatically determined or available in text.

Sale prices, dates and terms in real text

Holiday banners cause a second, quieter problem. A banner image that carries the sale price, the end date and the terms says nothing to a screen reader unless the same words appear as text. W3C images guidance is direct on this point: when an image carries text, the text alternative should contain the same words. A longer offer should not live only in an image at all.

Put the offer in real text on the page: the price, the old price, the start and end dates, and any limit that changes the deal, such as a code or a minimum spend. Then use the banner image to draw the eye, not to carry the terms. This also helps when the image fails to load on a weak phone connection.

Check contrast on the new sale colors at the same time. WCAG success criterion 1.4.3, Contrast (Minimum), at Level AA, calls for a contrast ratio of at least 4.5:1 for text, with at least 3:1 for large text. Light red sale text on white and pale gray terms text are the usual holiday failures. Have the store owner approve any visible color change before it goes live, since a color change is a visible brand change, not a silent fix. For sale tables, see the accessible pricing table guide.

Checkout forms: labels, errors and focus

Checkout is where a small barrier becomes a lost sale, so give it the most careful pass. WCAG success criterion 3.3.2, Labels or Instructions, at Level A, calls for labels or instructions when content needs user input. Every checkout field needs a visible label tied to the field, not only placeholder text, which disappears when a shopper starts typing:

<label for="email">Email address</label>
<input type="email" id="email" name="email">

State the format you expect before the shopper types it, and mark required fields in text, not by color alone. When a form is submitted with an error, WCAG success criterion 3.3.1, Error Identification, at Level A, calls for the error to be identified and described in text. A red border alone is not a description. Write the error in words next to the field, say how to fix it, and move keyboard focus to the first error.

Test the checkout with a discount code applied and one field left blank on purpose. Watch for a code field that rejects a code with no written reason and a "place order" button that stays silent after a failed submit. Fix the words first.

Menus, popups and the keyboard path

Holiday popups break keyboard paths more than any other seasonal addition. A popup that opens on arrival or a chat widget that grabs focus can strand a keyboard user before they reach a product. WCAG success criterion 2.1.1, Keyboard, at Level A, calls for all function to be available from a keyboard interface. Test it by putting the mouse aside and pressing Tab through the holiday path: home page, collection page, product page, cart drawer, checkout.

On that pass, check that you can open and close the popup with the keyboard alone and that focus returns to where you were, that the focus outline stays visible at every step, and that menu items and filters work from the keyboard rather than only on hover. WCAG success criterion 2.4.7, Focus Visible, at Level AA, calls for a visible focus indicator.

If a popup cannot be closed from the keyboard, or if it traps focus with no way out, remove it for the rush or replace it with a plain banner link to the same offer.

Phones, zoom and small tap targets

Most holiday shopping happens on a phone, so run the last checks there. Zoom the page to 200 percent and read a product page and the cart. WCAG success criterion 1.4.4, Resize Text, at Level AA, calls for text to resize up to 200 percent without loss of content or function, except for captions and images of text. If zooming hides the price or the add to cart button, the layout needs work before the rush.

Check tap targets on the same pass. WCAG success criterion 2.5.8, Target Size (Minimum), at Level AA in WCAG 2.2, calls for a minimum target size of 24 by 24 CSS pixels, with stated exceptions. Small swatches and tiny close buttons on popups are the usual offenders on a phone. Keep the close button large and easy to hit.

Turn off autoplay on any holiday promo video, and add captions or a transcript for a video that carries offer terms. A video that starts on its own can drown out a screen reader. The accessible video embed guide covers frame titles, captions and transcripts.

How Axeazy helps with this exact issue

Axeazy lists alt text, form labels, link names, button names, iframe titles, keyboard tab order and heading structure among the 14 fix categories it works on. For a Shopify store, the scan works, and the fixes come as a guided, plain English checklist the merchant or their theme editor follows. Be clear about that limit: Shopify does not get an automatic pull request and does not get an automatic Liquid template fix. The checklist is the fix path, and the merchant or theme editor applies it by hand.

Run the scan early, so you get a dated list of findings to work through in order, starting with product photos and checkout. Read the honest scope on the capabilities page, and log each fix as you go. The accessibility remediation log guide shows the fields such a log needs.

Want a quick read on your own store? Run Axeazy's free 60 second scan . It needs no signup.

Last checked: October 28, 2026.

FAQ

Does a Shopify scan fix my theme for me?

No. The scan works on a Shopify store, and the fixes come as a guided checklist for the merchant or the theme editor to apply by hand. There is no automatic pull request and no automatic Liquid template fix for Shopify.

What alt text should a holiday sale banner carry?

If the banner image carries short text, repeat those words in the alt text. If the offer is longer, put the price, dates and terms in real text on the page.

How do I test a holiday popup with a keyboard?

Put the mouse aside, press Tab to the popup, check that you can close it from the keyboard, and check that focus returns to where you left it. If you cannot close it with the keyboard alone, replace it with a plain banner link to the same offer.

What should I check first if time is short before Black Friday?

Check product photos, sale banners and the checkout, in that order. Those three pages decide whether a shopper can learn what is for sale, learn the deal terms, and complete the purchase.

Sources

• W3C How to Meet WCAG (Quickref Reference), checked October 28, 2026
• W3C WAI Images Tutorial, checked October 28, 2026
• Shopify Image Alt Text: How to Write It, checked October 28, 2026