Health and Safety
Executive / Commission
Styleguide
The HSE Web standard uses a standard set of Javascript functions to provide a richer user experience, whilst maintaining accessibility. These scripts adhere to the principles of "progressive enhancement."
Any new scripts MUST adhere to these principles and not conflict or break existing scripts.
The HSE Web standard uses a Javascript file which is linked at download time. Most users will cache the Javascript file, so the impact on overall download speeds is reduced, whilst maintaining functionality.
If the User Agent (i.e. browser, PDA, screen-reader) has javascript disabled, or does not support javascript at all, the pages are designed so that they still work, and are still accessible.
This functionality is divided into 2 categories:
Designers using HSE templates do not need to make any direct invocation for the following functions - they will silently work on the User Agent if javascript is enabled.
The left hand column is scanned for nested lists. If nested lists are found then these are collapsed behind clickable horizontal arrows, unless a member of the sublist is the current page. In that case the list is opened and marked with a clickable downward pointing arrow.
The current page is also highlighted.
The advantage of this system is to compress a lot of navigation options in a small space - enhancing the navigation experience and reducing the maintenence overhead.
If Javascript is disabled in this case, then the whole navigation list is shown in its original expanded state, no functionality is lost, and accessibility is maintained.
AAA compliance recommends a text default in every text field. However to a browser user this is not especially usable. The solution is to use Javascript to clear the contents of the field when the user enters.
Every file is scanned is for text boxes. The Javascript is written for each box so that when the user enters, the contents are cleared.
This would be a labourious process to code by hand, but it is automatic in the HSE web standard.
Due to limitations in browser handling of CSS, the styling of form elements is too blunt for real world usage. The HSE web standard overcomes this by automatically applying CSS classes to form elements when a page is loaded.
e.g. If a form has the class "formpretty", all radio buttons that are part of this form will have the class "formprettyradio" automatically applied to them. As this class is defined in the HSE web standard, the radio button takes on the appearence that is desired, with no need for designer intervention.
When a page is deleted we often want to redirect a user to a new page. All you need to do is add a link to page something like this:
The page you are looking for has moved, please see our <a href="file.htm" class="link-redirect">new version</a>.
The Javascript will redirect the user after 0 seconds, none Javascript devices will require the user to click on the link.
These functions are structured in such a way as to allow richly featured pages to be created without comprimising accessibility. these require the 'advanced javascript' file to be loaded.
Tickers are now deprecated from our standards and no longer used [30.09.06].
Tickers are coded into the subnavigation (and only the subnavigation at the moment) as a list, with class "ticker". When the page is loaded, the list is turned into a ticker automatically by the javascript.
In the event that Javascript is not enabled, the ticker will just render normally as an inline list.
<ul class="ticker">
<li><a href="ebulletins.htm">Sign up for free agriculture
e-bulletins</a></li>
<li><a href="assessment/index.htm">Free Software:
Self-assessment tool</a></li>
</ul>
Tables can be striped or sortable, and are covered in more detail on the Tabular data page.
Countdown clocks should be used to advertise a forthcoming event.
A countdown clock can look like this:
The code for a countdown clock is as follows:
N.B. There is no requirement to put the countdowns in a list. Any element can be assigned a countdown.
When a countdown is completed the page reloads. If the countdown is over before the page has loaded, then the countdown element is hidden.
Note the use of the "noscript" class to provide alternatives for non-javascript browsers.
On pages like the construction homepage or the news centre homepage we use Javascript to populate the content with the latest items from the blog. Please see the "clever links" page to see how this is done.
The drop down menu that appears on the homepage and microsite homepages is written as an unordered list. Javascript rewrites this into the page as an option select list.