Skip to content

The Future of Web Accessibility — How AI Tools Can Help Make the Web More Inclusive

Technology

Oct 19, 2023 - 8 minute read

3459 V1
Michał Łapeta Team Leader Senior UI Developer

He works as Senior UI Developer at Objectivity and is responsible for delivering visual layer of web applications but also for making digital products accessible. Michał obtained IAAP certification and as a web accessibility enthusiast, he’s always keen to share his knowledge both in the company and with a broader audience through social media channels or conferences. Michał is passionate about new technologies and outside the office hours, he’s an aviation enthusiast.

See all Michał's posts

2988 HC Digital Transformation 476X381

Share

Table of contents

  1. The Current State of Web Accessibility
  2. AI Assistance for Content Creators
  3. AI Assistance for Web Developers
  4. Summary 

Right now, we’re witnessing a huge technological leap thanks to advances in areas such as machine learning (ML) and artificial intelligence (AI). In all that hype it’s easy to forget that technology was invented for one specific purpose — to help people. It’s hard to argue against the fact that this goal was achieved with many spectacular successes. Nowadays, the number of activities that can be done online is tremendous. But does it really work for all people? There is one group that is particularly interested in converting technological achievements into real life improvements — people with disabilities or impairments. Let's delve into the exciting possibilities that lie ahead for the world of web accessibility.

The Current State of Web Accessibility

Before we dig into the future of web accessibility, let’s check its current state and problems that people with disabilities need to face trying to access digital content. According to research conducted in 2023 by WebAIM (a non-profit organization that provides web accessibility expertise), 96.3% of home pages had some form of non-compliance with Web Content Accessibility Guidelines (WCAG). If you take a closer look at the data, you’ll notice that the majority of problems can be grouped into six categories:

  • low contrast text (83.6%)
  • missing alternative text for images (58.2%)
  • empty links (50.1%)
  • missing form input labels (45.9%)
  • empty buttons (27.5%)
  • missing document language (18.6%)

The list is not long, and it hasn’t changed in the last 5 years. This means that addressing only these failures would significantly increase the level of web accessibility.

Over the last 4 years, the number of pages with detectable WCAG failures has decreased by only 1.5%, from 97.8%. It’s worth to remember that these numbers only cover issues that can be automatically detected — this means that the actual WCAG conformance level was even lower.

Authors of the report point out that accessibility conformance of some sectors, such as government and education, is far better than others. Nevertheless, the overall pace of web accessibility progress isn’t great. Significant amount of work remains to be done to make the web accessible to everyone.

AI Assistance for Content Creators

Back in 2016, Facebook introduced a mechanism that adds automatically generated alternative text to images when the user didn’t provide one. Having in mind that this problem was amongst the biggest issues highlighted by WebAIM report, this should be considered as a significant step towards making web a better and more accessible place.

Let’s check how it works in 2023 and if this mechanism fulfilled the hopes placed in it. For the first test, we will use two simple images that will be uploaded to Facebook without providing any alternative texts for them. Then we will check alt text provided by Facebook and judge if it’s helpful or not.

Pizza with red and yellow tomatoes and fresh, basil leaves

Source

In this case, the alternative text provided by Facebook was “Could be a picture of pizza and tomato”. This text is satisfactory and valid. As you can see, I actually provided an image of pizza with some pieces of tomato.

Let’s try with another image.

Two carafes of lemonade and empty glasses on a yellow table

Source

For the image above, Facebook generated the following alternative text: “Could be a picture of juice and a carafe”. Second time and we have second success as we received alt text that accurately describes provided image. Of course, this time it’s not flawless since the image presents lemonade instead of juice, but this is a small detail that shouldn’t affect the result.

It's time for a slightly more difficult task. Let’s consider the following image.

A person standing next to a bicycle who is leaning against the wall of a building painted with graffiti

Source

The generated alt text is: “Could be a picture of a person, bicycle and street”. Without having any clue about the context in which the photo was used, you could say that the text is probably good enough. Undoubtedly, there’s a person who is standing with a bicycle on a street. If this image would serve as an illustration for a post about the growing network of city bikes, this description would be a great alt text to use.

Now imagine that you’re writing a post about the growing problem of graffiti in urban space. In that case, you probably wouldn’t be willing to accept generated alt text that’s focused on a bicycle instead of the building in the background. Then, you’d probably prefer something along the lines of “A person standing in front of a building whose facade has been damaged by graffiti” as a better alternative for the image.

The last example illustrates that automatically generated alt texts may not sufficiently consider the context in which the image is used. Web accessibility is not about fulfilling technical requirements or guidelines. It’s about creating good user experience for the broadest audience possible. Human judgement may still be needed to prioritise users instead of technical metrics.

Even though these kinds of systems have some drawbacks, they should definitely be seen as a step in the right direction. Having a slightly inaccurate alternative text is probably still far better than not having it at all. You should also have in mind that it’s just the beginning of a new era of AI driven tools. Such aids will soon be available not only on Facebook but on all kinds of web pages with the help of third-party extensions or even in browsers themselves.

AI Assistance for Web Developers

So far, we covered an example of how AI tools could influence web accessibility from the content creator perspective. Auto generated alt texts should be considered as big step forward but let’s be honest, without the involvement of programmers who actually build websites, we won’t achieve our ultimate goal to make the web fully accessible.

I will now try to find out how AI can support web developers with their daily tasks. In order to demonstrate how different AI tools could be used, I defined two cases that should imitate real-world scenarios.

Case 1: Refactor Bad Code Into Good (Accessible) One

Imagine that you have a very old website with and your goal is to make it more modern and accessible. Stakeholders decided that building a new solution from scratch won’t be profitable, so you try to do as much as you can with the existing codebase.

The website provided by the W3C consortium will serve as an example. This website was created for educational reasons — to demonstrate how websites shouldn’t be built. It’s completely against the accessibility guidelines.

Let’s focus on the navigation menu which looks like this:

Layout of a website that has accessibility issues where navigation panel is highlighted

It is coded in the following way:

<table>
  <tbody>
    [...]
    <tr>
      <td id="home"><a href="javascript:location.href='home.html';"><img src="./img/nav_home.gif"></a></td>
    </tr>
    [...]
    <tr>
      <td id="news"><a href="javascript:location.href='news.html';"><img src="./img/nav_news.gif"></a></td>
    </tr>
    [...]
  </tbody>
</table>

Solution: Use ChatGPT 

Let’s assume for a moment that you’re not very experienced in coding accessible solutions but you have enough knowledge to see that this code is far from fulfilling any WCAG guidelines. 

In that situation, you can turn to an AI companion, such as ChatGPT, to ask for assistance. In this example, I’m using the version 3.5 of ChatGPT as it’s widely available to anyone. Seconds later, my first prompt is ready and looks more or less like that:

“Can you improve my code to be more accessible?”

ChatGPT prepared the following response:

“Here's an improved version of your code”

<nav>
  <ul>
    <li><a href="home.html">Home Page</a></li>
    <li><a href="news.html">News</a></li>
    <li><a href="tickets.html">Tickets</a></li>
    <li><a href="home.html">Home Page</a></li>
    <li><a href="survey.html">Survey</a></li>
  </ul>
</nav> 

We receive modern, clean and semantic HTML code that is far better than the initial version. Moreover, ChatGPT successfully managed to convert the image-based menu to its text equivalent. We can definitely be happy with this response and mark this task as done.

An Even Better Solution: Stay Inside Code Editor and Use GitHub Copilot

The previous case was pretty impressive, but some may say that it required a transition from the coding environment to a browser and it might not suit most programmers. Let’s try to challenge that and find another solution. This time GitHub Copilot comes to the rescue. 

Let’s consider a very similar situation. We’re refactoring a hypothetical main navigation component that was built ages ago based on non-semantic div elements. 

The initial code looks like that: 

function MainNavigation() {
  return (
    <div>
      <div>
       <div>My Great App</div>
        <div>
          <div>
            <a href="#users">Users</a>
          </div>
          <div>
            <a href="#admin">Admin</a>
          </div>
        </div>
      </div>
    </div>
  );

In order to trigger GitHub Copilot, I’m writing the prompt in the following way:

function MainNavigation() {

  // improve accessibility by using semantic elements
   return (
    <div>
      <div>
        <div>My Great App</div>
          [...]
      </div>
    </div>
  );
}

In the next step, I remove the invalid code to create some space for the AI companion. Next, it’s time to move the cursor into body of return statement.

function MainNavigation() { 
  // improve accessibility by using semantic elements 
  return ( 
  ); 

GitHub Copilot performs its task and here is the final result: 

function MainNavigation() { 
  // improve accessibility by using semantic elements 
  return (
    <nav>
      <ul>
        <li>
          <a href="#users">Users</a>
        </li>
        <li>
          <a href="#admin">Admin</a>
        </li>
      </ul>
    </nav>
  );

Just like before, AI was able to solve the problem in a satisfactory way, and the navigation is now written with semantic elements. 

Case 2: Create Good (Accessible) Code From Scratch 

Working with an existing codebase is quite common, but there are also cases when you need to build a solution from scratch. Let’s stick with the very sophisticated example of the main navigation. Imagine a programmer who has to write the base structure for such navigation and they have completely no clue what accessibility means (surprisingly, this is not that uncommon either). 

This case is more difficult than the previous one because you start with a blank piece of paper (file) so let’s check whether AI can deal with it. 

This is our starting point. A very basic structure of HTML page, nothing fancy. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body> 
</html> 

The programmer needs to place the cursor after the opening body tag and write the prompt in the following way:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body> 
<!-- create accessible navigation --
</body> 
</html> 

Previously, GitHub Copilot had a simpler task. It received some input to work with. This time there’s nothing there. 

The code written by AI looked like this: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body> 
  <!-- create accessible navigation --> 
<nav>
    <ul>
      <li><a href="#home">Home Page</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav> 
</body> 
</html> 

Again, it’s a perfectly acceptable solution. GitHub Copilot proved to be helpful in this case as well.  

Summary 

As demonstrated in this article, AI tools have great potential to improve the overall level of web accessibility. This technology has a chance to become a real game changer as its impact reaches so many different areas. I presented real life use cases from the perspectives of software engineers and content creators, but AI has a potential to go far beyond that.  

Assistive technologies like screen readers or even web browsers could also be improved by incorporating AI to deliver better experience for regular users. It’s also easy to imagine that AI will have a significant influence in the development of areas like voice interfaces, natural language processing, or gesture and emotion recognition. All this combined can redefine the way in which people with disabilities interact with the web. The most interesting part is the fact that we’re at the very beginning of this fascinating journey. 

2988 HC Digital Transformation 476X381
Michał Łapeta Team Leader Senior UI Developer

He works as Senior UI Developer at Objectivity and is responsible for delivering visual layer of web applications but also for making digital products accessible. Michał obtained IAAP certification and as a web accessibility enthusiast, he’s always keen to share his knowledge both in the company and with a broader audience through social media channels or conferences. Michał is passionate about new technologies and outside the office hours, he’s an aviation enthusiast.

See all Michał's posts

Related posts

You might be also interested in

Contact

Start your project with Objectivity

CTA Pattern - Contact - Middle