Disability on the Internet: JavaScript Inaccessibility

From the very beginning of history, disabilities have been an established part of society. Whether it’s a man who’s been deaf from birth or a woman who lost a leg in an accident, we’ve shown an ability to adapt. Prosthetic limbs, hearing aids, accommodations in the workplace; the world has the capability of moulding to the needs of its inhabitants. So why is it that so many disabled people are being left behind in the modern age?

Since the invention of computers, the world has been on a rapid trajectory of growth. In the past 20 years alone, we’ve seen the upgrade to 4G, social media within arms reach, and data storage being moved to the Cloud. 

Every leap forward has sent us hurtling into a world unknown to those just a generation before. 

In 2019, 82% of the UK population was in possession of a smartphone, a statistic projected to grow to 93.7% by 2025. Clearly, technology has been fully integrated into our society; an extra limb we’d find it hard, if not impossible, to live without. 

However, for a significant part of the population, the rapidly accelerating train of technology has left them at the station. 

A study in America found that only 62% of its disabled population owned a desktop or a laptop, compared to 88% of its non-disabled population. Various issues, like websites being inaccessible to web readers or videos not containing closed captions, means that disabled people have been shut out of one of the largest moving parts of modern culture. 

In 2020, 98% of the world’s websites were found to be inaccessible in some way. Some changes are simple; certain colour combinations can be avoided for those who are visually impared, alt tags can be added for ease and clarity. Other problems may be baked into the web itself; a lack of coding regulations has made it hard for web readers to visit some websites. In fact, 60% of screen reader users felt web accessibility was actually getting worse. 

So what can we do about it? 

Before going any further, it is important to note that being 100% accessible to 100% of people might not be an option for all companies. Small businesses, for example, may have a hard time funding the necessary adaptations that need to be made for full accessibility. Some changes, however, are easy to implement and should be put into place wherever possible. 

The following are some basic needs that should be met: 

  • Add alt text to all images
    • Alt text is a caption that tells a reader what the image looks like. When using a screen reader, the text is read out loud. When an image fails to load, the text is put in its place. It also, if that isn’t enough, helps to improve your site’s SEO.
  • Use easy to see colours
    • Those with colour blindness will have an easier time navigating your website if you choose contrasting colours. This especially applies to text; making sure your text stands out against the background should be the highest priority. After all, if nobody can read your content, you’ve fallen at hurdle one. 
    • Choosing the right colours also applies to navigation. If your website relies solely on colours to differentiate between navigational choices, it will be harder for some people with disabilities to make their way around your site. 
  • Make it keyboard-friendly 
    • The best way to test if your website is usable without a mouse is to, you guessed it, use it without a mouse. If there are areas you can’t get to, then those are pages unavailable to people with visual impairments. 

As a recruitment agency that specialises in the tech industry, we’d like to shine a light on some of the areas where programming can be a detriment to accessibility. 

Though HTML is the first line of defence for website accessibility, both JavaScript and CSS have an important role to play. They both have the ability to increase accessibility, but, if used wrong, can also break it. 

Adopting best practice advice when using CSS and JavaScript will significantly improve your chances of maintaining accessibility within your documents. 

Let’s focus on JavaScript

When relied on too heavily, JavaScript can go from a wonderful source of interactivity to causing all kinds of accessibility issues:

  • Hidden content
    • Much like what was said above, this is content or functionality that isn’t accessible to assistive technologies
  • User control
    • Lack of control from users for content changes
  • Confusion
    • This could be activating events a user might not be aware of, or disabling any normal functionality in a browser
  • Navigation
    • This is the inability to navigate a website using a keyboard or assistive technology 

Say you’re creating a website. There’s a box of information that’s needed. It’s important, so you code it in JavaScript to be interactive, to get bigger when a mouse is rolling over it. The colours are red, flashy. A sighted person would see this with no issue. Problem solved, right? 

Unfortunately, no. Overly complicated JavaScript can get in the way of a web-reader’s ability to, well, read. It has to make sense of the code then relay it back to the user. If the code is flashy, complex, and mostly unnecessary, it might be better to take it out. 

For a reader to make sense of a site, clear and to-the-point code will always be better. That doesn’t mean that you have to scrap any use of JavaScript, but you should ask yourself; does this add to the user’s experience enough that you’re willing to potentially cut off a percentage of your viewership?

When building your site, using <label> elements is an easy way to boost all accessibility. When elements are labelled clearly, and unambiguously, assistive technologies will thrive. 

All in all, providing a means of accessing your content helps level the playing field of equity in a world that’s changing so fast. We don’t have to slow down the train, we just have to make room in the carriage.