You are here:
- Manual
- Development
- Links and navigation
- Client-side scripts
Links and navigation: Links and client-side scripts
Sometimes links on a page refer to a client-side script function, a script that is executed in the browser; for instance, to open a new window or to display a menu. These links are often inaccessible to search spiders and visitors without client-side script support. However, web developers can show some consideration and apply a few simple rules.
- Client-side scripts as an expansion of a link.
Make client-side script functionality an expansion of the link. - Client-side scripts for creating a link.
If the link does not lead anywhere, do not confront the visitor lacking client-side script support with a non-working link. - Client-side scripts as a supplement to server-side functions.
If necessary or desirable, use client-side scripts as an extension of server-side functions.
More on the use of scripts can be found in the chapter Client-side scripting.
Client-side scripts as an extension of a link
If a link executes a script function that leads to a URL, make this URL accessible for visitors without script support as well. Often people encounter links that make use of scripts in the following forms, for instance, to open a window with a certain page.
Examples of links that make use of a script function incorrectly (HTML)
<a href="javascript:window.open('http://domain.nl/page', '_blank');"><a href="#" onclick="window.open('http://domain.nl/page', '_blank');">
These links will leave search spiders and browsers that do not support client-side scripts in the cold, because they expect to find a URL in the href attribute. This can be fixed with a simple solution.
Links that make correct use of a script function (HTML)
<a href="http://domain.nl/page" onclick="window.open(this.href, '_blank'); return false;">
Now there is a URL in the href attribute. All spiders and browsers that do not support client-side scripts will follow this URL and ignore the script line that they do not understand. Browsers that do support client-side scripts will execute the function and open the URL in a new window. Read more about the guidelines for Links and new windows.
When using client-side script in combination with a link: make the script functionality an extension of the basic functionality of the link.
Guideline R-pd.8.5
In most modern browsers the onclick attribute(onclick event) is interpreted as an action which the visitor performs in order to follow the link containing the attribute. This can involve a mouse click or pressing a key. Thus, visitors who depend on keyboard navigation can also use this script functionality. If this visitor uses a browser that does not support onclick, he can still follow the link, albeit without the additional functionality.
Another example: a drop-down menu
This extension of link functionality is ideal for a drop-down menu: while the main link does not need to lead aynwhere, on the click of a mouse it drops down into a submenu instead.
If scripts are supported, this will cancel following the link and execute the function that opens the submenu instead. However, if scripts are not supported, the browser will simply follow the URL in the href attribute.
If this URL is one of the locations referred to in the submenu, and the submenu can be found in drop-down form at this location, a highly accessible navigation menu has been created.
Client-side scripts for creating a link
If a link is not meant to lead anywhere, but executes a function, for instance scaling font size or applying a certain style sheet, this is of little use to visitors without JavaScript. Therefore, these visitors should not be confronted with a non-functional link. This can be achieved by using a structure like the one below.
<a href="/enlarge.htm" onclick="enlarge();return false;">enlarge</a>
If the file enlarge.htm contains the following text, "Your browser does not appear to support scripts. Read more about <a href="/adjust.html">adjusting the font size yourself in your browser</a>", the link is also useful for visitors lacking script support. The ‘return false;’ in the example above ensures that the page "/enlarge.htm" is not loaded when a visitor clicks on the link.
If script support is needed in order to be able to use the page, the web developers should consider an alternative form: Client-side scripts as a supplement to server-side functions.
When using client-side script in combination with a link: if the link does not lead anywhere, do not confront the visitor without support for client-side script with a non-working link.
Guideline R-pd.8.6
Client-side scripts as a supplement to server-side functions
If scripts are not supported, a link with script functionality can also revert to functions that will be executed on the web server. If this concerns critical functionality (in other words, if the usability of the website depends on it), this is even a necessity.
When using client-side script in combination with a link: if necessary, use client-side script as an extension of server-side functions.
Guideline R-pd.8.7
On the other hand, client-side script could improve a server-side function that is already present. Take, for example, a link for changing the style sheet:
A link to a server-side script, extended by means of client-side functionality(HTML)
<a href="index.php?stylesheet=4"
onclick="changeStylesheet(4); return false;">If script support fails, following the link will result in a page that loads with an alternative style sheet. In this example, this is caused by a PHP function on the server. Upon following the link, the page is refreshed before the result becomes visible.
If client-side script support is available, the script will execute the function changeStylesheet which immediately converts the page to an alternative style sheet, without having to refresh the page from the server.
This type of script functionality often occurs in relation to forms. A function checks the validity of the form before sending it. If scripts are not supported, the form is sent and a server-side function does al the hard work. This method relieves the server. Moreover, visitors with script support a rapid response if they fill in forms incorrectly. The form remains accessible.
