JavaScript and Accessibility. Pt. 1. | 2

[previous]

JavaScript and Accessibility. Pt. 1

Classical Techniques; How to Fix Them

Let’s analyze a few classical JavaScript design methods to see why they don’t work, then find a way to approach the ideas with accessibility in mind.

Opening a New Window

Opening a new window is among the most common of classical ideas. There are many classical methods for this idea; most have shortcomings of some kind, often in the HTML rather than the JavaScript itself.

The Script.
<script type=”text/javascript”><!—
  function openWin(url, name, props){
    var w = window.open(url, name, props);
}
//--></script>

The HTML.
<a href=”javascript:openWin(‘page.html’, ‘myWindow’, ‘width=400,height=400’)”>Click here</a>

This JavaScript code is acceptable, but there’s no need to run the function through the HREF attribute. This will cause problems, because if the user has JavaScript disabled, the link won’t work. Also, the text within the A tag says, “Click here.” If you don’t know what this link is supposed to do out of context, then you’re using the wrong text to describe the link’s action. Following our order of questions: the script is practical; it cannot be done without scripting (JavaScript is the best choice for a scripting language because of its universality, whereas other scripting languages such as VBScript only work in a specific browser). This won’t work without JavaScript, so we need to solve that problem.

<a href=”page.html” onclick=”openWin(‘page.html’, ‘myWindow’,
‘width=400,height=400’); return false”>Open page.html</a>

The above method solves all of the problems. If JavaScript is not available, the browser will go to page.html. If it is, a new window will be opened. The “return false” statement is necessary, because it stops the browser from going to “page.html” and opening a new window as well. We also changed the text within the A tag. We can make this more user-friendly by saying “in a new window” if the visitor has JavaScript enabled. We can do this by adding a “document.write” statement – visitors without JavaScript just won’t see it. This is because JavaScript will generate the text.

<a href=”page.html” onclick=”openWin(‘page.html’, ‘myWindow’,
‘width=400,height=400’); return false”>Open page.html<script
type=”text/javascript”><!—
document.write(“ in a new window”);
//--></script>.</a>

This solves the problem and is user-friendly.

Button, Button, Who’s Got the Button?

Here’s another common issue. We use buttons to add functionality to our site. Let’s say you want to run a function when you click a button. Classically, it may look something like the following:

<FORM>
<INPUT type="button" value="Hello, World!" onClick="hello()">
</FORM>

The problem with example 2 is that the button has no action if JavaScript is not enabled. Also, the FORM has no action or method. If we want to use JavaScript to run a function with a button, we must check its vitality. Can we omit this button, and still use the page without any problems? Since we don’t know what this function does, we cannot tell, but we do want to solve the problems we can see. As an example, let’s assume that this brings up an alert box with the current date. Basically, we just don’t want non-JavaScript users to see this form. They don’t need it. How can we do that? Let’s use document.write.

<script type=”text/javascript”><!—
  document.write(‘<form>’);
  document.write(‘<input type=”button” value=”Hello, World!” onclick=”hello()”>’);
  document.write(‘</form>’);
//--></script>

Suppose, though, that we want to give the date to non-JavaScript users. How could we show the non-JavaScript users, but not those who do have JavaScript? Luckily, the NOSCRIPT tag was invented for browsers without JavaScript enabled. We can use the document.write method and NOSCRIPT tag as inverses of each other. To give the current date without JavaScript, you must have some sort of server-parsed web page, which dynamically creates its content. In other words, there are cases when alternate content is generated through your server. Since this article is focusing on JavaScript, I won’t go into the basic definition of a server-side language. If you are serious about web design, though, you should buy a domain and some reliable hosting with server-side languages available.

<noscript><p>The date is [insert date code here].</p></noscript>

Next week, we're going to cover issues concerning Form Validation and Rollovers.

About the Author

Jonathan Fenocchi is a Web developer who primarily works in the fields of Web Design, client-side scripting, and PHP scripting. His web site is located at: www.cmmwebdesign.com

[previous]

Created: March 27, 2003
Revised: February 14, 2005

URL: https://webreference.com/programming/javascript/Jf/column8/1