To make information on UN Women and its activities available to the widest range of audiences, and in keeping with UN General Assembly resolutions, we must strive to make our websites accessible to persons with disabilities.
Below are some basic guidelines, which have been excerpted from the more comprehensive “Accessibility guidelines for United Nations websites” and modified slightly for our context.
Links
Screen reader users will often review the list of links on a page before taking the time to listen to the whole content. This is the equivalent of visually scanning a page to get an overview of its content and the available options. Because links are read out of context, it is important to provide link titles that do not require the user to read the surrounding information. Applying this technique also helps to optimize the content for search engines.
Links like “Read more” that are read outside of context would not make much sense. Also, when there are several “Read more” links, the same words lead to different destination pages, which is confusing to screen reader users.
How to use:
Use the title of the target page as link text instead of using generic wording such as “read more” or “click here”:
Incorrect: Click here for more information.
Correct: For more information, see “Flagship programme: Making Every Woman and Girl Count”.
Where possible, do not place the link only on a UN document symbol, but include the document title, too:
Incorrect: … UN Security Council resolution 1325 on women, peace and security, S/RES/1325(2000) …
Correct: … UN Security Council resolution 1325 on women, peace and security, S/RES/1325(2000) …
A good example of an accessible listing is the page that lists reports and other documents from the 73rd session of the UN General Assembly. Reasons why this works for screen reader users are as follows:
- The list provides an easy-to-follow structure for screen reader users.
- Each of the text links is unique and clearly identifies what is at the other end of the click.
In the past, we used tables to list these documents, and we linked language codes for each document (for example, see the page with the documents from the 72nd session). That kind of listing was a nightmare for screen reader users to navigate for the following reasons:
- Tables are extremely difficult for screen reader users to navigate and understand.
- The same text, for example, “en”, is not unique and links to different documents.
- The linked text does not provide meaningful information to screen reader users about what they will find when they click on the link.
Images
Images make websites come to life, and add meaning to content. To make an image accessible for those who cannot experience it fully, descriptive “alt text” must be chosen for each image. In doing this, you want to decide what information is the most important to convey the meaning of the image to the user. “Alt text” is always required. Most screen reader software announces that there is an image on the page by using a word like “graphic”. Therefore, do not use words like “image”, “graphic” and “photo” in your alt text unless it conveys something additional to the description.
How to use:
Use an “alt” or a “longdesc” attribute or both on every <img> element or other non-text object inserted in the HTML code.
The “alt” attribute gives a short description of the image. It is the most common way of providing an alternative text description.
<img src="nyc-map.png" ... alt="Map of New York City" />
For photos, we recommend using the photo caption plus photo credit as the “alt” text:
<img src="img.jpg" ... alt="Participants at the 62nd session of the UN Commission on the Status of Women rejoice as the Commission adopts Agreed Conclusions to ensure the rights and development of rural women and girls. Photo: UN Women/Ryan Brown." />
The “longdesc” attribute provides a link to a longer description of the image. This is particularly useful for images that convey a lot of information, such as charts.
<img src="budget_chart.png" ... alt="Pie chart of the 2006 budget" longdesc="chart.htm" />
If an image does not convey any information and only serves a decorative purpose, add an empty “alt” attribute (there should be no space between the quotation marks). Decorative elements can be defined in a CSS style sheet.
<img src="line.gif" alt="" />
When an image is used in a form to replace a submit button, use the “alt” attribute.
<input class="img_button" type="submit" name="Submit" value="Submit" alt="submit" />
Where to insert the alt text in Sitecore:
Whenever you upload an image to the Media Library in Sitecore, add the “alt” text right away, before publishing the image to the live website. To add the alt text, “Lock and edit” the image you have just uploaded, scroll down to the “Image” section, and insert the “alt” text:
If you will be using the image in other languages, switch to the other languages and add the “alt” text in those languages as well.
Once you have added the alt texts, save and publish your image to the public server, making sure to publish all relevant language versions. Then you may insert the image into your page in the Content Editor, and the “alt” text will be included on the website.
Multimedia
For most visitors to a website, video and audio provide an immediate experience of visuals, motion and sound. For others, this experience is more limited. To make multimedia content accessible you just need to provide a simple text transcript. Captioning is optional. Flash, HTML5, Windows Media Player, QuickTime, and RealPlayer video all support captioning. Techniques for captioning vary based on the technology being used. For content that is audio only, a transcript is enough. Transcripts not only enable accessibility but also searchability by search engines.
How to use:
Add a link to the transcript or place the full transcript below the multimedia content.
Lists
Lists are important in making websites accessible because they give logical order to content. Lists are preferable to tables, as tables can be more difficult to navigate. There are three types of lists: unordered lists, ordered lists, and definition lists. Always check your lists to make sure the items are contained in one list. Lists are also often used to group links into a navigation section on websites.
How to use:
Unordered lists use the <ul> followed by <li> elements: this is when there is no set order to the list. Ordered lists use <ol> followed by <li> elements: this is for when there is a set order or sequence to the list. When a list has subitems, use a nested list (a list within a list).
A definition list uses the <dl> followed by <dt> (definition term) and <dd> (definition description) elements. This is used when it is necessary to have a structure for definition of terms.
For complete details, see the W3Schools “HTML lists” tutorial.
Quotations
Some screen readers identify text that has been correctly marked as a quotation differently, which gives people who use these technologies important information about the context of the text.
How to use:
Short quotations of 10 words or fewer should use the <q> tag for markup:
<p>WWF’s goal is to <q>Build a future where people live in harmony with nature.</q> We hope they succeed.</p>
Long quotations of 11 words or more should use the <blockquote> tag:
<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>
Acronyms and abbreviations
When using acronyms (such as “UN”, “GA”, “SC”) or abbreviations (“Add.”), markup the acronyms and abbreviations with the <acronym> tag or the <abbr> tag, respectively, and use a title attribute to elaborate on the acronym or abbreviation letters. Remember that the explanation of the acronym or abbreviation will be read as you set it in the “title” attribute; it should therefore be written as it would normally appear in running text.
How to use:
<p>The Intergovernmental Panel on Climate Change has been established by the <acronym title="World Meteorological Organization">WMO</acronym>.</p>
<p><abbr title="Mister">Mr.</abbr> Ban Ki-moon, <acronym title="United Nations">UN</acronym> Secretary-General</p>
Documents and PDFs
When linking to non-HTML documents, provide users with information on the document file type, size, language and available alternative formats.
Users who want to download files or view pages (such as documents or multimedia files) will want to select versions compatible with their systems and/or human language. Users are very reluctant to commit to downloading files if they can’t tell whether they will be able to open or read them. Users with text-only browsers or screen readers may prefer to use pages that are optimized for certain user agents.
How to use:
- Specify file type and size with different file types indicated in the links which activate the downloads. Providing users with details of the file type, size and language in the link title ensures that users are downloading the files which best suit their platform and language.
- Provide available links to alternative presentations. Whenever alternatives are available, provide clear links to the alternatives (example: provide links to different media types or different language options for the same document, if possible).
Examples:
<a href="event.mov">Download the video of the event (Quick Time format, 3MB, 12min)</a>
<a href="event.mp3">Download the audio recording of the event (MP3 format, 112KB, 12min)</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>
Email if you have any questions.