Handling JavaScript-disabled Browsers

The following is republished from the Tech Times #159.

Previously, I mentioned that you should consider three main groups of people when adding JavaScript to your site—users without JavaScript capabilities, users without a mouse, and users of screen readers—and that supporting each of these three groups becomes progressively more difficult. In this post, we’ll focus on the first group, and discover how very easy it is to accommodate them with the right approach.

In the introductory JavaScript book I’m currently co-writing, one of the first big examples is an accordion control. This user interface element collapses a series of content blocks so that only their headings are visible, and then allows the user to expand the blocks one at a time by clicking on the headings.

Handling JavaScript-disabled Browsers

This is a great example of how the right approach can accommodate users without JavaScript support (or with JavaScript disabled) with no extra work.

It can be tempting to write the CSS code of your page so as to collapse the blocks of the accordion control, and then write JavaScript code that will expand the blocks on cue. But disable the JavaScript, and users are left with the collapsed blocks and no way to read them!

In the past, conventional wisdom advocated an approach called graceful degradation, which would involve adding extra “fallback” code for users or browsers that were not able to handle the fancier bits of your page.

The graceful degradation approach to the accordion problem, for example, might be to put an expanded version of the accordion’s content between <noscript>...</noscript> tags, so that browsers without JavaScript enabled would display the expanded content. This is extra work, and is the sort of thing that really sours developers on accessibility.

Today, we understand that this is the wrong approach.

A much better way to solve accessibility issues is through progressive enhancement, where you start by building something that works in the simplest, most accessible environment (in this case, a browser with JavaScript disabled), and then progressively enhance it with features that will improve the user experience in browsers that support them, or silently fail in browsers that don’t.

What this means for our accordion is that we should write the CSS code of the page so that the contents of the accordion are completely visible.

Handling JavaScript-disabled Browsers

The JavaScript code will then collapse the accordion as soon as it loads, but in browsers with JavaScript disabled the accordion will remain expanded, and the content may be read without difficulty. And there is no need to write any extra code or spend any extra time to achieve this—it’s simply a matter of approach.

Next time, we’ll look at how to make sure this accordion control can be used by people who are either unable to use a mouse, or who simply prefer to navigate by keyboard. This will prove a little more challenging, but is still quite practical in most projects.

If you’d like to read more about graceful degradation and progressive enhancement, I highly recommend SitePoint regular Tommy Olsson’s article on the subject at Accessites.org.

Replay

Category: javascript Time: 2007-02-23 Views: 1
Tags:

Related post

  • Should I still make my site work in non-javascript capable browsers? 2012-05-17

    Apparently less than 1% had javascript off in 2010: http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/ So is it worth it to still support browsing without javascript? For example: Form submissions. Normally I

  • Should I bother to develop for JavaScript disabled? 2010-12-13

    This question already has an answer here: How important is graceful degradation of JavaScript? 28 answers Should I bother to develop for JavaScript disabled? I feel that my time is better spent developing for the majority. --------------Solutions----

  • Using IIS7 Logs to determine how many users have JavaScript disabled? 2010-12-28

    I know that I can get OS and\or browser settings types from the IIS logs, but is there a way to also see if a user has JavaScript disabled? I am looking for a to determine how many of our users are not running JavaScript. Thanks, ZK --------------Sol

  • Internet Explorer 8/9 javascript disable, need to enable back 2011-02-17

    Dear all, This is not a programming issue, just want to ask any one having Internet Explorer Javascript disabled issue. I try go to Internet Option enable everything, including javascript restart it. But all the javascript still disabled. I go to jQu

  • Has the time gone to think about user with JavaScript disabled in browser? 2011-12-29

    Possible Duplicate: Should I Bother To Develop for JavaScript Disabled? In this Modern time of HTML5 API jQuery Modernizr HTML5 Shim Respond.JS Google Chrome app store Canvas Has the time gone to think about user with JavaScript disabled in browser?

  • What's the best approach to handle javascript/ajax code in a project? 2013-07-20

    In a general sense, for medium/big projects, what's the best way to handle javascript/ajax code? Is it better, to have a script file where to put each script or, to add the script directly into the html file between tags? I know it doesn't make any d

  • Why is JavaScript disabled in the Tor Browser Bundle? 2013-08-14

    Didn't Tor create a local socks proxy? Why doesn't all the Web traffic go over this local socks proxy and why is JavaScript disabled in the Tor Browser bundle? If you would connect with firefox for example to a normal socks proxy, could javascript st

  • Anyone still using JavaScript disabled? 2014-08-22

    This question already has an answer here: Can we ignore visitors without JavaScript enabled? 6 answers Is there anyone left that's not using JavaScript? When designing websites, is it worth to care about that fraction of visitors? At least in Firefox

  • Form submission in javascript disabled Browser 2016-01-31

    I have a drop-down which will display the phone numbers on click of which I need to submit a form in JavaScript disabled browser. Currently I am doing the following stuff: <form action="/servlet/myservlet" method="GET"> <selec

  • How to disable injection JavaScript into browsers? 2015-08-20

    I am using Kaspersky Antivirus and recently I've updated it to Kaspersky Total Security 16.0.0.614. When I checked my browsers I realized Kaspersky injects remote JavaScript into all my pages even secure ones. This version of KTS is keep injecting ma

  • Is it safe to visit a malicious site with javascript disabled, in Linux? 2010-08-30

    What can happen if I visit known malicious site using Linux with javascript, java and flash disabled. Is there an attack vector that can take place regardless? --------------Solutions------------- There still could be vulnerabilities in the browser c

  • Server side validation if Javascript disabled on user's browser 2013-01-12

    I have developed a small form with 3 input type = text and one input type = submit button. The end user fills the form and submit it, but no data inserted into backend List. (probably empty form is submitted). I get to know that Javascript is disable

  • Javascript Disable event receiver firing 2015-05-05

    Are there any ways to disable event receiver firing by javascript for a list during updating data? --------------Solutions------------- Check the below code if it solve your problem. you want to update the current item metadata or other item metadata

  • How to debug javascript in browsers that don't have a console interface? 2015-11-04

    It's unbelievable but my company is still building web app on IE 6. Although the online dashboard for IE 6 is limited in functionality, I've found extremely difficult to debug anything on it. It's probably the most challenging task in my career, and

  • how to reenable back javascript disabled copy and paste function in textbox? 2016-01-17

    As a javascript programmer , I do know certain ways to disable those features like copy , paste , right click menu , But is there anyway to re-enable it? I mean like hack the browser to enable back those features? This is a sample of disable copy pas

  • How should I handle javascript-files in express.js? 2016-01-28

    I use express.js to create a mostly front-end application. I want to run some javascript but can't find a good way to handle it in the docs. Is there any solutions out there to merge, compress, gzip and primarily include javascripts? In middleman for

  • Javascript disable enter on form not working 2016-02-02

    I am trying to disable submitting a form when the user presses enter on input fields, but I can't seem to get anything to work. The latest script I've tried was adding this to the head: <script type="text/javascript"> $(document).ready(fun

  • Safari 9.0.3: Stalled with JavaScript enabled. Works fine with JavaScript disabled. 2016-02-15

    On one of my Macs (OS X 10.11.3), Safari 9.0.3 is unusable if JavaScript is activated: Google Search results are not clickable, and Safari presents you a virtually forever spinning beachball no matter which URL you open. Disable JavaScript and Safari

  • JavaScript - disable multitouch 2016-06-10

    Currently I'm working on a tool which is going to be used in client stores. I'm building this project with HTML, CSS and JavaScript. The device I'm building it for is a 1920x1080 touchscreen controlled by a Brightsign (https://www.brightsign.biz/) un

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.276 (s). 13 q(s)