Skip to content

Generative AI and Its Role in Accessible Code

It's unlikely that people will stop using generative AI tools for coding assistance. It's natural for people to adopt tools that make them more effective, like no-code website builders (Wix, Squarespace, Weebly, etc.), which empower people to create websites without needing to learn how to code. 

Generative AI can be a powerful tool for writing and validating accessible code. During the HighEdWeb 2024 Accessibility Summit in June, I attended a session titled "AI-powered solutions: enhancing digital accessibility in higher ed," presented by Michael Cardillo of Concordia University.

In this session, Mr. Cardillo walked through two examples of how he uses generative AI to remediate accessibility issues, one of which was an inaccessible HTML table. The table needed headings and a footer, and the captions were coded incorrectly. He copied and pasted the HTML for the table into ChatGPT, then gave it the prompt “Make this table accessible HTML:” He then copied the code generated by ChatGPT, pasted it into his CMS, and reviewed and, of course, tested it.

The biggest takeaway from that presentation was that AI is okay. AI has a place in the production and remediation of accessible code, which helps eliminate accessibility barriers and is used to create inclusive, accessible web environments.

Let’s look at some ways AI can be a positive, productive tool in the accessibility space.

AI for Writing Accessibility Code

Use AI to generate boilerplate accessible code for web forms - 
For example, I gave Gemini, Google’s generative AI tool, this prompt: "Write semantic HTML for a web form that has accessible form labels for Full Name, Department and Email Address.

The outputted code looks like this:

<form>
<label for="full-name">Full Name:</label> <input type="text" id="full-name" name="full-name" required>
<label for="department">Department:</label> <input type="text" id="department" name="department">
<label for="email">Email Address:</label> <input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form>


The web form looks like this -

Table with input fields labeled Name, Department, Email Address and a Submit button

I tested the form with Voiceover. Each field was correctly announced, and I could tab through all the fields to the Submit button. Voiceover announced the Full Name and Email Address fields as required, even though they were not included in the prompt. Also, there are no visual cues for those required fields. For this example, having a basic working form is precisely what I wanted, saving me some time. Now, it can be customized with accessibility features. Remember that the more detailed you are in your prompt, the better your chance of getting the output you expected. Also, remember that a human must test the code. Never assume the output is entirely correct or does not need human oversight.

Here are a few examples of prompts you can use with an AI tool to generate specific code snippets, giving you, at least, a solid foundation from which to work. (Note: I am using Gemini.)

Prompt: examples of prompts to use with AI tools to generate specific accessibility code snippets

Output:
It's awesome you're thinking about accessibility! Here are some prompts you can use with AI tools to generate specific accessibility code snippets broken down by category:

General Accessibility

  • "Generate ARIA attributes for a navigation menu with 3 items, including Home, About, and Contact." This prompts the AI to provide the necessary ARIA labels and roles for a basic website menu, making it navigable for screen readers.
  • "Create an HTML form with accessible labels and error handling for a name and email address input." This ensures the form is usable by people with disabilities, including proper labeling and clear error messages.
  • "Write a JavaScript function to dynamically update ARIA live regions with status messages for a loading animation." This will help screen reader users understand what's happening on the page even if they can't see the animation.

Prompts for Specific Disabilities

  • Visual Impairments:
    • "Generate alt text for an image of a cat playing with a ball of yarn." (Be specific about the image content!)
    • "Write CSS to ensure sufficient color contrast between the text and background according to WCAG guidelines."
  • Motor Impairments:
    • "Create a skip link to allow keyboard users to bypass repetitive content on a webpage."
    • "Write JavaScript to ensure all interactive elements are operable with keyboard only."
  • Cognitive Disabilities:
    • "Generate clear and concise language for a website's terms and conditions."
    • "Create a simple layout with a clear visual hierarchy for a webpage with a lot of information."

Prompts with Specific Frameworks/Languages

  • "Generate React code for an accessible modal dialog with ARIA attributes."
  • "Write Vue.js code for an accessible accordion component with keyboard navigation."
  • "Create Angular code for an accessible dropdown menu with ARIA attributes and keyboard support."

I was curious to see how some of these code outputs looked and functioned once rendered. I chose to test the prompt "Create a skip link to allow keyboard users to bypass repetitive content on a webpage." located in the Motor Impairments category. Here are the results:

Code:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skip Link Example</title>

  <style>

    /* Style the skip link to be visually hidden by default */
    .skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: #007bff;
      color: white;
      padding: 8px 16px;
      z-index: 100; /* Ensure it's on top */
      transition: top 0.3s ease-out; /* Add a smooth transition */
    }

    /* Show the skip link on focus */
    .skip-link:focus {

      top: 0;
    }
  </style>
</head>

<body>
  <a class="skip-link" href="#main-content">Skip to main content</a>
  <header>
    <h1>Website Title</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main id="main-content">

    <h2>Welcome to our website!</h2>
    <p>This is the main content area.</p>
  </main>
</body>
</html>

Cross-section of a draft web page created with AI-generated HTML. The page has a visible "Skip to main content" link with a header that reads Website Title. There are four links in a list column. The links are Home, About, Services and Contact. Beneath the link list is a header that reads Welcome to our website! Beneath that is a sentence that reads This is the main content area.

With a bit of formatting, this webpage is off to a great start!

Challenges and Considerations

AI's power lies in learning from data, but biased data creates biased systems. It's a tool to assist, not replace, developers. We need human oversight to ensure inclusivity and address those subtle accessibility issues AI might miss.

So, how do we get smart about using generative AI tools to help us write accessible code? You can start by asking yourself two questions:

  • How transparent is the tool in terms of its limitations?
  • How can I verify the answer I've received?

~ Can generative AI help write accessible code?

Always assume the response is incomplete and verify it using trusted sources like W3C Validation Services and axe Accessibility Linter.

For companies and developers looking to adopt these tools, a strategic approach is essential. Here are some tips to ensure a smooth and successful integration:

Start small: Begin by experimenting with AI assistants for specific tasks or coding languages. This allows you to assess their effectiveness and identify potential pitfalls before implementing them across your entire workflow.

Prioritize code quality: Don't blindly accept AI-generated code. Implement robust testing and validation procedures to ensure the code is accurate, bug-free, and secure.

Upskill your workforce: Educate your developers on the strengths and limitations of AI assistants. Encourage them to use these tools as aids, not replacements, for their own expertise. ~ AI code generation

Tips for Better Prompts: (Gemini Advanced generated this list.)

Be specific: The more detail you provide, the better the generated code will be. Include information about the specific elements, their purpose, and the desired behavior.

Specify the language / framework: Tell the AI what language (HTML, CSS, JavaScript) or framework (React, Angular, Vue) you're working with.

Consider the context: Provide any relevant context about the surrounding code or the overall purpose of the component.

Test and refine: Always test the generated code to ensure it meets your specific accessibility requirements and make any necessary adjustments.

By using clear and detailed prompts, you can leverage AI tools to generate accessible code snippets that improve the user experience for people with disabilities.

Generative AI can significantly accelerate the creation of accessible code, but it's not a magic wand. By combining AI's efficiency with human expertise and user testing, we can build a digital world that welcomes everyone.

Resources

Maggie Vaughan, CPACC
Content Marketing Practitioner
DubBot