AI and Accessibility Code Reviews

As an experiment I asked ChatGPT the following question about code flagged by the WAVE (Web Accessibility Evaluation Tool by WebAIM, Web Accessibility in Mind) automated tool. I can ‘mostly’ read code and the suggestions look, on the surface, ok to me. As far as the accessibility suggestions go they too seem good and I like the caveat at the end about considering other aspects. All that said, I’d love to get some more knowledgeable feedback from experienced coders or even @richard_club who writes a lot of the code. Success, failure or somewhere in between? Thanks.

This was the question and the code is the expand button where a response is quoted here at the club:
As an accessibility expert. Please review the following code for accessibility issues but also suggest any other improvements you find.

<button aria-controls="quote-id-67777-7-0" aria-expanded="false" class="quote-toggle btn-flat">
<span class="svg-icon-title" title="expand/collapse">
<svg class="fa d-icon d-icon-chevron-down svg-icon svg-string" xmlns="http://www.w3.org/2000/svg">
<use href="#chevron-down"></use>
</svg>
</span>
</button>

This is the reply:
Based on the provided code snippet, there are several accessibility issues and improvements that can be suggested. Here’s an analysis of the code and recommendations:

  1. ARIA attributes: The code includes some ARIA attributes, which is a good start for accessibility. However, it seems that the aria-controls and aria-expanded attributes are not properly associated with any corresponding elements. Make sure to link these attributes to the relevant elements to provide context and improve accessibility.

  2. Button semantics: The <button> element is used, which is appropriate for interactive elements. However, it lacks text content inside the button, which can make it unclear for screen readers and users who rely on assistive technologies. Consider adding a meaningful text label to the button, describing its purpose or functionality.

  3. SVG accessibility: The <svg> element is used to display an icon, but it doesn’t have any accessible text alternatives. Provide an accessible name for the <svg> element using the aria-label attribute or by wrapping it with an accessible <title> or <desc> element. This will allow screen readers to announce the purpose or meaning of the icon.

  4. Contrast and visual design: Although not directly related to accessibility, it’s important to consider contrast and visual design aspects. Ensure that the text and icon have sufficient contrast against the background to be easily readable for users with visual impairments. Additionally, consider using appropriate visual cues, such as colour or underline, to indicate interactivity or the expanded/collapsed state.

To improve the code for accessibility, here’s an updated version incorporating the suggested changes:

<button aria-controls="quote-id-67777-7-0" aria-expanded="false" class="quote-toggle btn-flat">
  <span class="svg-icon-title" title="Expand/Collapse Quote">
    <svg class="fa d-icon d-icon-chevron-down svg-icon svg-string" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <title>Expand/Collapse Quote</title>
      <use href="#chevron-down"></use>
    </svg>
  </span>
  Expand/Collapse Quote
</button>

In this updated version, the button includes a text label inside it, providing clarity for screen readers and assistive technologies. The <svg> element now has an accessible name provided by the <title> element, allowing screen readers to announce the purpose of the icon.

Remember that accessibility is a broad topic, and this analysis focused on the given code snippet. It’s important to consider other aspects of accessibility, such as keyboard navigation, focus management, and semantic HTML structure, throughout the entire website or application.

1 Like