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

Making Accessible Websites for the UN

Downloadable Accessible Template and Style Sheets

Print this page [PDF]

Site hosted on www.un.org

Download the files (.zip)

For your convenience, we have prepared an example of accessible site that you can download from this page. In the site, you will find:

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:

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">
      <!--#include virtual="/ar/inc/brandbar.html" -->
</div>
For Chinese:
<div id="brandbar">
      <!--#include virtual="/zh/inc/brandbar.html" -->
</div>
For French:
<div id="brandbar">
      <!--#include virtual="/fr/inc/brandbar.html" -->
</div>
For Russian:
<div id="brandbar">
      <!--#include virtual="/ru/inc/brandbar.html" -->
</div>
For Spanish:
<div id="brandbar">
      <!--#include virtual="/es/inc/brandbar.html" -->
</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!