Downloadable Accessible Template and Style Sheets
Site 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,
- the new, site-wide branding bar,
- 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;
- 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 should create your pages in the folder called "mysite" (or another folder at the same level of the hierarchy). 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 located under "mysite";
- save any additional, local style sheet in the "css" folder under "mysite";
- save all your PDF files in the "pdf" folder under "mysite";
- save all files you need to be included on your pages (menus, footer, etc.) in the "includes" folder under "mysite".
In the <head>, this should come just above the style sheets:
Global style sheet
In the <head>, this should be the first of the style sheets:
<link href="/css/global_en.css" rel="stylesheet" type="text/css" />
In the <body>, the first part of the div#main is the brandbar; you should have the following piece of code:
<!--#include virtual="/en/inc/brandbar.html" -->
If your site is developed in several languages, please note that the structure should remain similar.
Your pages should be posted under "/ar/mysite/" for Arabic, "/zh/mysite/" for Chinese, "/fr/mysite/" for French, "/ru/mysite/" for Russian and "/es/mysite/" for Spanish, instead of "/en/mysite/".
Global style sheet
The global style sheet being different for each language, please make sure to use the proper file, as follows:
<link href="/css/global_ar.css" rel="stylesheet" type="text/css" />
<link href="/css/global_zh.css" rel="stylesheet" type="text/css" />
<link href="/css/global_fr.css" rel="stylesheet" type="text/css" />
<link href="/css/global_ru.css" rel="stylesheet" type="text/css" />
<link href="/css/global_es.css" rel="stylesheet" type="text/css" />
Also, make sure to refer to the proper directory and file for the branding bar, as follows:
<!--#include virtual="/ar/inc/brandbar.html" -->
<!--#include virtual="/zh/inc/brandbar.html" -->
<!--#include virtual="/fr/inc/brandbar.html" -->
<!--#include virtual="/ru/inc/brandbar.html" -->
<!--#include virtual="/es/inc/brandbar.html" -->
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!