JavaScript Dependent Navigations

In our review of websites for corporations across the US, we’ve seen a large number of navigation systems that are completely dependent on JavaScript to function. While it’s true that most people browsing the web have JavaScript enabled (about 98% of individuals), it’s also true that this dependence creates barriers for the disabled in using the site and for Google in indexing the site.

From the “Common Problems with Corporate Websites” series.

In our review of websites for corporations across the US, we’ve seen a large number of navigation systems that are completely dependent on JavaScript to function. While it’s true that most people browsing the web have JavaScript enabled (about 98% of individuals), it’s also true that this dependence creates barriers for the disabled in using the site and for Google in indexing the site. Fortunately, we’ve reached a point in website development that building a drop-down navigation fully with CSS is not difficult and is widely supported. Then, JavaScript can be used to enhance the experience.

Disabled Users

If there are users accessing your site with a screen reader, requiring JavaScript may be creating a problem for them in navigating to your content. Some of the more modern screen readers are able to interpret JavaScript, but this is a complex feature to add. Also, the more we push the boundaries with JavaScript, the more difficult it is to build systems that can crawl a site where these advanced JavaScript techniques are used.

It’s certainly not a truthful blanket statement to say that all JavaScript-dependent navigations are inaccessible to those with disabilities. However, it is much easier for these systems to manage a non-JavaScript navigation.

Googlebot

One of the most critical issues for any company on the web is being found by search engines (most prominently, Google). If this is a concern of yours (and it should be), you need to understand what barriers you’re constructing when forcing a dependence on JavaScript—especially in the context of your website’s primary navigation.

In general, if the content for your navigation is in the markup for your page, but shown or hidden with JavaScript, then Googlebot should be able to find the links. The same is true for some screen readers. To be safe, you should test your navigation with JavaScript turned off and verify that it is functional. If you can navigate the site with JavaScript turned off, then it’s most likely that Googlebot can as well.

Skip to Content

One other helpful, and very easy, feature to add to your site is a “skip link.” This is a link that points to an anchor further down on the page where the content of the site begins. It’s helpful for visually impaired users because, without it, their screen reader will read the entire navigation tree (assuming it’s before the content on the page) before they can get to the unique content for that page. The “skip link” allows those users to decide if they want to hear the navigation or skip straight to the content.

In Conclusion

Fortunately, the tools are readily available to build accessible navigation systems with little to no downside. There is no excuse to rely on JavaScript for your website’s navigation. Doing so only causes problems and there are simple solutions to keep your content available to as many people and devices as possible.