Customization of the Personal Savings Calculator

Background

The original calculator worksheet is a downloadable spreadsheet, originally provided by the Massachusetts Library Association. (This spreadsheet requires either Microsoft Excel or the free Excel Viewer.) The spreadsheet was adapted for the Web by Chelmsford Public Library.

For more information

• Savings Calculator
• How these figures were calculated
• Feel free to link to this calculator for patrons in your library's service area.

If You Wish to Customize

You should have some knowledge of HTML and how to read JavaScript to be sure all necessary custom changes are made and match to work. You do not need to understand all the accessibility comments, but just realize why there is some extra code and that it should be remain. Coding for accessibility ensures people using screen readers can access this calculator.

How It Works

The calculation part is a form that calls in a JavaScript with the submit button, in this case named "Calculate the Value of Your Library Use."

Beginning Code

Form:  Leave as is.

Table for easier reading

Note

class="bg" is another special custom style (external CSS file) that changes the presentation formatting to certain colors and padding in the headers and text. You could style manually, although using CSS is better.

For Accessibility: Add a summary to this data table or a caption. You do not need to use both, although you can (as done here). Header row is coded as a "header"- <th>, not just a normal row<tr>.

Form Information

Below is the first row of information in the form (words below were made bold only to see them easier here). Note the accessibility form label: <label for="books"> before "Books Borrowed" and end tag </label>

Script

The line in the script that corresponds to the books borrowed line above:

Note: If you want to change the value, this is where you do it.

Important: If you change the name of a library service in the form itself, you must come down and change it in the script to match - three different places above if you changed the word "books".

Processing The Script

A button "Calculate the Value of Your Library Use" calls in the script, onclick="doCalculator ()". (Onclick is considered enough today for accessibility although some test tools will show failure and say redundant input mechanisms are required. Some current accessibility standards are old and are being updated.)

Note tabindex: This attribute specifies the position of the current element in the tabbing order for the current document. Tabbing order defines the order in which elements will receive focus when navigated by the user via the keyboard. Specifying a tab index is not required for accessibility guidelines, but it can make a page more navigable for disabled users when the layout is complex, or the default tab order is unusual.

The tabindex was in the original document, so it was left in.

Accessibility: Noscript tag

At the bottom after the script tag is closed, add a noscript for accessibility for those who cannot use the JavaScript. Pointing to the Excel spreadsheet offers an alternative.