Welcome to the United Nations. It's your world.

Making Accessible Websites for the UN

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;
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.

The global style sheet, the javascript and the branding bar are all already available on the server. We provided you with the files so you can see what your website will look like as you are working on it. You should not, however, post them on the server when you upload your files.

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".

Once you are ready to launch, you can upload your files and subfolders on to the server in the folder attributed to your website. Do not upload the "css", "en/inc/" or "javascripts" folders though — these files already exist on the server and are located outside of your folder.

Please make sure that the codes for the server-side includes used for the javascript, the global style sheet, and the branding bar remain as in the template provided here to ensure that the proper files will be used. On the template, as well as on each page of your site, the include files should be coded as follows:

Javascript

In the <head>, this should come just above the style sheets:


<script language="javascript" src="/javascripts/matching_columns.js" type="text/javascript"></script>

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" />

Branding bar

In the <body>, the first part of the div#main is the brandbar; you should have the following piece of code:


<div id="brandbar">

      <!--#include virtual="/en/inc/brandbar.html" -->

</div>

Multilingual sites

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/".

Javascript

The javascript link should remain the same, as it is posted on the server on a directory outside of the language folders:

<script language="javascript" src="/javascripts/matching_columns.js" type="text/javascript"></script>

Global style sheet

The global style sheet being different for each language, please make sure to use the proper file, as follows:

For Arabic: <link href="/css/global_ar.css" rel="stylesheet" type="text/css" /> For Chinese: <link href="/css/global_zh.css" rel="stylesheet" type="text/css" /> For French: <link href="/css/global_fr.css" rel="stylesheet" type="text/css" /> For Russian: <link href="/css/global_ru.css" rel="stylesheet" type="text/css" /> For Spanish: <link href="/css/global_es.css" rel="stylesheet" type="text/css" />

Branding bar

Also, make sure to refer to the proper directory and file for the branding bar, as follows:

For Arabic: <div id="brandbar">  </div> For Chinese: <div id="brandbar">  </div> For French: <div id="brandbar">  </div> For Russian: <div id="brandbar">  </div> For Spanish: <div id="brandbar">  </div>

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!