"i only speak liquid" #64: a11y - e-commerce for everyone

Hey everyone,

Sad news: This is the last edition of i_only_speak_liquid from Jude (member of Storetasker) 😢

But don’t worry, we’ll be back in 2 weeks with a new writer: Another dev from the Storetasker network 🫡

But I did want to briefly take this opportunity to thank Jude for his last 3 contributions to the newsletter. Re-sharing them here:

• "Micro Apps" using Metaobject and Serverless functions

• Alpine.js - The Secret Sauce for Interactivity

• Metaobject Update - Theme Settings New Superpower

If you’ve enjoyed his insights, connect with him here. 

Thanks Jude! 🙌

What I’ve been thinking about: a11y - e-commerce for everyone

Recently I was fortunate to have a in-depth session with a web accessibility expert. I’d always though my "add some ARIA labels and call it a day" approach was enough, but I was introduced to genuine, thoughtful accessibility that makes online shopping possible for everyone.

Here's a sobering thought: about 1 in 5 customers could have some form of disability. It's not just about compliance or doing the right thing (though those are important!) – it's also about business impact, there’s potentially a tonne of money being left on the table. Imagine having a physical store where 20% of customers couldn't get through the door. We'd fix that immediately, right? Yet in e-commerce, we often overlook these digital barriers.

Smart Keyboard Navigation

​​It's crucial to go beyond default tab behavior. Things like product cards should have clear focus states (using visual indicators like rings or outlines), a logical tab order that matches the visual layout, and proper screen reader support. Simple touches like adding "Price:" labels for screen readers and ensuring all product images have meaningful alt text make a huge difference. Using tabindex="0" makes sure interactive elements are properly accessible, while proper CSS classes for focus states (like focus rings) provide clear visual feedback for keyboard users.

Key points:

• Clear focus states that work with both mouse and keyboard

• Logical tab order that follows visual layout

• Screen reader announcements for important information

• No keyboard traps in modals or dropdowns

Thoughtful Colour Contrast

Check your colour scheme https://contrast-grid.eightshapes.com/ will generate a matrix with your colour scheme that will tell you what passes, is suitable for large text only, or does not pass. You might be surprised by the results.

Clear Error States

<div class="form-group" role="group" aria-labelledby="size-label">
  <label id="size-label" for="size-select">Select Size</label>
  <select 
    id="size-select" 
    name="size" 
    aria-invalid="{% if size_error %}true{% else %}false{% endif %}"
    aria-describedby="{% if size_error %}size-error{% endif %}"
  >
    <!-- options -->
  </select>
  {% if size_error %}
    <div id="size-error" class="error-message" role="alert">
      Please select a size before adding to cart
    </div>
  {% endif %}
</div>

Always test with a screen reader after implementing. The code for this form looks good, but when submitted with an error, a screen reader will repeat the error twice due to the unnecessary aria-describedby attribute. 

Quick Wins You Can Implement Today

<a href="#main-content" class="skip-link sr-only focus:not-sr-only">
  Skip to main content
</a>

Proper Headings: Maintain a logical heading structure (h1 → h2 → h3)

<h1>{{ collection.title }}</h1>
<div class="product-grid">
  {% for product in collection.products %}
    <h2 class="text-lg">{{ product.title }}</h2>
  {% endfor %}
</div>

Default alt text: We can’t always trust there will be alt text set, so use a sensible default

{% assign alt_text = product.featured_image.alt | default: product.title | escape %}
<img
  …
  alt="{{ alt_text }}"
/>

Meaningful Button/Link Text: No more “Click Here”

<!-- Instead of -->
<button>Click Here</button>
<!-- Use -->
<button>
  Add {{ product.title }} to Cart
  <span class="sr-only">{{ money_price }}</span>
</button>

Testing Makes Perfect

I've started using these tools in my development workflow:

• WAVE browser extension for quick audits

• Keyboard navigation testing (try using your store without a mouse!)

• Screen reader testing (VoiceOver on Mac, NVDA on Windows)

• Lighthouse accessibility scores as part of CI/CD or via a monitoring tool

Beyond the Basics

Some advanced practices I'm implementing:

• Reduced motion preferences for animations

• High contrast mode support

• Focus management in dynamic content

• ARIA live regions for cart updates

The Business Case

Proper accessibility has proven to:

• Increase mobile conversion rates

• Reduce cart abandonment

• Improve SEO performance

• Reduce support tickets

3 links you can’t miss:

• httpie - My favourite API testing client. Simple, has CLI, desktop and web apps, does not require an account.

• 1Password - The best password manager for developers. Effortlessly share passwords/passkeys, MFA codes, credentials, SSH Keys, I even store my environment variables in 1Password and generate the .env files with the CLI tool.

• JavaScript Bookmarklets for Accessibility Testing - Super handy bookmarklets for A11Y Testing. Easily highlight roles, states, and properties of accessibility elements on the page.

1 app I like:

Accessibility Spark ADA & WCAG

I’ve found this app super useful when needing to make bulk changes to store data. I’ve used it to set metafields based on product type, update price comparison data using a formula and standardise SKUs among other things. Being able to export the data, manipulate it with a script, and then re-upload it makes these kinds of operations on large product sets really painless, and the built-in backup has saved me on a more than one occasion.

One learning as a freelancer:

Following with the accessibility theme, I’m highlighting Accessibility Spark this week. While there are many accessibility testing tools available, this Shopify app has a practical approach to making stores WCAG compliant. Beyond just flagging issues, it provides actionable fixes with code snippets – a huge time-saver.

What sets it apart is how well it fits into a development workflow: real-time monitoring catches issues before they hit production, automated fixes handle common problems (like missing ARIA labels and colour contrast issues), and detailed reports help communicate accessibility improvements to clients. The time saved on manual testing alone makes it worth the investment.

One learning as a freelancer: The Art of Saying No

I had to say a difficult no this week. There was an exciting project on the table, the clients seemed great, but I just didn’t have the capacity to commit to the project. As freelancers, we often start with a scarcity mindset. Every project feels like it could be our last, every client feels irreplaceable, and saying “no” feels like career suicide. But saying “yes” to everything can come at a great cost. You end up doing things you never wanted to do in the first place, which can lead to resentment, burnout and ultimately worsen your relationships far more than saying “no” would have. You can’t just scream “NOOOO” at everything you don’t want to do though, saying “no” is a skill that must be developed.

When to Say No

There are a few key questions you can ask to help

• Will this project help me grow in the direction I want?

• Does the budget reflect the value I provide?

• Do I have the time to deliver excellence?

• Is this client someone I want to work with long-term?

Derek Sivers has a great concept of “Hell yeah or no”. There’ll usually be a gut feeling, and if saying “yes” causes any feelings of dread, stress, anxiety, listen to that and decline. Never settle for a “maybe”. Maybe is just a no you’re too scared to say out loud. 

How to say No

• Keep responses firm but gentle - "I'm afraid I can't" rather than a blunt "no"

• Distinguish between non-negotiable ("hard no") and circumstantial ("soft no") refusals

• Don't over-explain - avoid the JADE trap (Justify, Argue, Defend, Explain)

• Use clear but considerate phrases like:

  • “With my current workload, I can't start this until [date]”

  • “I'm not taking on new clients currently, but I'll reach out when I have some capacity”

  • “This timeline wouldn't allow me to deliver the quality you deserve”

• Maintain positive body language and professionalism when delivering in person

Learning when and how to say no can be really difficult, but it is a wonderful act of self-care. Develop this skill to regain time, energy and peace of mind.

Jude