Masthead

You are about to develop the template for your new website or to populate a template.

To follow UN web standards (see Building UN Websites for further information), which include web accessibility, your entire site needs to be accessible; and this includes the masthead. To do so, follow the steps below.

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

To remove any barriers to accessing your website, you need to provide alternative ways to access its content to compensate for missing or weaker senses, such as hearing loss or vision impairment. This also implies that your website supports the use of assistive technology (screen readers, magnifying tools, etc.).

  1. Why it is important

    Screen readers and Braille devices need to identify changes in the natural language so they can present it with the correct pronunciation.

    Make it accessible

    • The <html> tag in the masthead of the page indicates the language of the page's content. If a word or phrase of another language appears in the content, it should be tagged accordingly.
    Do the following:

    Use the "lang" attribute to identify text in another language.

    Remember

    • If there is content in a language other than the main language of the page, check the HTML code.
    Examples:
    <html lang="en" >
      <ul>
        <li><a href="sg_letter.html">Letter of the Secretary general</a></li>
        <li><a href="letter_fr.html" lang="fr">Lettre du Repr茅sentant permanent de la Belgique</a></li>
        <li><a href="letter_sc.html">Letter of the President of the Security Council</a></li>
      </ul>
    </html>

  2. Why it is important

    Colour, font, and text sizes are key assets in web design, and while they are used to enhance the content and please the eyes, all these elements need to be accessible. Meeting this requirement will help users who rely on assistive technology, as well as users who are colourblind or who use Braille displays. Text is also an important component of designing a site, and a variety of fonts and sizes are available. But for your web content to remain discernible, users need to be able to resize the text.

    Make it accessible

    • Provide enough contrast between foreground and background, using a contrast ratio of 3:1.
    • Keep URLs short as they may run off the side of an enlarged screen for users who need to increase the size of the text/screen.
    • Define the font size with relative units to make resizing easier than if fixed.
    • Set sizes in 鈥�%鈥� or 鈥榚m鈥�.

    Remember

    • Colour should not be used as the ONLY WAY to convey information or identify content.
    • Text in paragraphs should not be indented or they become difficult to read.
    • Making green radio buttons with the words 鈥榞o鈥� and red for 鈥榮top鈥� is not accessible; complement the colour cues with a sentence, like 鈥淐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; in the case of links for instance, underline them.
    • Use CSS to style font size (See example below, CSS).
    Examples:

    CSS
    h1 {font-size: 3em;}

鈥極鈥� is for Operable

Not everyone experiences a website the same way. Users with disabilities may use assistive technology for instance, such as screen readers, Braille terminals, screen magnification software, etc. It is therefore crucial for users to be able to use controls, buttons, navigation, and other necessary interactive elements.

  1. Why it is important

    As some users with disabilities cannot operate a mouse, the alternatives like keyboard-based operations should be implemented.

    Make it accessible

    • All functionalities that are available by using the mouse must also be available by using the Enter/Return key. Additionally, each element of the navigation (button, tab, sub-menus, etc.) should also receive focus, i.e. to handle keyboard input. While operating the keyboard to navigate, users should not be trapped; they should be able to move either back or forward on the site.
    Do the following:
    • Use 鈥楽kip鈥� links to go directly to the navigation and/or to skip to content. These links should become visible upon keyboard focus, as they are useful to sighted users who are unable to use a mouse.
    • Avoid using apps, plugins, widgets, or JavaScript techniques that trap the keyboard and prevent users from getting into and out of any user interface element.

    Remember

    • Screen-reader users must listen to the title, banner elements, and navigation bar for every page. Make it convenient to go directly to the content, using a skip link.
    • The focus indicator - native to browsers (thin dotted line or blue outline) - can be disabled using CSS. Do not disable it unless you can offer a better one.
    • If the navigation on your site is complex, users will need to tab through each link, and that may be difficult for them. Offer a 鈥榮kip to content鈥� link AND use a proper heading structure, creating an outline of the page content.
    Examples:

    Skip links

    • HTML

      <div id="skiplink">
        <ul>
          <li> <a href="#navigation">Skip to navigation </a> </li>
          <li> <a href="#content">Skip to content </a> </li>;
        </ul>
      </div>
      <div id="banner">
        <h1>Events </h1>
      </div>
      <div id="navigation">
        <ul>
          <li id="home"> <a href="index.shtml">At Headquarters in New York </a> </li>
          <li id="type"> <a href="exhibition.shtml">Exhibitions </a> </li>;
        </ul>
      </div>
      <div id="content" class>
        <p>The UN at 75, an exhibition online </p>
      </div>

    • CSS - to hide the skip links by giving them the same colour as the background

      body {background-colour: #FFFFFF;}
      #skiplink a {color:#FFFFFF;}
      #skiplink a:focus, div#skiplink a:active {color:#0000FF;}

  2. Why it is important

    Users should be able to orient themselves on a website/page and find the content and functionality they are looking for.

    Make it accessible

    • Help users navigate, find content, and determine where they are on your website. The navigation should be presented in a uniform, well-structured, and logical order to avoid confusion or disorientation.
    Do the following:
    • Each web page should have an informative <title> which describes its content/purpose.
    • Ensure that each link is a specific call to action or link text so that these links can be read out of context.
    • Use section headings for an easy and logical navigation experience.

    Remember

    • Avoid ambiguous links 鈥� the destination of a link should be understandable from the wording or the surrounding text.
    • Do not use "Read more" or 鈥淐lick here.鈥� Be specific: 鈥淩ead more about the mandate of our Department鈥�, or 鈥淩ead the full report of the Special Envoy鈥�.
    Examples:
    • Page Title

      <html>
        <head>
          <title>Key Documents, International Law | 51吃瓜</title>
        </head>
        <body>
          <h1>Legal Key Documents</h1>
          <h2>Introduction</h2>
          <h2>Introduction</h2>
          …
        </body>
      </html>

鈥楿鈥� is for Understandable

This principle refers to comprehending both the content and the features of a website. Content that uses complex language and a lot of acronyms may be difficult to understand for some persons with disabilities, as well as for those reading in their non-native language. Ensure that your content is clear and concise; and to ensure a full understanding of your website, keep in mind that consistency and easy navigation are essential.

  1. Why it is important

    When filling out a contact form, or stopping a slideshow, users may make a mistake and they should be able to correct this easily and efficiently.

    Make it accessible

    • To avoid mistakes when filling out forms or searching a database, clear instructions are a must in the first place.
    • If there are form input errors, make error messages immediately apparent and descriptive.
    Do the following:
    • Use <label> tags for each form field, and identify each label with its associated field.
    • Make each label understandable to someone who cannot see past this form field. If you make a form field label read "Address," a screen reader user may then enter their entire address including floor, apartment number, zip code, and state/province. If the next field they navigate to is "apartment number" or "zip code", the user will have to go back and change their previous form field entry, and they will likely become frustrated. You would want to use a more descriptive label, like "Street Address Line 1."
    • After a user submits a form that has errors, you should make the form submission error state known on the page title and the <h1> or <h2> headers, and list errors at the top of the form.
    • If the user fills out a form field incorrectly, use descriptive error messages and suggest helpful ways to fill out the form fields correctly. For instance, if someone fills out their birthday incorrectly as "1 January 2000," a helpful error message would be something like "Incorrect format. Please enter your birthday in a format like 12/31/1999." Error messages like "invalid entry" are not helpful.

    Remember

    • Do not use Placeholder Text within each form field as your field label.
    • Do not solely use colour, such as a red input field border, to signify incorrect fields. Errors must be overtly stated and associated with each field.
    Examples:
    • Label associated with its field:

      <label for="firstname">First name:</label>
      <input type="text" name="firstname" id="firstname" />

    • Helpful messaging on a form that returns errors:

      <h1>Form Submission Error!</h1>
      <div role="alert">
        <h2>There is 1 error in this form. Please fix the following and resubmit:</h4>
        <ul>
          <li>
            <a href="#firstname" id="firstname_error">
              The First name field is empty; it is a required field and must be filled in.
            </a>
          </li>
        </ul>
      </div>
      ...
      <form>
        <label for="firstname">First Name:</label>
        <input type="text" id="firstname" aria-describedby="firstname_error">
        ...

  2. Why it is important

    Some users read quickly, but some do not because they cannot. If your web content is complex, you risk losing visitors because the text is too difficult to follow. You also need to organize your content into a simple structure.

    Make it accessible

    • Edit your web content to make it as understandable as possible. Keep in mind the basic principles of writing for the web: write short, active, and simple sentences, avoid the use of jargon, explain acronyms, and make the text scannable.
    Do the following:
    • Define the language used on the site (A, C, E, F, R, S).
    • Use a less formal style than is normally used in UN materials: your text needs to be concise and direct, especially on your homepage.
    • Abbreviations, acronyms, and technical terminology should be explained, used with discretion, and only when widely recognizable.
    • Provide links to definitions of technical terms.

    Remember

    • Knowing your audience is the first step. Who is your targeted audience?
    • You may consider consulting users representing your intended audience.
    Examples:
    • Language attribute

      <html dir="ltr" lang="en">
        <head="...">
        <meta charset="utf-8"/>
        ...

    • Abbreviation element <Abbr>

      You can explain the meaning of an acronym using the <abbr> tag, as follows:

      The regional approach to <abbr title=”Nuclear-Weapon-Free Zones”>NWFZ</abbr> aims to ...

      Note: the <acronym> tag is deprecated; the <abbr> tag should be used for acronyms.