Downloadable Accessible Template and Style Sheets
Site not hosted on www.un.org
For your convenience, we have prepared an example of accessible site that you can download from this page. In the site, you will find:
- a complete, editable template, including:
- background image and color for the page,
- the required skiplinks to the two navigation areas and to the page content,
- a language bar (commented out),
- a banner using graphic elements with hidden text,
- horizontal and vertical menus,
- a footer area;
- a few style sheets:
- global_en.css: a "global" style sheet, resetting the styles of all browsers' default settings and reapplying some basic styles for those settings, as well as defining some styles that are common on all html pages,
- accessibility.css: a "local" style sheet, defining the special styles needed for the particular site you are working on,
- print.css: a style sheet redefining some styles to be better displayed once printed,
- handheld.css: a style sheet redefining some styles specifically for handheld devices, such as cell phones;
- the images as used for the site on website accessibility;
- the lists and sub-lists for the menus in an "includes" folder;
- a javascript, used to give the same height to the left-side menu and the content area, so the background color of the menu will stretch to adjust to the height of the content area;
- and three pages created from the template:
- two pages attached to the template (index.shtml and help.shtml): if you are using Dreamweaver, you will be able to create new pages from the template once you create a local site using all files downloaded from one of the zip files below;
- and one page detached from it (page2.shtml): if you cannot use templates on your software, you can still use the structure from this example.
You may however want to check with the office responsible for the website management to see if your site uses a global style sheet that you should have, and also if the javascript already exist on your server. If so, you will need to adjust the codes in the template to insert the proper files. Otherwise, you can proceed to create your new pages, attached or detached from the template.
In order to facilitate the maintenance of your site, we suggest you keep the structure as provided to you:
- save the images you need for your site in the "images" folder;
- save any additional, local style sheet in the "css" folder;
- save all your PDF files in the "pdf" folder;
- save all files you need to be included on your pages (menus, footer, etc.) in the "includes" folder.
Once you are ready to launch, you can create on the server a new folder with the same name as on your local drive, and upload all your files and subfolders in that folder.
We would like to hear from you!
We would be really grateful to hear from you regarding this downloadable site. Please send us a message via our feedback form to let us know if you find it useful, what you like about it, and what you would like to see us improve, or if you have posted a new site based on this template.
Thank you in advance!