Code for Everyone: The Role of Accessibility in Tech and How We Can Do Better.

Introduction

I’ve been a front-end developer for enterprise applications, and only recently has accessibility become a more frequent topic in casual discussions. Over the past two years of freelancing, rarely has a client asked about the accessibility of their website—and that needs to change. Fortunately, I’m noticing positive signs; discussions around accessibility are becoming more common. In a few recent interviews, interviewers have specifically brought it up, suggesting that the tide is finally turning.

I’ve spent a good amount of time researching this topic and wanted to share my findings in this blog. Hopefully, this serves as a valuable resource, encouraging all of us (developers) to incorporate accessibility best practices into our daily work. But before diving into recommendations, let’s look at some statistics to see where we stand as a community.

WebAIM, a nonprofit organization, has been working to make the web more accessible for people with disabilities. They offer a free toolkit that helps web developers assess how their websites are perceived by users with disabilities and provides recommendations for improvement. WebAIM also publishes an annual report auditing the top 1 million homepages, highlighting common accessibility issues and offering insights to help create more inclusive websites. Let’s take a look at some of them:

WebAIM findings:

The WebAIM Million 2024 report analyzed the accessibility of the top 1,000,000 home pages and found:

• Detected Errors: A total of 56,791,260 accessibility errors were identified, averaging 56.8 errors per page—a 13.6% increase from 2023, which had 50 errors per page.

• Home Page Complexity: The average number of elements per home page rose from 1,050 in 2023 to 1,173 in 2024, marking an 11.8% increase. Over the past five years, page complexity has grown by 50%.

• WCAG Conformance: Approximately 95.9% of home pages had detectable WCAG 2 failures, a slight improvement from 96.3% in 2023.

Specifically, on WCAG conformance, let’s see what these are(source: report):

Let’s go through all of them to understand what they mean and their possible solutions.

• Low contrast text: These errors can make reading text difficult for people with low vision, color blindness, or cognitive impairment. WebAIM recommends maintaining a contrast ratio of 4.5:1 for text content on webpages. WebAIM provides us with a contrast checker which can determine this ratio once we enter the foreground and background colors.

• Missing alternative text for images: For a web developer, this would be pretty obvious on what the fix should be. Possible fixes:

  Specify alt text for images:

    <img src="team-photo.jpg" alt="Team photo at an annual conference" />
  

  For icons, mention the purpose

    <img src="search-icon.png" alt="Search" />
  

  When displaying a complex presentation in an image like a chart, use `aria-describedby` as follows:

    <img src="sales-chart.png" alt="Sales growth chart" aria-describedby="chart-desc" />
    <p id="chart-desc">This chart shows a 25% increase in sales from Q1 to Q4 in 2024.</p>
  

• Missing form labels: This error shows up when there is no <label> element used for a field and neither any adequate description of the form fields using <aria-label> or <aria-labelledby> HTML elements. To give you a context, when screen readers read a form on a webpage, they are looking for what each form field represents. It could be a name, address, zipcode etc. and is usually highlighted using a label or placeholder text in the case of an input field. The absence of all such fields would make it difficult for the screen reader to guide a disabled person and hence result in loss of interest from the end user. To fix this issue, a developer should use <label>, <aria-label>, or <aria-labelledby> HTML element. Examples below:

    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
  

  Using <aria-label>

    <input type="text" id="username" name="username" aria-label="Username">
  

  Using <aria-labelledby>

    <p id="username-label">Enter your username:</p>
    <input type="text" id="username" name="username" aria-labelledby="username-label">
  

• Empty Links: Something as simple as the following can result in an error related to empty links:

    <a href="#"></a>
  

  There is no information about what the link does, so screen readers will conveniently skip over them. If it’s a placeholder link, one can do the following:

    <a href="#" aria-disabled="true" onclick="return false;">Coming Soon</a>
  

• Empty buttons: This error occurs due to no description being available and associated with a button. For e.x., let’s look at Swiggy, which is a popular food ordering website.

• As you can see, none of the buttons shown above in the screenshot associated with the food item has any description on it, and hence a screen reader won’t be able to guide a disabled person. The fix would be to attach <aria-label> with the button so the screen reader can read it out.

    <button aria-label="Burger">
        <img src="XXX" alt="Burger" />
    </button>
  

• Missing document language: Always include the language attribute in your HTML code. This helps screen reader to use the correct pronunciation

    <html lang="en">
        <head>...</head>
        <body>...</body>
    </html>
  

  One can also set language on a specific part of the website if it differs from main document specified.

    <html lang="en">
        <head>...</head>
        <body>
            <p lang="fr">...</p>
        </body>
    </html>
  

Other findings to improve accessibility:

• Use native HTML elements: It’s always a good practice to stick to using elements for the purpose they serve. For e.x. if you need a click functionality, use <button> or <a> over <div>. Using a <div> as a clickable element can confuse screen readers and come across as a regular container element, hence missing the intent. If one has to use <div> in such cases, use the `role` attribute on the div element so screen readers can interpret it correctly.

    <div role="button" tabindex=0>Click Me!<div>
  

• Use reduce motion flags: Windows and Mac OS come with a flag to reduce motion on websites. On a Macbook, go to Accessibility → Display → Reduce motion and enable it. This acts as an indicator to reduce the intensity of the animations on a website. To target such user sessions and to ensure they have a good experience, CSS can be used to customize the animation experience by doing the following:

    @media (prefer-reduced-motion: reduce) {
        animation: none !important;
        transition: none !important;
    }
  

Conclusion

I hope this page provided a clear overview of how to improve your website’s accessibility. As an online entity, it’s crucial to ensure that every visitor, regardless of ability, can easily understand and interact with your website. An online retailer, for instance, shouldn’t lose a customer simply because their site isn’t designed to accommodate users with disabilities. By prioritizing accessibility, we can create a more inclusive internet for everyone. Let’s work together to make that happen!