By Carmen Huard, Danielle Kovacic

AI and accessibility

Good design is accessible because it enables everyone, regardless of ability, to use and enjoy the experiences you create. This is a key pillar of how we design at Habanero. However, designing accessible experiences isn't always straightforward.

If you're like us, you've probably spent hours checking designs and components against the Web Content Accessibility Guidelines (WCAG). While they're an essential resource, they can be difficult to interpret. The guidelines are nuanced, can be tricky to navigate, written in technical language and often leave room for interpretation, making it challenging to know whether you've made the right design decisions.

This is where we've found AI to be especially helpful. It doesn't replace your accessibility expertise; instead, it can hep you understand and apply WCAG guidelines to your work by:

  • Reviewing designs in real time
  • Explaining potential accessibility issues in plain language
  • Suggesting improvements as you design

This will help you build accessibility into the design process from the very beginning, instead of treating as a final checklist.

Like any tool, though, AI works best when you understand both its strengths and its limitations.

What to keep in mind when using AI for accessibility

AI isn't a substitute for accessibility (or any element of design) expertise. It can help you interpret guidance, identify potential issues and learn as you go, but it doesn't replace a basic understanding of accessibility or proper accessibility testing. Any AI-generated recommendations should be reviewed and validated by a person with foundational accessibility knowledge.

Accessibility testing

On many projects at Habanero we’ve worked with the Inclusive Design Research Centre (IDRC) at the Ontario College of Art and Design. They have a depth of knowledge around accessibility that always levels up our web experiences and our own learnings. We highly recommend leveraging them for testing your own experiences if looking for accessibility testing services.
 

It's also worth remembering that AI is only as good as the context you give it. The quality and reliability of AI-generated suggestions often depend on your prompt and the information you provide. The more specific your context, the more useful the suggestions are likely to be.

In our experience, the most valuable results come from treating AI like a design partner rather than an accessibly auditor. We use it to ask questions, challenge our assumptions and gut check our work throughout the design process.

Create your own accessibility agent

If your AI tool lets you create custom agents, try building one that's focused on accessibility. You can configure your agent to use authoritative accessibility resources, like those from the W3C Web Accessibility Initiative (WAI), Nielsen Norman Group, WebAIM and Accessibility Standards Canada. These sources provide practical guidance grounded in recognized standards and current best practices.

Writing the best prompt for AI

If you want to get back a good, reliable response from AI, it all starts with the quality of your prompt. Here are our tips to craft successful prompts:

Be clear.

  • What question do you have? Ask it in plain language, without introducing too many extra details that might bias the answer.
  • Are there any specific sites or sources you'd like it to site or reference? Ask the AI to include source citations, if you'd like to be able to reference them.

Specify your WCAG success criteria

Make sure you reference what type of accessibility level you're asking for. Are you trying to meet WCAG 2.2 AA or AAA success criteria? Meeting WCAG 2.2 AA is the baseline for most organizations, but accessibility doesn't stop at compliance. Where it makes sense, it's worth aiming for AAA to create more inclusive experiences.

Provide context and background information.

  • Is there anything the AI needs to know about the work you're doing or the component you're looking for feedback on?
  • Are there details about the site or the audience that would be important for it to know?

Don’t rely solely on screenshots to validate accessibility

While sending a screenshot is often the quickest way to get a response, it isn’t always the most reliable way to get an accurate one. AI has to interpret the colours, typography, spacing and other visual details from the image. Unless you provide additional context, such as the exact colours, font sizes or component styles, the recommendations you receive may not accurately reflect your design.
 

Provide guidelines.

  • Is there anything that you don't want the AI to do or reference?
  • Is there anything you already know or have tried and can give context around?

Here are a couple of example prompts that follow our suggestions:

I'm designing a website to meet AA WCAG 2.2 guidelines at all times, and AAA guidelines where possible. What are the WCAG guidelines required for rest state of links in a footer? Is it required that there is an underline to show it is clickable, or is the footer a special case given its unique placement on the site? Show your sources.
If all fields in a form are required, is it a WCAG 2.2 AA requirement that the form indicates the required fields individually or is a blanket indication sufficient? The form is relatively short, with only name and email. Is it better for the indicator to be before or after the fields from an accessibility standpoint? 

Things we ask AI

Now that you know how to write a good prompt, here are some of the things ways we've asked AI for help in the past that you can use for your own inspiration.

Rule checks

There's a lot to remember when it comes to accessibility. Asking AI for a rule check to questions that you can't quite remember the guideline for can help you keep the design flowing, so you don't have to pause and sift through the site's guidelines. Some common questions we've asked recently are:

  • Do disabled states need to have 3:1 contrast?
  • What is the recommended touch target size for interactive elements on desktop and mobile to meet accessibility best practices?
  • What is the rule for form fields on backgrounds to be accessible?
  • What are the rules for hover states to be accessible?
  • Do social media links on websites require tooltips for keyboard navigation users?
  • What are the rules around motion and animation accessibility and when you have to show a play/pause control?

Niche design asks based on what you're creating

We know that accessibility often has grey areas and room for interpretation. Being able to get more specific information around a niche design pattern can help combat any ambiguity. You can also ask follow-up questions; for example, is the response you received a best practice or a hard rule you need to follow to meet accessibility baselines?

Getting real world examples/competitive analysis

As you consider the different ways you might achieve accessibility outcomes, it can be helpful to look at other examples of accessibility in practice. You can use AI to find different examples or applications that you may not have seen before.

Here are some AI prompts we've used to do a quick competitive analysis:

  • Can you give me an example of an accessible focus state on a website?
  • On most websites I've seen an asterisk used for "required" form fields at the bottom. Can you show me examples of it used at the top of the form?
  • Can you find me examples of logo carousel animations that include a pause button?

Generating alt text

AI can quickly generate alt text for images, which makes it a great starting point. However, good alt text is more than describing what's visible. It should also communicate the context and purpose of an image.

Here's a great example from the Bureau of Internet Accessibility that illustrates this point. Imagine you're writing alt text for a photo of a person holding a cat. AI might say:

Alt text: Man in a white shirt holding an orange tabby cat against a blue background.
 

While this accurately describes the image, it may not provide the most meaningful information for someone using a screen reader. If the image appears on a veterinary website, the person's role is likely more important than the colour of their shirt or the background. In that case, a more helpful description would be:

Alt text: Veterinarian holding an orange cat.
 Although the second version is shorter, it provides more relevant context for the user. The best alt text doesn't just describe an image, it communicates the information that's most useful in the context of where it's being used.

AI can support accessibility, but it can't replace expertise

AI has made identifying accessibility issues faster and easier than ever. That means you can start validating your designs much earlier in your process, which can help you catch and fix issues before they become more costly to address.

But AI is a tool, not an expert. It can make mistakes or overlook important details, which is why a basic understanding of accessibility is still essential. The more you know, the better you'll be able to assess AI's recommendations, identify what's missing and write stronger prompts that produce more reliable results.

Stories say it best.

More stories

Are you ready to make your workplace awesome? We're keen to hear what you have in mind.

Let's talk!

Interested in learning more about the work we do?

Explore our culture and transformation services.

Our commitment to reconciliation

Learn how Habanero is responding to the Truth and Reconciliation Calls to Action as a settler-owned company operating on Indigenous territories across what is now called Canada.

Read about our commitment