UCSF School of Pharmacy

Javascript

Although Javascript is enabled by default in most popular browsers, it also can be disabled by the user. People might disable Javascript because:

1. Javascript can be a security vulnerability. (One example: Vulnerability Note VU#713878.)
2. Javascript enables pop-up windows to appear.

Since you have no control over whether Javascript is enabled, consider whether it is really necessary before implementing it.

Web pages which use Javascript must function gracefully if Javascript is disabled or otherwise unavailable.

Use caution with Javascript and Document Object Model (DOM) features which can cause the following problems:

1. Browser compatibility problems, particularly in older browsers, and also in non-Windows platforms, which most Web developers forget or ignore. Is it acceptable for an unknown number of your site visitors to experience Javascript error messages on their first visit to your site?
2. Increased Web development, maintenance, and support costs, due to:
   1. browser compatibility problems (including creating and supporting multiple versions of your Javascript for different browsers or platforms)
   2. adding code to assure proper behavior when Javascript is disabled, and
   3. troubleshooting customer problems when such assurances have not been made or when browser compatibility problems arise.
3. Increased page download times, especially when you add a lot of Javascript code.
4. Usability problems, especially with visitors who may have Javascript turned off because of pop-up window advertisements or security concerns.
5. Web tool compatibility problems in which Javascript makes it difficult or impossible for some Web tools to work properly with your site.

   Example 1: Some search engine spiders ignore all Javascript, so if you've inserted significant data as Javascript it likely won't get indexed by all search engines.

   Example 2: Search engines and link checkers can't follow links created with Javascript, so underlying pages won't be indexed and won't be checked for links unless regular links appear elsewhere on the page.

6. Reducing or ignoring usability and accessibility and device independence in order to provide what is usually unnecessary interactivity:

   Example 1: If you've used Javascript to put new information in the status bar:

   1. How will the visitor know to look there for it (e.g., if using a large monitor)?
   2. If you are replacing what normally would have been a URL, what if the visitor wanted to see the URL to determine if the link went offsite or not?
   3. How is the new information made equally accessible to screen readers?

   Example 2: If I must mouse over various buttons to make new text appear...

   1. How do the buttons behave if Javascript is disabled or if a browser ignores all Javascript? Can the visitor still complete common tasks?
   2. Will the new text appear on the printout when I print the page?
   3. Will I still see the new text if I've clicked a link and then used the Back button?
   4. Am I able to see all the new text at once to make comparisons?
   5. Are you communicating to blind users what actions are required to reveal what new text?
   6. Will the new text appear as you expect in user agents other than those created for laptop and desktop computers?

Avoid Javascript for Form Validation

Instead of using Javascript for form validation, use server-side scripting for validation, since we have control of the server and since our site is not heavy with traffic.

Avoid Javascript for Hiding and Showing Information

Instead of using Javascript for displaying information interactively, put the information right on the page using proper information structures such as structured headings or data tables.

Avoid Javascript for Browser Detection

Our site automatically includes server-side browser detection. If you need functions to detect specific browsers, see /.stylesheets/agent.php for details. agent.php is automatically loaded by the template framework for every page, so you may use its functions as needed.

Avoid Javascript for Graphic Rollovers

Instead, use plain text or transparent GIF image links which include CSS pseudo-class behaviors by default. Avoid using text as graphics, which increases download times and reduces device independence. See Links for details. See Downloads for transparent GIF image link examples.

When Using Javascript

Some Web page requirements or Web applications may require Javascript and Document Object Model (DOM) features.

If you have such an application, it must be approved by the Associate Dean for Planning and Communications.

Go To: Interaction Design or Style Guide