JavaScript for some is the bane of web development technologies - but it should not be feared or hated. As long as proper practices are followed it will not have any affect on the accessibility or function of the website other than to enrich the user's experience.
Nowadays, most websites keep the design seperate from the content and structure by not having inline styles, and deprecated tags, but by instead defining the styles of different elements inside a CSS file. Similarly, this can be done with JavaScript to keep the behaviour of the site seperate as well. The following code is an example before it has had behaviours removed.; it currently contains some JavaScript to detect when the search field is clicked so that it can remove the default text from it if it still contains it. If other text is in there then it will ignore it and do nothing. The purpose of having default text in input fields is so that it conforms with one of the WCAG accessibility checkpoints. From a usability point of view it makes searching easier for the user if they do not have to clear the text first.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Example 1</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8" />
<link type="text/css" rel="stylesheet" href='styles.css' media="screen" />
<script type="text/javascript">
function clearText(obj, default)
{
if(obj.value == default) {
obj.value = "";
}
}
</script>
</head>
<body>
<div id="search_box">
<form id="searchBoxForm" method="post"
action="index.php?page=search">
<fieldset>
<label accesskey="4" for="sb_keywords">search</label>
<input id="sb_keywords" name="sb_keywords"
value="<<enter search text>>"
maxlength="255"
onclick="clearText(this, '<<enter search text>>');" />
<button type="submit" name="searchButton" id="searchButton"
title="Perform search.">go</button>
</fieldset>
</form>
</div>
</body>
</html>The above file is not how it is recommended for JavaScript to be used, and so from the above example a new file should be created (in this example I will name the file neo_scripts.js). This file will contain the following code:
window.onload = function()
{
var obj = document.getElementById('sb_keywords')
obj.onclick = clearText(obj, '<<enter search text>>');
}
/*
* This function will clear the default text ready for entry
*/
function clearText(obj, default)
{
if(obj.value == default) {
obj.value = "";
}
}After removing the JavaScript for the code, it will then need to be linked to inside the header of the page, and the JavaScript removed from the page. The result of doing this will resemble the following example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Example 1</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8" />
<link type="text/css" rel="stylesheet" href='styles.css' media="screen" />
<script src="neo_scripts.js" type="text/javascript"></script>
</head>
<body>
<div id="search_box">
<form id="searchBoxForm" method="post"
action="index.php?page=search">
<fieldset>
<label accesskey="4" for="sb_keywords">search</label>
<input id="sb_keywords" name="sb_keywords"
value="<<enter search text>>"
maxlength="255" />
<button type="submit" name="searchButton" id="searchButton"
title="Perform search.">go</button>
</fieldset>
</form>
</div>
</body>
</html>
