Close

Insights: Using AI for Web Accessibility

In our recent exploration, we set out to understand how ChatGPT could assist web developers in enhancing website accessibility according to WCAG (Web Content Accessibility Guidelines). This experiment aimed to determine whether ChatGPT could analyze and improve HTML code to make web content more accessible, particularly for people with visual impairments.

Experiment Overview

To test ChatGPT’s potential, we initially used full HTML pages from two websites, asking the model to make the code more accessible. However, the results revealed some significant limitations, prompting us to shift our focus to other ways ChatGPT might be useful in promoting accessibility.

Key Findings and Challenges

  1. Limitations with Large HTML Code Blocks:

    • ChatGPT’s response capacity is limited by a maximum character count. As a result, it struggles to handle extensive HTML code, often truncating large sections or omitting essential components.
    • This makes it challenging to submit entire web pages for accessibility improvements, as the output may not fully preserve the original structure and functionality.

  2. Challenges with URL Analysis:

    • Asking ChatGPT to analyze a URL only produces general accessibility suggestions rather than specific, actionable advice for that page.
    • Similarly, requests to “analyze the HTML code of a URL” result in ChatGPT indicating that it cannot retrieve or process HTML content directly from external websites. This limits its utility for real-time analysis of live code.

  3. Effective for Building Specific Accessible Components:

    • Despite these limitations, ChatGPT is effective when asked to create specific accessible HTML, CSS, or JavaScript components. For instance, if we ask ChatGPT to create an accessible contact form, it can generate a code snippet that follows accessibility best practices.
    • Here’s an example of a contact form generated by ChatGPT that incorporates accessible labels, ARIA attributes, and a logical structure:

Example: Accessible Contact Form in HTML

This example demonstrates how ChatGPT can produce a simple, accessible form that meets WCAG standards.

<form aria-labelledby="contactFormTitle">
  <h2 id="contactFormTitle">Contact Form</h2>

  <label for="name">Name:</label>
  <input type="text" id="name" name="name" aria-required="true" required>
  
  <label for="dob">Date of Birth:</label>
  <input type="date" id="dob" name="dob" aria-required="true" required>
  
  <label for="address">Address:</label>
  <input type="text" id="address" name="address" aria-required="true" required>
  
  <fieldset>
    <legend>Hobbies:</legend>
    
    <div>
      <input type="checkbox" id="hobby-reading" name="hobbies" value="Reading">
      <label for="hobby-reading">Reading</label>
    </div>
    
    <div>
      <input type="checkbox" id="hobby-traveling" name="hobbies" value="Traveling">
      <label for="hobby-traveling">Traveling</label>
    </div>
    
    <div>
      <input type="checkbox" id="hobby-cooking" name="hobbies" value="Cooking">
      <label for="hobby-cooking">Cooking</label>
    </div>
  </fieldset>
  
  <button type="submit">Submit</button>
</form> 

This form provides accessibility features by including:

  • Descriptive aria-labelledby and aria-required attributes.
  • Grouped options with fieldset and legend elements for better screen reader navigation.
  • Explicit labels for each input, improving usability for screen reader users.

Practical Tips for Using ChatGPT for Accessibility

To maximize ChatGPT’s effectiveness in accessibility improvements, consider the following practical strategies:

  • Submit Small Code Segments: Instead of submitting entire web pages, focus on specific sections of HTML, CSS, or JavaScript code that need accessibility improvements. This allows ChatGPT to provide more accurate and complete responses.
  • Request Accessible Component Creation: Use ChatGPT to build individual accessible components rather than entire pages. For example, you might ask for an accessible navigation menu, form, or button with proper ARIA labels and keyboard accessibility.
  • Experiment with Accessibility Features in CSS and JavaScript: ChatGPT can assist with adding accessible styles or interactive features, such as focus states or keyboard navigation, which are essential for enhancing usability for users with disabilities.

Conclusions

Through this research, we found that ChatGPT has limitations when processing large HTML files and analyzing URLs. Character limits and the model’s inability to directly access live HTML code limit its effectiveness in providing full accessibility audits or improvements for entire pages. However, ChatGPT performs well when tasked with creating or enhancing smaller, individual components to meet accessibility standards.

Developers can leverage ChatGPT as a valuable resource to build accessible code components, making it a helpful tool for addressing specific WCAG requirements. While it may not replace dedicated accessibility testing tools, ChatGPT can be a useful aid in crafting individual accessible elements, ultimately contributing to a more inclusive web experience.

Leave a Reply