Homepage

• Use an empty ‘alt’ attribute if the imagery is purely decorative (horizontal line, etc.); in that case, the screen reader will ignore the image, rather than reading 'image' for no reason.
• Use the ‘alt’ attribute to describe the content and/or function of a visual.
• Limit the length of the description of the non-text content to 80-100 characters.
• Describe what is ON the visual, keeping in mind the context.
• Repeat the text embedded in the image (e.g. in the case of logo, announcement, etc.).
• Provide alternative methods to describe visuals in the text near the non-text content or through a separate page description (e.g. for charts, infographics, etc.).
• For complex images or images that link to content, or require additional information, use also the ‘Title’ attribute (See example below).

Alt attribute

<img src="sg_Summit2020.jpg" alt="UN Secretary-General at the podium during the Climate Ambition Summit 2020" />

Title attribute

<img src=".../web_cover_issue_2_2018_english.jpg” alt="Magazine cover of the UN Chronicle, issue about the 2030 Agenda” title="Link to issue 2 of the UN Chronicle which focuses on the 2030 Agenda for Sustainable Development” />

Empty alt attribute

<img src=".../images/hr_shadow.gif" alt="" />

• Prerecorded video – Add an audio description when you offer a video online. It should not only include the narration (transcript) but also describe important information such as background sounds, visual effects, etc. (See example below, ‘Transcript’)
• Prerecorded video – Plan and arrange for videos to have sign language interpretation.
• Prerecorded video and Prerecorded audio – Ensure that there is enough time to read the captions or subtitles.
• Prerecorded video – Add a description of the video in the ‘Title’ attribute (See example below, <iframe>).
• Carousel – Controls (forward/backward) need to be clearly displayed and recognizable (arrows, dots).
• Carousel – Keyboard access is essential for users to navigate manually from one slide to the other.
• Audio content – Include controls to pause or stop the audio, as well as controls to turn the volume up or down.

• <iframe allowfullscreen="" frameborder="0" mozallowfullscreen="" src="//www.un.org/webcast/1362235914001/B1J3DDQJf_default/index.html?videoId=6203307844001" title="Video message of the Secretary-General on UN Day 2020" webkitallowfullscreen=""></iframe></div>
• Transcripts: a description of visual and audio information available as text. Load on your website an objective description of the video - without interpretation, censorship, or comment - in present tense, using an active voice and a third-person narrative style.
• Captions/subtitles: YouTube offers the option to automatically add captions. You need to check/edit them manually for accuracy.

• <h> tags – architecture of a landing page/index:
  
  <h1>Law of the Sea</h1> [First title on the index page]
  <h2>Our mandate: saving the oceans</h2> [Title of the first paragraph]
  <h3>The oceans and sustainable development</h3> [Subtopic nested in the first paragraph]
  <h2>Our action: maintaining the law at sea</h2> [Title of the second paragraph]
  <h3>Piracy</h3> [Subtopic nested in second paragraph]
  ...
  
  

  Note: <h> tags are styled from <h1> to <h6>, <h1> being the largest and <h6> the smallest.

• Table – Job Vacancy
  
  <table>
  <tr>
    <th>Job Title </th>
    <td>...</td>
  </tr>
  <tr>
    <th>Mandate</th>
    <td>...</td>
  </tr>
  <tr>
    <th>Deadline</th>
    <td> ...</td>
  </tr>
</table>

  
  
• Data table – “UN Secretary-General Official Appointments,” using a caption to ensure the identifier remains with the table when CSS is disabled for instance.
  
  <table>
  <caption>Schedule for the week of 4 February 2019</caption>
  ...
</table>
  

• <blockquote>
I feel honoured and very humbled when I think of all our founding fathers wise enough and courageous enough to save this world from the scourge of war who have negotiated, drafted, and finally signed the Charter of the United Nations, which has shaped the future of the whole international community.
</blockquote>
<p>Secretary-General Ban Ki-moon in remarks at San Francisco War Memorial, 26 July 2007</p>

• Provide controls so that users can turn on and off, or pause animations, carousels, etc. (unless they are essential to the website’s functionality) and enjoy this feature at their own pace.
• Indicate the button status in a slideshow/slider, as controls of a carousel are typically small. Colour and shape, and proper naming and labeling, will indicate the status and make it easier for users to know their current status.

• Previous and Next - <button> JavaScript
  
  var ctrls = document.createElement('ul');
ctrls.className = 'controls';
ctrls.innerHTML = '<li>' +
  '<button type="button" class="btn-prev">' +
  '<img src="img/chevron-left.png" alt="Previous Item">' +
  '</button>' +
  '</li>' +
  '<li>' +
  '<button type="button" class="btn-next">' +
  '<img src="img/chevron-right.png" alt="Next Item">' +
  '</button>' +
  '</li>';
ctrls.querySelector('.btn-prev').addEventListener('click', function() {
  prevSlide(true);
});
ctrls.querySelector('.btn-next').addEventListener('click', function(){
  nextSlide(true);
});
carousel.appendChild(ctrls);
  
  

• Web pages should not contain any element that flashes more than three times per second.

• Use server-side scripts instead of client-side scripts. If you use a client-side script and the client does not support this technology, the user will not be able to access the content or features provided by the script. But in many cases, the same functionality can be achieved using a server-side script.
• As a last resort, provide an up-to-date text equivalent of the information on an alternative page.

• Make the navigation consistent throughout the site. If you decide to have sub-menus rather than side menus, keep that pattern.

• Documents are often divided into a variety of sections; those sections should be introduced with 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>; an <h3> is the subtitle of an <h2>, etc.
• Do not skip levels (e.g., <h1> directly to <h3>); to create formatting effect, use CSS/style sheets (to change font styles, for instance).

• <body>
  <div class="section1">
    <h1>Welcome to the United Nations!</h1>
    … some text here ...
  </div>
  <div class="section2">
    <h2>sub topic 1</h2>
    ... text of the section ...
  </div>
  <div class="section3">
    <h2>sub topic 2</h2>
    ... text of the section ...
  </div>
</body>

• Ensure that custom components maintain as many native HTML and XML accessibility attributes as possible.
• HTML or XML should have complete start and end tags to prevent display errors and problems with assistive technologies.
• Use aria-label to provide an invisible label where a visible label cannot be used.
• Validate your HTML code, using the built-in feature of the ‘web developer’ add-on.

• Appropriate HTML markup
  
  “On 23 March 2020, Secretary-General Antonio Guterres issued an <em>urgent</em> appeal for a <strong>global ceasefire</strong> in all corners of the world to focus together on the true fight – defeating COVID-19.”
  <em> = important word in the sentence;
  <strong> = like <em> but stressed for emphasis.
  
  

• Indicate file type and size within the link or in brackets or parenthesis.
  Providing details on the file type, size, and language in the link title ensures that users download the files that best suit their needs (platform and language).
• Provide available links to alternative presentations
  Whenever alternatives are available, provide clear links to these alternatives (example: provide links to different media types or different language options for the same document, if possible).
• Consider using profiles to record user preferences and configure the server to choose document preferences automatically
  For example, a browser could indicate that it would like to see information in Arabic or English based on the user's settings; provide users with the options to reset their settings.

• <!-- clearly specify the file type, size and/or language -->
<a href="event.mov">Download the video of the event (Quick Time format, 3MB, 12mn)</a>
or
<a href="event.mp3">Download the audio recording of the event (MP3 format, 112KB, 12mn)</a>
<p>Choose the language of the document:</p>
<ul>
  <li><a href="English_file.html">English (HTML format)</a></li>
  <li><a lang="ar" href="Arabic_file.pdf">عربي (PDF 3MB)</a></li>
</ul>