Guide: Building Accessible Websites with Local Open-Source AI-Coding Tools

GUIDE: How to Use Local LLMs and Bolt.diy for Accessible Coding

1. Set Up Your Environment

Skills needed: basic linux knowledge, docker

• Download & Install the Ollama software on your PC, Mac or Linux machine.

• Download the Large Language Model.
  You can for example use the new DeepSeek R1, Qwen Coder, Phi 4, or others available on Ollama. 
  
  Beware: you need a beefy videocard or Macbook M with at least the same video memory (GB) as the modelsize!

  For testing out different models (online) go to: web.lmarena.ai

• Download and configure Bolt.diy using the git instructions, on your development machine.

2. Generate Accessible Code

LLMs can be instructed to prioritize accessibility. When generating code for your website, you can provide prompts like:

“Create an accessible navigation menu with keyboard and screen reader support. Include ARIA roles and focus management.”

For example, the LLM might output:

<nav aria-label="Main Navigation">
  <ul>
    <li><a href="#home" tabindex="0">Home</a></li>
    <li><a href="#about" tabindex="0">About</a></li>
    <li><a href="#contact" tabindex="0">Contact</a></li>
  </ul>
</nav>
<script>
  document.querySelectorAll('a').forEach(link => {
    link.addEventListener('keydown', event => {
      if (event.key === 'Enter') {
        event.target.click();
      }
    });
  });
</script>

3. Use Bolt.diy for Validation

Once the LLM generates the code, use Bolt.diy’s built-in validation tools to:

• Check for missing ARIA attributes.

• Ensure color contrast ratios meet WCAG standards.

• Verify that all interactive elements are keyboard-navigable.

4. Test and Iterate

Test your website with accessibility tools such as screen readers (e.g., NVDA or Apple VoiceOver) and keyboard navigation to ensure a seamless experience for all users. Refine the code as needed using insights from these tests.

The Role of Instruction in Accessibility

Effective use of LLMs for accessibility hinges on clear and detailed prompts. Here are a few examples of instructions you can use:

• For semantic HTML: “Write an accessible form with proper labels, error messages, and keyboard focus handling.”

• For ARIA usage: “Generate a modal dialog with ARIA roles and ensure it traps focus while open.”

• For responsive design: “Create a mobile-friendly, accessible image gallery with captions and keyboard navigation.”

By providing precise and context-aware instructions, you can guide the LLM to produce code that adheres to accessibility standards.

Prompts for accessible code

To enhance the accessibility of your website, especially for screen reader users, it’s crucial to provide clear instructions to your Local Large Language Models (LLMs) for generating accessible code. Here are some prompt examples you can use:

1. 1. Accessible Forms:

      • Prompt: “Generate a contact form that is accessible to screen readers, including appropriate labels, fieldsets, and error messages.”
      • Expected Output: The LLM should produce a form with <label> elements correctly associated with their corresponding <input> fields using the for attribute, utilize <fieldset> and <legend> for grouping related fields, and provide clear, accessible error messages.

   2. ARIA Landmarks:

      • Prompt: “Create a webpage structure using ARIA landmarks to improve navigation for screen reader users.”
      • Expected Output: The LLM should generate a layout that includes ARIA landmark roles such as banner, navigation, main, and contentinfo to define different sections of the page, enhancing navigability for assistive technologies.

   3. Accessible Tables:

      • Prompt: “Construct a data table that is accessible, including table headers and captions.”
      • Expected Output: The LLM should create a <table> with <thead>, <tbody>, and <tfoot> sections, use <th> elements with appropriate scope attributes for headers, and include a <caption> to describe the table’s content.

   4. Skip Navigation Link:

      • Prompt: “Implement a ‘Skip to main content’ link to enhance keyboard navigation.”
      • Expected Output: The LLM should provide a link at the top of the page that allows users to bypass repetitive navigation links, directing them straight to the main content area.

   5. Accessible Images:

      • Prompt: “Insert images with appropriate alt text for screen reader accessibility.”
      • Expected Output: The LLM should generate <img> tags that include descriptive alt attributes, conveying the content and function of each image to users who rely on screen readers.

Key Resources for Accessibility Standards and Tools:

• NVDA (NonVisual Desktop Access): A free, open-source screen reader for Windows that assists in testing and ensuring your website’s accessibility.

  • Download Link: https://www.nvaccess.org/download/

• Web Content Accessibility Guidelines (WCAG): A comprehensive set of guidelines for making web content more accessible to people with disabilities.

  • Overview: https://www.w3.org/WAI/standards-guidelines/wcag/
  • Quick Reference: https://www.w3.org/WAI/WCAG21/quickref/

By incorporating these prompts and utilizing the resources above, you can guide your LLMs to generate code that adheres to accessibility best practices, ensuring a more inclusive experience for all users.

Wrap up

With the latest local open-source LLMs like DeepSeek R1, Qwen Coder, and Phi 4, along with powerful tools like Bolt.diy, building accessible websites is more achievable than ever. These technologies allow developers to integrate accessibility directly into their coding workflows while maintaining full control over data privacy and customization. By leveraging these tools within your NGI projects, you can take an active role in creating a more inclusive internet—one line of accessible code at a time.