DEV Community: Dave

AI is becoming a new sales channel. Here's how to make sure your products show up.

Dave — Wed, 14 Jan 2026 11:29:15 +0000

I'm not particularly an "AI will fix everything" person - but if you follow any AI news it's becoming increasingly clear that the largest technology platforms are pushing hard to turn AI into a place where shopping happens right in their apps, not just where people go to research or 'chat'.

And so if you're responsible for growth, revenue, or digital performance across your online store, then AI-driven shopping is an important topic in 2026, because when buying behaviour changes, the rules for visibility change with it.

In this article, we'll look at future predictions on how AI-driven shopping is starting to take shape, why accessibility is set to matter far beyond compliance, and how to make sure your products remain visible as buying behaviour continues to evolve.

The shift towards AI-driven shopping that's already underway

Over the past year, we've seen a clear pattern emerge: AI systems are moving beyond recommendations and into execution.

This idea is often called agentic commerce, which simply means AI completing tasks on someone's behalf. Not just "show me the options", but "compare these, pick the best one, and buy it".

Google, Shopify, Microsoft, OpenAI, and Amazon are all experimenting with versions of this. Google and Shopify recently announced the Universal Commerce Protocol (UCP) - an open standard designed to let AI agents interact with your own online store and the products you're selling across the entire shopping journey, from discovery through to checkout and post-purchase support.

The important thing to note here isn't predicting the exact interface your customers will use in five years' time. It's recognising that AI is becoming a new sales channel, just like search engines and marketplaces did before it.

And early adopters almost always win.

The accessibility win hiding in plain sight

There's an important human dimension to this.

Many disabled people are already using AI tools every day to help their daily life. People who rely on keyboards, voice input, screen readers, or other assistive technologies. AI can explain in plain English, summarise complexity, and bypass frustrating interfaces.

So it's not a stretch to imagine the same pattern applying to shopping.

Why would anyone manually visit 20 different websites - many of which are slow, confusing, or inaccessible - when you can ask an AI for recommendations and buy from there? And for a lot of shoppers, that would be a genuine improvement.

That shift alone is likely to make online shopping more inclusive. And that's a good thing.

But it also introduces a competitive reality:

AI agents can only recommend and sell products from stores they can reliably understand.

If you weren't already convinced that an accessible site is beneficial for your customers, then this is where accessibility stops being a nice-to-have and starts becoming commercially important.

Amazon has already been testing this - and it shows the risk

Amazon's recent “Buy For Me” experiment is a useful early signal - and the reaction from independent merchants shows what can go horribly wrong when agents act without enough certainty.

A recent to report in the Financial Times explained how independent retailers discovered their products being listed and sold through Amazon's AI-driven experience without consent, sometimes with incorrect information or stock availability. Modern Retail also reported that merchants were unhappy with how Amazon positioned itself between them and their customers, including the use of Amazon-controlled relay email addresses that interfered with customer data and communication.

You can make moral arguments about this, but there's also a practical one: if an agent can't reliably use your site, someone else will try to "standardise" the experience for you.

While it's not entirely clear what went wrong with some of these stores, when a platform cannot reliably understand or transact on a merchant's site, it has an incentive to proxy the experience, standardise it, and pull it into its own system.

That standardisation often strips out nuance, brand control, and direct customer relationships.

The mere existence of opt-out mechanisms tells us something important: merchants are going to care, increasingly, about how AI agents interact with their stores - and on what terms.

Where AI shopping agents commonly fail on product pages

Here's the reassuring part if you already care about customer experience.

AI agents fail in many of the same places humans fail.

On product pages, the most common problem areas seem to be product variants that change visually but not programmatically, stock messages that aren't clearly exposed, price changes that only appear after interaction, add-to-cart actions with no clear success or failure signal, and errors communicated only through colour, animation, or layout.

Without a deterministic confirmation or error state, agents cannot know whether the action succeeded, whether retry logic is needed, or whether the flow should continue to checkout.

These are exactly the kinds of issues that frustrate customers who browse without a mouse, rely on keyboards, or use assistive technologies.

Humans can adapt. But AI agents often don't. They skip, hallucinate or produce unreliable results.

What decides whether your products get shown by AI agents

As AI becomes a sales channel, the primary optimisation goal shifts.

It's no longer just about relevance or brand recognition. It's about certainty.

AI agents are optimised for clear product identity, predictable interactions, and reliable outcomes. If a product page introduces ambiguity, the safest option for an agent is simply not to recommend it.

That's why I expect we'll start hearing terms like “eligible listings”, “supported checkout”, “reliable integrations”, or “agent compatible”. These won't be framed as accessibility requirements. They'll be framed as platform quality standards.

But under the hood, these map very closely to the same foundational patterns accessibility specialists have been fixing for years.

Why?

Because accessibility is the cheapest way to make complex interfaces machine-readable at scale.

Why accessibility helps AI agents understand your store

When business owners hear about "accessibility", they often think about compliance and regulations.

That's not the useful mental model here.

Accessibility, at its core, is about making sure names are explicit, roles are clear, values and states are exposed, and errors explain what happened and what to do next.

Those qualities make interfaces easier for humans with access needs. They also make interfaces easier for machines to reason about.

That's why I expect AI commerce systems to treat accessibility implicitly as a quality signal, alongside things like data consistency, fulfilment reliability, returns behaviour, and customer satisfaction.

Not because AI systems particularly care about ethics - but because accessible systems are easier to automate, test, and scale.

A note on commerce standards and AI protocols

You may have seen recent announcements from Google and Shopify about the Universal Commerce Protocol (UCP) proposal.

While it's not confirmed as a standard yet, UCP is an open standard designed to give AI agents a shared language for commerce - covering discovery, buying, and post-purchase support - and to work across platforms and alongside other protocols like Agent2Agent (A2A), Agent Payments Protocol (AP2), and Model Context Protocol (MCP).

It's an important signal that the ecosystem is aligning around the need for structured, reliable commerce interactions.

But you don't need to bet on UCP "winning", or even on which platform ends up dominating AI-driven shopping.

Improving accessibility on your product pages makes your store easier to understand for any agent, on any surface, using any protocol.

The questions your product pages must answer

If AI is becoming a new sales channel, here's the simplest way I'd assess the readiness of your products - and it's something you can sanity-check yourself without new tools, new vendors, or a six-month project.

Can your product pages clearly answer these questions - for someone who isn't using a mouse, and for a system that can't "see" your design - without guesswork?

What exactly is this product?
What options or variants can I choose?
What changed when I selected that option?
Is it in stock right now?
What happens when I add it to cart?
Did that action succeed or fail?
If it failed, what do I do next?

This often breaks down when key choices only appear after a mouse click, or when product options are built in a way that assumes visual interaction. If the product doesn't fully exist without clicking around, the options are effectively hidden, and both keyboard users and AI agents are forced to guess, or to give up.

If the answers rely on visuals alone, animations, or assumptions about how someone is browsing, both customers and AI agents will struggle.

If the answers are explicit, predictable, and exposed in the page itself, you've removed a whole category of friction - for people and for machines.

I regularly see these failures in areas like product options and variant selectors, as shown in my review of accessible product options and my breakdown of accessible custom dropdowns. It's also why I've written before about how Shopify checkout accessibility is largely solved, while product pages remain the fragile part of the flow in this article on checkout vs product pages.

Being easy to understand is how your store stays visible as AI shopping grows

AI shopping isn't a distant prediction anymore. It's the clear direction of travel.

The stores that win won't be the loudest or the most experimental. They'll be the easiest to understand - for people and for machines.

If your store works well for customers who browse without a mouse, use a keyboard, or rely on assistive technologies, it's also far more likely to work well for AI agents deciding what to recommend and what to skip.

That's not a compliance argument.

It's a commercial one.

Early adopters get the head start. Start by making your product pages unambiguous, then keep iterating as the channel matures.

How to write good alt text for your product images

Dave — Thu, 02 Oct 2025 12:50:58 +0000

Imagine scrolling through a website, but you can't see the images.

How would you know what they contain?

This is the daily reality for millions of people who use screen readers to navigate the web. Alt text (short for alternative text) serves as their eyes, describing what's in an image when they can't see it.

Done well, alt text is powerful. It makes sure no one misses out because of an image they couldn’t see.

The good news? Writing good alt text isn’t that complicated. It just takes a little thought and a clear focus on what your customer needs. And beyond accessibility, well-crafted alt text also supports SEO, helps when images fail to load, and provides context in text-only environments.

In this guide, you’ll learn how to create alt text that works for everyone - clear, concise, and effective.

What is alt text and why does it matter?

Alt text is the written description of an image that sits in your website’s code. If the image doesn’t load, or if someone is using a screen reader, the alt text is what gets read aloud instead.

Without it, all your customer hears is “image” - or worse, the filename - which is as unhelpful as it sounds. With it, they get the same information as everyone else.

That’s a simple product photo described in a way that actually helps the customer decide if it’s what they want.

How to write good alt text

Good alt text follows a few simple principles. Think of it as describing what's in the image, to someone who it's looking at it.

What would be useful and helpful?

1) Be descriptive

Alt text should be as specific and accurate as possible. The goal is to give a clear idea of what the image shows and why it’s there.

Tip for SEO: It’s fine to include a keyword if it naturally fits the description, but your priority is always to describe the image truthfully.

2) Keep it concise

Good alt text is usually short - a few words to one sentence.

Focus on the essentials. If your image needs a lot of explanation (like a chart or infographic), provide a short summary in the alt and a fuller description in the page text.

3) Skip "picture of..."

You don’t need to start with "picture of" or "image of". Screen readers already announce that it’s an image. Just describe what matters.

The only time you might name the type of image is if it adds meaning. For example, on an art site: "Painting of sunflowers by Vincent van Gogh" makes sense, because the format is important.

But on a product page, "image of a blue cotton shirt" is unnecessary - just write "Blue cotton shirt with button-down collar".

4) Match the context

Alt text isn’t just about describing what's visible. It should also reflect the purpose of the image on the page.

A photo of a bag of coffee beans could be described in many ways, but on a checkout page you’d want: "250g bag of freshly roasted Arabica beans, ground for espresso".

That description helps a customer confirm exactly what they’re buying.

Context matters too

What is the context of the image? Am I trying to show a blue shirt, a historical tour, or a modelling agency?

The "correct" alt text depends on the purpose of the image on the page. In this photo by Hans Town Kun are we:

Selling the shirt:
alt="Model wearing a navy button-up shirt and ripped jeans, posing by a stone wall" would work, because the focus shifts to the clothing. That’s what the customer needs to know.
General description (on a personal bio page):
alt="Young man in a navy shirt leaning against a wooden railing in front of a stone wall" would work. Focus on describing the person so visitors know who they’re reading about.
On a travel blog:
alt="Person standing in front of historic stone arches". Here the building is the important detail, not the person’s outfit.

Here’s a lifestyle photo where the story depends on context. In this photo by Efrem Efre, we could feasibly use the following alt text:

Selling the jacket:
alt="Model is wearing the orange jacket in medium, high-fiving a dog on the beach" would work, because the focus shifts to the clothing. That’s what the customer needs to know.
General description (blog post about dogs):
alt="Person and dog giving each other a high five on a sandy beach" would work because the focus is on the human connection and personality, giving visitors a sense of who they are.
On a travel blog:
alt="Person and dog on a sandy beach by the water with forest in the background". This focuses on the location and atmosphere, since the image supports a story about place.

Final tips for writing alt text that works

Good alt text isn’t about ticking a compliance box or trying to please search engines. It’s about making sure no customer is left out, no matter how they browse your site.

You'll do well if you just remember these 3 golden rules:

Be clear - say what the image shows.
Be concise - a short sentence is usually enough.
Match the context - write what’s most useful for the page it’s on.

Try this today: pick three images on your site and rewrite the alt text using these rules. You’ll see how quickly it becomes easier once you focus on purpose, not pixels.

Done well, alt text is invisible but powerful. It helps your customers, supports your SEO, and builds trust in your brand. Every image is a chance to welcome someone in, or shut them out.

Make it welcoming.

Shopify checkout is highly accessible - but your product pages might be letting you down

Dave — Thu, 11 Sep 2025 17:59:56 +0000

Shopify has put real effort into making its checkout process accessible, meaning customers who use a keyboard or screen reader can complete their purchase without barriers. For you, that’s great news - it reduces abandoned carts and protects revenue.

But here’s the problem: the checkout is only the final step. If customers can’t navigate your product pages properly, they’ll never even get to that accessible checkout.

On peak shopping days like Black Friday and Cyber Monday, accessible journeys give your business a measurable sales advantage over your inaccessible competitors. But that advantage isn’t just seasonal - it applies every day of the year

TL;DR for business leaders

Problem: If customers can’t use your product pages, they never reach Shopify’s accessible checkout.
Impact: You’re excluding up to 20% of your potential customers, and your marketing spend is wasted.
Fix: Apply six simple changes to your product pages (below).
Result: More customers add items to their basket and complete their purchase.

Why Shopify checkout stands out

Shopify has publicly committed to following WCAG 2.2 AA — the internationally recognised Accessibility standard for inclusivity. This means their checkout is regularly tested so that people with different access needs can use it.

They also run regular usability testing with people who rely on assistive technology, such as screen readers.

So the last step of your sales funnel is already strong. The question is: how do you make sure your customers can actually reach it?

Six ways to make your product pages accessible

Shopify gives you strong foundations, but your product pages are still your responsibility. Shopify even publish their own accessibility best practices - and here are six practical improvements you can apply right now to help more people buy from you:

1. Make product options easy to use

Customers need to be able to pick the right size, colour, or material - whether they’re using a mouse, a keyboard, or a screen reader. If those options don’t work for everyone, some customers can’t buy at all.

Example: On some sites, option buttons are built using non-interactive code - such as a <div> element styled to look clickable. These don’t behave like real form controls, so they’re invisible to screen readers and often unreachable by keyboard. In practice, this means customers can’t select a size, change quantity, or even add a product to their basket.

2. Add meaningful image descriptions

Photos sell your products. But if someone can’t see the image clearly, they rely on a short written description (known as alt text). Instead of "Product image", say "Blue waterproof jacket with hood". Clear descriptions help customers make confident buying decisions.

Example: Without alt text, some screen readers fall back to reading out the file name, like "IMG_1234.jpg". That’s meaningless for customers and doesn’t help them decide whether to buy.

3. Announce changes clearly

When a customer chooses a different option, the price or stock level might change. Make sure that update is obvious to everyone - including those using screen reader software. If changes aren’t announced, people may think nothing has happened and leave without buying.

Example: On some sites, changing an option updates the price - but no announcement is made for screen reader users. Customers think the price hasn’t changed until checkout, which causes confusion and drop-offs.

4. Label every field and every button

From quantity boxes to "Add to basket", labels matter. They tell customers what each control does, and for people using assistive technology they're the only way to understand and use those controls. Without clear labels, some customers simply can’t complete their order.

Example: A quantity box without a label might be announced by a screen reader as "edit text" with no context. The customer has no way of knowing it controls quantity, so they can’t order more than one item and may abandon the purchase.

5. Make sure focus is always visible

When customers navigate with a keyboard, they need to see where they are on the page. A clear focus highlight (often a box or underline) shows which button or link is currently active. Without it, navigating is guesswork.

Example: On some sites, pressing the tab key moves through the page but there’s no visible outline showing where you are. Customers quickly lose track, miss important actions, and may abandon the site altogether.

6. Provide clear page structure

Customers should be able to scan your product page quickly and find the information that matters most - like product details, price, and delivery. Use clear headings and consider adding a “Skip to product information” link to help people get there faster.

Example: On many product pages, the actual product information is buried past menus, banners and product image. For customers using screen readers, it means wading through extras before reaching the product description - many never get that far.

Quick self-check

Open one of your product pages right now and ask yourself:

Can I choose a size or colour using only the keyboard?
Do all product images have meaningful descriptions?
If I change a product option, is the new price or stock level clear?
Are all fields and buttons clearly labelled?
Are buttons and swatches large enough to tap easily on mobile?
Can I quickly scan the page and jump to the product details?

If the answer is “no” to any of these, you’re losing customers before they even reach Shopify’s excellent checkout.

Why this matters for your sales

When customers can use your product pages without barriers, more of them reach Shopify’s accessible checkout - and more of them complete their order.

Accessible product pages don’t just reduce drop-offs. They increase conversions, make your marketing spend more effective, and open the door to customers who would otherwise be excluded.

Accessibility isn’t just the right thing to do. It’s smart business. When more people can buy, more people do buy.

The sales advantage of accessibility

Shopify has already set the standard with its accessible checkout. Once people reach it, Shopify claim their checkout converts 15% better on average than other platforms - so you’re in a strong position.

But that advantage is wasted if customers can’t use your product pages to get there.

Make those pages accessible, and you unlock the full value of Shopify’s checkout: fewer drop-offs, more conversions, and access to the 20% of customers too often excluded online.

Accessibility isn’t just compliance. It’s a growth strategy.

Black Friday and Cyber Monday: why accessibility could be your biggest sales advantage

Dave — Wed, 27 Aug 2025 20:05:59 +0000

Black Friday and Cyber Monday (BFCM) are make-or-break moments for many businesses. In 2024, UK shoppers spent a whopping £3.63 billion online across Black Friday and Cyber Monday. Globally, sales run into the trillions.

But here's a scary fact: if your website isn’t accessible, a significant chunk of that spend will never reach you, and it’ll go to your competitors instead.

Research shows UK businesses collectively lose £17.1 billion a year because shoppers using assistive technology abandon websites that don’t work for them. During BFCM alone, that translates into nearly £446 million in lost revenue.

That’s almost half a billion pounds walking out the door in one weekend.

How much revenue can your business lose on Black Friday and Cyber Monday?

It’s easy to dismiss numbers in the billions as "someone else’s problem". But let’s zoom in.

Black Friday & Cyber Monday can account for up to 15% of annual online sales, with some businesses reporting that over 50% of their yearly sales happen across BFCM and the holiday period. That means that if your business turns over £20 million a year, you could realistically be taking £3-£4 million in sales over just one long weekend.

Now imagine your product pages are inaccessible to just 2% of your customers. That’s a £60,000 - £80,000 loss in a single weekend. And that’s a conservative calculation: research shows 10–15% of customers often click away because of accessibility barriers.

At that level, you could be looking at £300,000–£600,000 in lost revenue - all within 48 hours.

And the damage doesn’t stop there. Accessibility problems don’t just cost you one sale, they cost you repeat sales, loyalty, and lifetime value.

Why customers with access needs stay loyal to accessible brands

Disabled shoppers are among the most loyal customers online - provided you serve them well. The research is crystal clear:

83% of shoppers with access needs limit their purchases to websites they know are accessible.
86% say they would spend more if sites were easier to use.
11% have paid more on an accessible site rather than buy cheaper elsewhere.

Accessibility doesn’t just protect your BFCM sales, it earns you loyalty year-round.

And these customers are "power shoppers" too. 50% of consumers who use assistive technology shop online weekly (vs 22% of the general population). They often consolidate purchases with brands they trust. Once you win them, they stay. Once you lose them, they rarely come back.

It’s not just disabled customers either.

Older shoppers - who hold a disproportionate amount of disposable income - increasingly rely on larger text, clear navigation, and voice input. If your site isn’t accessible, you’re turning away your wealthiest demographic too.

E-commerce sales are doubling - and accessibility will decide who wins

Global e-commerce isn’t slowing down. According to Morgan Stanley research, the e-commerce market is expected to nearly double by 2026. By that measure, 27% of all retail sales will be online purchases.

The growth of e-commerce is proof that the way people shop has fundamentally changed. Without improved accessibility, customers with access needs risk being left behind. These are the very shoppers who stand to benefit most from the convenience of online retail - but unless websites work for them, they’re excluded from what is rapidly becoming everyday life.

And for businesses, the upside is clear: a Forrester study found that every $1 invested in accessibility can yield up to $100 in benefits, from increased revenue to reduced support costs and stronger brand reputation (TestParty via Forrester’s findings).

Accessibility isn’t just a moral or compliance box to tick, it’s a smart business choice with measurable returns.

5 simple ways to make the most of Black Friday and Cyber Monday with accessibility checks

The good news is that you don’t need to be an accessibility expert to spot the biggest issues before November. A simple round of testing can reveal whether customers will be able to buy during your busiest sales weekend.

Here’s a quick checklist you can try today:

Do a no-mouse test. Put your mouse aside and try to complete a purchase with just the keyboard (Tab, Shift+Tab, Enter, Space). If you can’t, neither can your customers.
Check your discount code box. Can a screen reader pick up its label? If not, customers won’t be able to claim your BFCM offers.
Open and close your popups. Do they trap you? Can you close them with Escape? Many shoppers will abandon your site if a promo banner blocks them.
Resize text. Zoom your browser to 200%. Does the layout still work? If it breaks, so will the sale.
Run a free screen reader test. VoiceOver (on iPhone/Mac) or NVDA (on Windows) are enough to catch serious issues. Try searching, adding to basket, and checking out.

These five steps won’t uncover everything, but they’ll give you a good start to show you whether customers with access needs can complete the journey.

Accessible websites convert more sales on Black Friday and Cyber Monday

Every year, businesses pour money into advertising, discounts, and promotions for Black Friday and Cyber Monday. But if your website isn’t accessible, a portion of that spend goes straight to your competitors - because customers arrive, try to buy, and then leave.

The question isn’t whether customers with access needs will shop during Black Friday and Cyber Monday. They will. The question is: will they shop with you, or with someone else?

Accessibility isn’t just about preventing lost revenue. It’s one of the most effective ways to increase your Black Friday and Cyber Monday sales. If you want to make the most of the biggest shopping weekend of the year, make sure every customer can complete their purchase.

Start fixing accessibility today - it could be the difference between record sales or record losses this Black Friday and Cyber Monday.

WCAG Colour Contrast: What does the 4.5:1 ratio actually mean?

Dave — Sat, 08 Feb 2025 19:10:18 +0000

Anyone who has worked with web accessibility will likely be familiar with the WCAG Colour Contrast Requirements. These guidelines specify that text (and images of text) must have a contrast ratio of at least 4.5:1.

Read this article, with an interactive colourblindess simulator at https://davedavies.dev/posts/wcag-colour-contrast-explained/

But have you ever wondered what that 4.5:1 ratio actually means, and where it comes from?

First, what exactly is colour contrast?

Colour contrast refers to the perceptible difference between text and its background. This contrast is crucial for readability, affecting both legibility and accessibility for everyone - especially those with vision impairments. It plays a key role in how easily users can engage with your content.

A colour contrast ratio of 4.5:1 means that the lighter colour is 4.5 times brighter than the darker colour. This isn't arbitrary - this ratio is based on how our eyes perceive different levels of brightness and has been meticulously determined to ensure text legibility and overall visual accessibility for users with varying vision abilities, including colour blindness.

Note that larger text (>18pt) or bolder text (>14pt), requires a slightly lower ratio of 3:1. This is because of its inherent ease of readability. The technical term for this is "relative luminance" - how bright each colour appears to the human eye.")

Different types of colour vision

When discussing colour contrast, it's important to understand that people perceive colours differently. Colour blindness, or Colour Vision Deficiency (CVD), affects approximately 1 in 12 men and 1 in 200 women worldwide. The three most common types are:

Protanopia: Difficulty distinguishing between red and green colour, with reds appearing darker
Deuteranopia: Similar to protanopia, but without the darkening effect on reds
Tritanopia: Difficulty distinguishing between blue and yellow colour

You might notice that there's not much difference between protanopia and deuteranopia in the demonstration above. This isn't a mistake - both deficiencies are forms of red-green colour blindness that affect our eyes in remarkably similar ways. The key difference? Protanopia affects the red-sensitive cone cells in our retinas, while deuteranopia affects the green-sensitive ones. Because these cone cells work together to help us distinguish colours, the end result looks quite similar, though protanopia tends to make reds appear slightly darker.

Tritanopia, on the other hand, looks noticeably different because it affects our blue-sensitive cone cells, which operate more independently from the red and green receptors. This is why the tritanopia simulation shows such a distinct shift in how blues and yellows are perceived.

This visualisation helps explain why colour alone should never be used to convey information - what might be an obvious colour difference to someone with typical colour vision could be indistinguishable to someone with CVD. This is why maintaining proper contrast ratios is crucial for accessibility, regardless of how users perceive colour.

What the heck is relative luminance?

Relative luminance is calculated using Red, Green, and Blue (RGB) values weighted to match how bright a colour appears to the human eye. Red contributes 30%, Green contributes 59%, while Blue contributes just 11%.

Understanding this concept helps to explain why some colour combinations are easier to read. It also explains why pure blue (0,0,255) appears much darker than pure green (0,255,0) to our eyes, despite both being at maximum value, since blue only contributes 11% to our perceived brightness, while green contributes 59% - that’s a dramatic difference in luminance.

Who decided that a 4.5:1 or 3:1 ratio was needed?

This goes back to the early 1990s, when accessibility research - led by groups like the Trace R&D Center - laid the foundation for modern contrast standards. Researchers investigated how different luminance levels affect readability, leading to a framework that established minimum contrast ratios for effective communication. The specific ratios emerged from rigorous studies of reading performance and informed the development of the Web Content Accessibility Guidelines (WCAG)

And bear in mind that these colour contrast guidelines don’t just affect those with poor eyesight. I’m certain we’ve all struggled to read text in bright sunlight or on badly designed websites. Studies consistently show that everyone benefits from a minimum of a 4.5:1 colour contrast ratio when reading standard-sized text.

Why these numbers matter in practice

Understanding the science behind contrast ratios, relative luminance, and colour vision deficiencies might seem academic, but it all comes together in practical application. When we combine our knowledge of how:

Different cone cells interpret colours (as we saw in the colour blindness demonstration)
Relative luminance affects perceived brightness (like why blue appears darker than green)
Contrast ratios ensure readability (the 4.5:1 standard)

We can make better design decisions that work for everyone. For instance, that bright yellow text that passes contrast requirements on a white background? It might be technically compliant at 4.5:1, but for someone with tritanopia, it could be nearly invisible. Or that subtle grey text that looks "sleek" on your monitor might become completely unreadable on a phone in sunlight.

This is why WCAG guidelines aren't just arbitrary numbers - they're carefully calculated standards that take into account the full spectrum of human vision, from typical colour vision to various types of CVD, from perfect lighting conditions to real-world scenarios. When we follow these guidelines, we're not just ticking boxes for accessibility compliance - we're creating interfaces that work better for everyone, in every situation.

Tools for checking colour contrast

Setting minimum colour contrast isn’t incredibly straightforwards, but with over 86% of the most common accessibility failures being down to colour contrast - let’s see how to fix it.

Colour contrast tools

My go-to tool is the fantastically designed colourcontrast.cc. There’s loads of tools which do this, and you can even just make your own simple JavaScript tool if you wanted - but I love the design of this site, and there’s zero room for ambiguity.

Preparing your business for the European Accessibility Act

Dave — Tue, 31 Dec 2024 08:54:38 +0000

The European Accessibility Act (EAA) is a significant step forward in ensuring equal access to goods and services for everyone, particularly those with disabilities. With the compliance deadline of June 28, 2025 fast approaching accessibility is no longer optional — it’s a legal requirement, and it’s time for businesses to evaluate their readiness.

This guide is designed to help business owners and stakeholders understand the key aspects of the EAA, how it affects your organisation, and how to achieve compliance effectively. We’ll also explore how compliance can benefit your business in surprising ways.

This guide is not legal advice. Always consult with your legal team about how the EAA applies to your specific business.

What is the European Accessibility Act?

Adopted in 2019 and transposed into national laws by 2022, the European Accessibility Act aims to harmonise accessibility requirements across the EU. It removes barriers caused by inconsistent rules in member states, making products and services more accessible to people with disabilities.

Who does the EAA apply to?

The EAA applies to any business selling products or services within the EU, regardless of location.

Key applicability criteria include:

Business size: Organisations with 10 or fewer employees or an annual turnover of less than €2 million are exempt.

Product and Service Scope: The EAA covers:

Websites, e-commerce platforms, and mobile apps.
Banking services, ATMs, and self-service kiosks.
Computers, smartphones, and other consumer technology.
Digital transportation services, such as travel booking apps.
E-books and media streaming platforms.

At Tiny Octopus, as digital accessibility experts - that's what we're going to be focussing on.

Even non-EU businesses must comply if they serve EU markets. For instance, a U.S.-based SaaS provider offering services to EU residents must meet EAA standards.

How to Prepare for EAA Compliance in 5 Steps

To comply with the EAA, businesses must take a proactive approach to ensure their products, services, and processes meet accessibility requirements. Here’s how to get started:

1. Assess your current accessibility

Start with an audit of your products and services, including websites and apps. Test for compatibility with assistive technologies using tools like Google Lighthouse. However, automated tools alone are insufficient—manual testing is crucial for finding nuanced issues.

Follow the EN 301 549 standard, which incorporates WCAG 2.1 AA guidelines for web content, software, and hardware accessibility.

2. Publish an Accessibility Statement

Create an accessibility statement that includes:

How your products and services meet accessibility standards.
Measures taken to improve accessibility.
Contact details for accessibility-related queries.
A process for filing complaints with enforcement authorities.

This statement should be prominently displayed, such as on your website’s footer or help page.

3. Offer Accessibility Training for Employees

Compliance isn’t just about products; it’s about culture. Train your team to prioritise accessibility:

Train developers, designers, and marketers on WCAG principles and usability.
Equip support teams to handle accessibility queries effectively.

4. Monitor and Maintain Accessibility

Accessibility is an ongoing process. Regularly audit your products to address new barriers as technologies evolve. Use automated testing tools for routine checks, and complement them with manual reviews for comprehensive coverage.

5. Plan Proactively for the 2025 Deadline

Start accessibility planning now. While some businesses may have years to prepare, early action positions you ahead of competitors and avoids last-minute compliance challenges.

What happens if you don’t comply with the EAA?

Failing to meet EAA requirements can lead to significant consequences, and enforcement will be carried out by individual EU member states. Here’s what’s at stake:

Fines: Penalties may reach up to €3 million, depending on the country and severity of the violation.
Restricted market access: Non-compliant products or services may be removed from the market entirely, resulting in loss of revenue and reputation.
Legally enforced changes: Court orders may mandate changes to your operations, potentially incurring additional costs and downtime.

The repetitional harm of being labeled as non-inclusive can’t be understated. Today’s customers value brands that demonstrate empathy and inclusivity.

Why accessibility compliance benefits everyone

Beyond avoiding legal penalties, complying with the EAA is an opportunity for growth. Making accessibility a priority improves your offerings and expands your reach. Here's how it benefits your business:

Broader Customer Base
By improving accessibility, your products and services become more usable for the over 87 million people with disabilities in the EU. But it doesn’t stop there—accessible design also benefits elderly users, people with temporary impairments, and anyone navigating your offerings in challenging conditions (e.g., low light or noisy environments).
Enhanced Brand Reputation
Inclusive businesses are viewed more favourably by customers, investors, and partners. Demonstrating a commitment to accessibility can strengthen relationships and improve customer loyalty.
Improved User Experience
Accessibility measures, like clear navigation and readable fonts, often overlap with usability best practices. The result? A better overall experience for all users, boosting engagement and customer satisfaction.
Higher Revenue
Research shows that inclusivity boosts profitability. A 2022 study revealed that accessible websites see higher conversion rates and lower bounce rates, directly impacting your bottom line.

Where to go from here?

The EAA isn’t just about legal compliance — it’s an opportunity to build a better, more inclusive digital presence. Taking steps to meet these requirements now positions your business for success, both in 2025 and beyond.

Make accessibility your strength, not a challenge.

How to Build An Accessible Toggle Switch with Modern HTML & CSS (Without JavaScript)

Dave — Fri, 16 Aug 2024 19:13:47 +0000

When your designer hands you a slick UI featuring toggle switches, your priority is to make sure these switches are accessible. So, how do you go about building an accessible toggle switch without relying on JavaScript?

Building an Accessible Toggle Switch with HTML and CSS

JavaScript is a powerful tool, and we use it every day at Tiny Octopus. However, browser vendors have equipped us with the necessary features to build accessible components without it. By using HTML and CSS, you can create a toggle switch that’s both functional and accessible.

View the finished Accessible Toggle Switch: https://codepen.io/Tiny-Octopus/pen/xxoWLZP?editors=1100

Step 1: Start with an HTML Checkbox

At the very beginning, we'll start with a well-structured HTML checkbox. This uses an <input> element paired with a <label> element, ensuring they are correctly attributed and displaying a visible label.

<label for="toggle">
  <input type="checkbox" name="toggle" id="toggle" />
  This is the toggle label
</label>

To meet WCAG Success Criteria 1.4.1 (Use of Color), avoid conveying the checkbox status solely through color. Instead, we're going to add in two icons (sourced from Material UI) to indicate the state of the checkbox.

Place a <span> between the checkbox and the label to hold the check and cross icons. We'll then use a pseudo-element to create a toggle that covers one icon at a time, visually indicating whether the checkbox is checked or unchecked.

<label class="toggle" for="toggle">
  <input type="checkbox" name="toggle" id="toggle" class="toggle__input" />

  <span class="toggle__display" hidden>
    <svg aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--checkmark" width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z" fill="currentcolor" stroke="currentcolor" />
    </svg>
    <svg aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--cross" width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z" fill="currentcolor" />
    </svg>
  </span>

  This is the toggle label
</label>

Key HTML Considerations

Using the hidden Attribute: Apply the hidden attribute to the <span> containing the SVG icons. This ensures that if CSS fails to load, users still see a simple checkbox with a label. The hidden value will be overridden in CSS.
Aria Attributes: Set aria-hidden="true" on the SVGs, as they are decorative and should not be announced by screen readers.
Focusability: Add focusable="false" to the SVGs to prevent an issue in Internet Explorer where SVGs are focusable by default.

Step 2: Style the Toggle Switch with CSS

Now that the HTML is in place, it’s time to style our toggle switch to make it visually appealing and accessible.

/* 
  Define color variables using CSS custom properties for easy maintenance and theming.
  This allows for quick updates and supports light/dark mode switching.
*/
:root {
  --color-toggle-bg-default: #fbe4e2; 
  --color-toggle-bg-checked: #cce6d0; 
  --color-toggle-border: rgba(0, 0, 0, 0.2);
  --color-focus-ring: #4c9aff;
  --color-icon-checkmark: #006838;
  --color-icon-cross: #9e1b1b;
}

/* 
  Set up the basic structure of the toggle component. 
  Using flexbox to align items and create spacing between the elements.
*/
.toggle {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer; 
  gap: 1rem;
  flex-wrap: wrap;
}

/* 
  Hide the actual checkbox input but keep it accessible.
  Position it absolutely to cover the toggle switch area, making the entire area clickable.
*/
.toggle__input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
}

/* 
  Styling the visual representation of the toggle switch.
  Using CSS variables for sizing and spacing, and applying a smooth transition for state changes.
*/
.toggle__display {
  --offset: 0.25em;
  --diameter: 1.8em;

  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  box-sizing: content-box;
  width: calc(var(--diameter) * 2 + var(--offset) * 2);
  height: calc(var(--diameter) + var(--offset) * 2);
  border: 0.1em solid var(--color-toggle-border);
  position: relative;
  border-radius: 100vw;
  background-color: var(--color-toggle-bg-default);
  transition: background-color 250ms, transform 250ms;
}

/* 
  The knob inside the toggle switch, which moves when toggled.
  Positioned absolutely inside the switch and centered vertically.
*/
.toggle__display::before {
  content: "";
  z-index: 2;
  position: absolute;
  top: 50%;
  inset-inline-start: var(--offset);
  box-sizing: border-box;
  width: var(--diameter);
  height: var(--diameter);
  border: 0.1em solid var(--color-toggle-border);
  border-radius: 50%;
  background-color: white;
  transform: translateX(0) translateY(-50%);
  will-change: transform;
  transition: transform 250ms;
}

/* 
  Focus-visible is used to apply the focus ring only when navigating via keyboard.
  This prevents the focus ring from appearing during mouse clicks, enhancing the visual experience.
*/
.toggle__input:focus-visible + .toggle__display {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 4px;
}

/* 
  Change the background color when the toggle is checked (active state).
  This applies the green color to indicate the "on" state.
*/
.toggle__input:checked + .toggle__display {
  background-color: var(--color-toggle-bg-checked); 
}

/* 
  Move the knob to the right when the toggle is checked.
  This visually represents the "on" state.
*/
.toggle__input:checked + .toggle__display::before {
  transform: translateX(100%) translateY(-50%);
}

/* 
  Styling for the icons inside the toggle (e.g., checkmark and cross).
  Using inline-block for flexibility and inheriting colors for easy theming.
*/
.toggle__icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  color: inherit;
  fill: currentcolor;
  vertical-align: middle;
  overflow: hidden;
}

/* 
  Specific styling for the "cross" icon (used for "off" state).
  A slightly smaller size and dark red color.
*/
.toggle__icon--cross {
  color: var(--color-icon-cross);
  font-size: 85%;
}

/* 
  Specific styling for the "checkmark" icon (used for "on" state).
  A dark green color that contrasts well with the light green background.
*/
.toggle__icon--checkmark {
  color: var(--color-icon-checkmark);
}

Ensuring Accessibility in Your Toggle Switch Design

To create an accessible toggle switch, consider the following key areas:

Focus State

A clear focus state is crucial. Ensure that your toggle switch’s focus state is distinct and meets the required color contrast ratios. Opt for outline over box-shadow for better accessibility.

Clear Labeling

Your toggle switch must have a clear label, either visible or provided via an aria-label attribute. This helps screen reader users understand the function of the switch.

New Safari Switch Attribute

Safari recently introduced an exciting new feature: the input[switch] control, available in Safari 17.4+. This new control supports standardized pseudo-elements like ::thumb and ::track for styling form controls, moving away from the older ::-webkit prefixed elements.

These advancements in Safari not only make CSS more maintainable but also allow for creative, interactive toggle designs. For example, Apple’s Webkit blog features a Light/Dark mode toggle switch with embedded animations, showcasing the potential of these new features.

While these updates are promising, always consider the user experience. Toggle switches should be used in scenarios where a setting can be clearly understood as being either “on” or “off.”

How to Create Accessible Charts in React: A Guide to Inclusive Data Visualisation

Dave — Thu, 08 Aug 2024 20:27:42 +0000

What is Accessibility in Data Visualisation

Data visualisation is key to communication but we found that many of the popular charting and graph libraries in ReactJS can be inaccessible to people using a screen reader. Accessibility in data visualisation is essential to making sure that all users, regardless of how they consume that data, can understand and interact with charts and graphs on your website.

We've recently tested out Highcharts, and have been impressed with the tools and features baked into the library to help you create accessible charts in React. Highcharts do charge for a license to use their software, but the quality and feature-set Highcharts provides outstrips any of the open source alternatives we've tested.

The biggest accessibility draw for us was the ability for users to navigate through the charts using a keyboard, with the data being read out in a useful and meaningful way. Highcharts have lots of demos you can go through, and very thorough documentation. However we did find their documentation for using Highcharts with React a bit limited, so we've spent some time experimenting and written 3 examples below for building a line chart, a spline chart and a bar chart in React.

Choosing the Right Chart Type

Different chart types serve different data and user needs, making the selection process critical for effective and clear data visualisation. For example, bar charts are excellent for presenting categorical data and comparing values across multiple categories and subcategories. They clearly illustrate the differences between data points, making trends easy to spot. In this chart, each bar represents the sales figures for a different product category across four quarters, allowing for a straightforward comparison of sales performance within each category over time.

Line charts are ideal for visualising data over time, helping to illustrate trends, progressions, or changes in a continuous dataset. They are particularly useful when you need to show the relationship between different data points over time, such as tracking the performance of a product or monitoring the growth in website traffic over a period.

Spline charts, a variation of line charts, offer a smoother curve by using splines (pronounced /splaɪn/ - rhymes with line) instead of straight lines to connect data points. This type of chart is good for emphasising the smoothness of transitions or when the data represents a pattern that naturally follows a curved pattern, such as temperature changes throughout a day.

Choosing the right chart type is essential for clear and effective data visualization. Highcharts provides a wide range of chart types, including bar charts, line charts, spline charts, and scatter plots (plus many many more chart types), enabling you to select the best option tailored to your specific data and the insights you wish to convey.

Creating Accessible Charts in React with Highcharts

Highcharts makes it easy to create accessible charts. Here’s how to create a simple accessible line chart, spline chart & bar chart in a React application:

Code example:

In an existing React application, install the highcharts and highcharts-react-official packages:

npm install highcharts highcharts-react-official

Create a line chart component:

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartsAccessibility from 'highcharts/modules/accessibility';

// Initialise HighchartsAccessibility module
HighchartsAccessibility(Highcharts);

export const AccessibleLineChart = () => {
  const options = {
    title: {
      text: 'Monthly Sales Data'
    },
    xAxis: {
      categories: [
        'January', 'February', 'March', 'April', 'May', 'June', 
        'July', 'August', 'September', 'October', 'November', 'December'
      ],
      title: {
        text: 'Month'
      }
    },
    yAxis: {
      title: {
        text: 'Sales (in thousands)'
      }
    },
    series: [
      {
        name: 'Sales',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
      }
    ],
    accessibility: {
      enabled: true,
      description: 'This chart shows the monthly sales data over a year, with sales peaking in September and October.'
    }
  };

  return (
    <HighchartsReact highcharts={Highcharts} options={options} />
  );
};

In this line chart example, the HighchartsAccessibility module is imported and initialised to enable accessibility features. The accessibility option in the chart configuration provides a description for screen readers.

Create a spline chart component:

You'll see in the example above that we're not actually telling Highcharts to return a line chart. Line charts seem to be the default chart type, so lets now get a Spline chart rendering instead.

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartsAccessibility from 'highcharts/modules/accessibility';

// Initialise HighchartsAccessibility module
HighchartsAccessibility(Highcharts);

export const AccessibleSplineChart = () => {
  const options = {
    chart: {
      type: 'spline'
    },
    title: {
      text: 'Temperature Changes Throughout the Day',
    },
    xAxis: {
      categories: [
        '12 AM', '1 AM', '2 AM', '3 AM', '4 AM', '5 AM', '6 AM', '7 AM', '8 AM', '9 AM', 
        '10 AM', '11 AM', '12 PM', '1 PM', '2 PM', '3 PM', '4 PM', '5 PM', '6 PM', '7 PM', 
        '8 PM', '9 PM', '10 PM', '11 PM'
      ],
      title: {
        text: 'Time of Day',
      },
    },
    yAxis: {
      title: {
        text: 'Temperature (°C)',
      },
    },
    series: [
      {
        name: 'Temperature',
        data: [
          14.0, 13.8, 13.5, 13.2, 13.0, 12.8, 12.5, 13.0, 14.5, 16.5, 
          18.0, 19.5, 21.0, 22.5, 23.0, 23.2, 22.8, 21.5, 19.8, 18.2, 
          17.0, 16.0, 15.2, 14.5
        ],
      },
    ],
    accessibility: {
      enabled: true,
      description:
        'This spline chart shows temperature variations throughout a day, with the lowest temperature observed early in the morning and the highest in the early afternoon.',
    },
  };

  return (
    <HighchartsReact highcharts={Highcharts} options={options} />
  );
};

The main difference here is that in the options object, we're defining a chart property with a type key set to spline.

Create a bar chart component:

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartsAccessibility from 'highcharts/modules/accessibility';

// Initialise HighchartsAccessibility module
HighchartsAccessibility(Highcharts);

export const AccessibleBarChart = () => {
  const options = {
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Sales Performance by Product Category',
    },
    xAxis: {
      categories: ['Electronics', 'Furniture', 'Clothing', 'Groceries', 'Books'],
      title: {
        text: 'Product Categories',
      },
    },
    yAxis: {
      title: {
        text: 'Sales (in thousands)',
      },
    },
    series: [
      {
        name: 'Q1',
        data: [150, 200, 100, 250, 80],
      },
      {
        name: 'Q2',
        data: [170, 240, 120, 280, 90],
      },
      {
        name: 'Q3',
        data: [180, 260, 140, 300, 100],
      },
      {
        name: 'Q4',
        data: [200, 280, 160, 320, 120],
      },
    ],
    accessibility: {
      enabled: true,
      description:
        'This bar chart compares sales performance across different product categories over four quarters, with the highest sales consistently seen in Groceries and the lowest in Books.',
    },
  };

  return (
    <HighchartsReact highcharts={Highcharts} options={options} />
  );
};

In this bar chart example, once again all we need to update are the properties in the options object. This time we're defining a type: 'bar', but you might also notice that we're returning 5 sets of data this time in the series property. Highcharts manages multiple datasets with ease, and still manages to organise that data in an intuitive way for screenreader users.

Chart Design Best Practices

We always keep 3 points in mind when designing accessible charts:

Accessibility: Design charts with screen reader support and high-contrast colours to accommodate all users.
Simplicity: Keep charts straightforward and easy to interpret, with clear and concise labels and annotations.
Colour Considerations: Avoid relying solely on colour to convey information, ensuring the data is accessible to users with colour vision deficiencies.

Creating accessible charts is key to all users being able to read and interact with your visualisations. By following best practices developers can create clear, accessible & useful charts.

Have you used Highcharts, or found another React charting library which meets your accessibility needs? Let us know in the comments below!

Can AI be used to write good descriptive alt text for images in 2024?

Dave — Fri, 02 Aug 2024 08:07:57 +0000

The Importance of Alt Text for Accessibility and SEO

Alt text on images is an absolute basic of digital accessibility. Alt text (sometimes referred to as alt tags) is the alternative text, or text description, of an image providing some context of the image to users who cannot see it. This may include blind or low vision users, situations where the image doesn’t load or is broken, and also includes search engine crawlers. Alt text serves as descriptive text to convey the meaning and context of visual content in a digital setting.

Here in the UK, approximately 4.8% of UK adults have a vision disability that often requires the use of assistive technology for accessing the web.

Understanding image content poses a critical challenge for individuals with visual impairments, which should always be your first consideration, but providing good quality alt text - and indeed providing a highly accessible website - boosts your SEO efforts and will improve the experience for all of your users (not to mention making sure you're complient to ADA or the incoming EAA).

Alt Text Provides Context for Humans

So providing alt text is a win-win for everyone, but writing good quality alt text is still hard, and so many websites still often have poorly written alt text or fail to use it entirely, leaving an entire keyboard and assistive technology user group frustrated or left out. According to WebAIM, assistive technology users can expect a third of the images on popular home pages to have missing, questionable, or repetitive alternative text.

This is a shocking statistic to have in 2024, so, with the rise of AI and Natural Language Models, can we now offload the role of writing alt text to a bot?

TLDR - No. While AI can provide some basic context and provide a good start to generating alt text, a human is still needed to ‘sense-check’ the image and provide more context to the alt text that AI isn’t able to.

Qualities of Good Alt Text

Good alt text should be specific, concise, and relevant to the content and context of the image. It should avoid redundancy by not repeating information already provided by surrounding text. Additionally, it should capture the essential details without being overly descriptive.

In short: to write good alt text, think about how you would describe that image to a friend.

Testing AI Generated Alt Text Generators

We tested multiple different AI alt text generators for existing images, and settled on the following three for our tests: AltText.ai, Ahrefs Free AI Image Alt Text Generator, and Protoolio.

Note: Some of these AI alt text generator sites offered commission and affiliate links, but we aren’t using any affiliate links for transparency.

Criteria for choosing the tools

There are quite a lot of tools which claim to generate quality alt text using AI, but we wanted to narrow down our selection. The tools we chose matched the following criteria:

It needs to be generally available to everyone. There exist some Shopify and Wordpress-specific tools which we didn't test.
It needs a free tier, and we didn’t want to create an account.

The images we tested

We chose 3 images to test the AI alt text generators. The images were selected to cover a range of scenarios and complexities to see how well the AI alt text generators could handle them. The images were:

A photograph of a beach sunset from Pixabay (we thought the AI would find this one easy)
A photograph of Taylor Swift at the 2023 MTV Video Music Awards from Wikipedia
An infographic from Moz explaining the importance of alt text

The beach sunset photo from Pixabay

AI generated results:

AltText.ai: A heart shape drawn in the sand on a beach at sunset, with gentle waves in the foreground and a colorful sky with clouds.
Ahrefs: A heart drawn on sandy beach at sunset.
Protoolio: Serene beach at sunset with a heart drawn in the sand. Orange and pink hues illuminate the sky, reflecting on gentle ocean waves. Romantic and peaceful seaside scene.

Taylor Swift photo

AI generated results

AltText.ai: Person with blonde hair and bangs wearing a black dress and multiple layered necklaces, standing against a colorful and dark background.
Ahrefs: Taylor Swift's 'reputation' album cover with a snake, symbolizing negativity and controversy.
Protoolio: Blonde woman wearing a black dress and layered necklaces at a red carpet event with colorful backdrop.

Infographic from Moz

AI generated results

AltText.ai: Infographic titled “How does alt text provide context for humans?” explaining benefits: aids low/vision-impaired users, facilitates screen readers, and offers context for image load issues.
Ahrefs: Alt text: “Image showing various examples of alt text, demonstrating how it provides context for humans.”
Protoolio: Informative graphic by Moz explaining the importance of alt text in providing context for humans, particularly for individuals with low or impaired vision, users of screen readers, and addressing image load issues.

Conclusion

We were actually surprised with how well some of the results came out. Clearly, AI has come a long way, and Generative Language Models are able to create fairly accurate and useful alt text. However, the nuances and specific contexts still require human oversight to ensure the alt text is truly beneficial for all users, especially those relying on assistive technologies.