Using Drupal and JavaScript for Accessibility

JavaScript and screen readers have an interesting relationship. For years, there has been a perceived conflict between the programming language and the tools used to make websites more accessible.

That perceived conflict is just that — perceived. In reality, there’s no reason why the two can’t work together to make a more powerful product for users to engage with.

Before I go too far into this, let me provide a brief intro (or review) of what exactly JavaScript is. When a web page is first accessed, there is a lot of content that is loaded. As the user interacts with the page — be it clicking a button or scrolling to a new section — the JavaScript is in the background responding to what the user is doing and changing the content on the page accordingly. JavaScript is what powers those dynamic interactions.

Now in the past, JavaScript and screen readers didn’t get along very well. Screen readers, at their most basic level, are just a piece of software that reads content. That software wasn’t able to process anything that was happening via JavaScript. For example, if a user clicked on a button to expand an accordion of content, a sited reader would see the new content appear, but the screen reader wasn’t aware that something expanded.

The solution many developers resorted to, at that time at least, was to make sure the site still functioned correctly even if JavaScript was disabled. There are two fundamental flaws with this “solution,” though. The first is that in today’s day and age, almost every website is pretty heavily powered with JavaScript, and frankly there are plenty of sites that just wouldn’t do anything if JavaScript is disabled.<

The second flaw is actually the bigger issue, because it essentially assigns the blame to screen readers. Screen readers are not the problem, and they haven’t been for a while. Even back in 2012, 98.6% of screen readers had JavaScript enabled. What that means is JavaScript does not need to be disabled for individuals using screen readers to properly interact with a website.

With that in mind, developers should no longer be focused on how to make their content accessible. Instead, developers should use JavaScript to enhance accessibility while still making sure they’re coding a site in a proper way so that a screen reader can process it correctly. One of the best ways to do that is by using ARIA tags and attributes.

ARIA (which stands for Accessible Rich Internet Applications) tags and attributes  communicate the state or role of certain chunks of a page’s code to the screen reader. These tags and attributes can be impacted and changed by JavaScript as a user is interacting with a page.

Here are a couple of examples:

  • ARIA live regions provide the ability to alert the screen reader when content has been updated. With that in mind, imagine you’re visiting an online store that has a page with your shopping cart. Your cart currently has one item in it, but you decide you want two of those items, so you push the arrow button to change the item number. Sighted users see this with ease. By putting the cart section of the page in an ARIA live region, users using a screen reader would automatically be alerted of the change. 
  • Imagine the page you’re visiting has a piece of content that’s hidden initially, and that only appears once a button has been pushed. Again, this is something a sighted user won’t think twice about. Screen readers, on the other hand, need the ARIA-expanded attribute to alert them whether a piece of content is visible or not visible. Again, when that change is made, the user of the screen reader will be alerted.

Drupal 8 makes it easier than ever before for developers to factor in accessibility as they put together a website. The latest core installment has a number of accessibility-minded features, including:

  • Alternative text for images
  • HTML 5 elements for more semantics
  • Inline errors on forms
  • Tabbing order
  • Hidden, invisible and on-focus elements
  • Aural alerts
  • ARIA markup
  • jQuery UI

You can read about all of these updates in this post from Rich Lawson, our Chief Technology Officer here at Duo.

Now, I’ve heard a lot of developers say that it’s really hard to build a website properly and make it accessible. I’ve heard it costs more money. I’ve heard it takes more time.

All of these statements are true. And it’s an investment worth making.

Nearly 2.5% of adults have reported having a visual disability, and depending on what your target audience is, that number may go as high as nearly 6.5% (if you have an older audience).

We as developers have a responsibility to make our products as accessible as possible. And now, we can use JavaScript to make that happen.  

CTA link generic

Ready to start a conversation?