Footer

As shown in the UN Style Guide, there are two kinds of footers for UN websites. The one with a light grey background is optional; the one in dark grey is mandatory. The tips below will help you achieve accessibility of both footers.

Web Content Accessibility Guidelines:
The P.O.U.R. principles

Organized into four guiding principles — Perceivable, Operable, Understandable, and Robust (POUR) — and referenced throughout this site, they provide the basis to address web accessibility.

鈥楶鈥� is for Perceivable

  1. Why it is important

    Meeting this requirement will help users who are colourblind.

    Make it accessible

    • Provide enough contrast between foreground and background, using a contrast ratio of 3:1.

    Remember

    • Colour is not used as the ONLY WAY to convey information or identify content.
    • Making green radio buttons with the word 鈥榞o鈥� and red ones with the word 鈥榮top鈥� is not accessible; to complement the colour cues add a sentence 鈥淐lick on the green button to continue. Click on the red button to stop the registration."
    • Critical information should not be lost when colours are disabled. For links, for instance, underline is recommended.

鈥楿鈥� is for Understandable

  1. Why it is important

    Support for style sheets is not consistent across all browsers and platforms. Furthermore, users can override the original style sheet with one of their own, which might be better suited for their needs (for example, with larger fonts or a different colour scheme).

    Make it accessible

    • Organize documents so that they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document. Create documents with valid HTML or XHTML.
    • Document layout should be organized in a clear format to be legible without style sheets. When style sheets are turned off, all content and links should be accessible and functional to the user.
    • Documents are often divided into a variety of sections; those sections should be introduced with the HTML heading elements (<h1> through <h6>).
    • It is important to use headings appropriately to convey document structure. For example, an <h2> is the subtitle of an <h1>; <h3>, the subtitle of <h2>, etc.
    • Formatting should be achieved through the use of CSS/style sheets (to change font styles, for instance).

    Remember

    • The structure of the document should be reflected in the HTML: titles should be tagged with heading tags (<h1>, <h2>), menus and lists should be in list tags (<li>), quotations should be in blockquote tags (<blockquote>).