Introduction to Web Accessibility

Introduction
Learning Objectives

Welcome to the Web Accessibility training. My name is Lei. I am your training facilitator.

In this course, I’m going to introduce you to the topic of web accessibility. You'll get a broad
introduction to assistive technology, and the needs of people with disabilities, but also a
concentrated look at what you can do to ensure that your web content, navigation and
design are all accessible and usable.

By the end of this course, you should be able to:

➢ Understand and communicate the importance of web accessibility

➢ Familiarize with web accessibility standards
➢ Identify the basic elements required to ensure web accessibility
➢ Know where to find related resources

What is web accessibility?

The first step in creating an accessible website is an understanding of web accessibility. Web
accessibility refers to the practice of making websites equally accessible by everybody,
especially people with varying disabilities, such as blindness, deafness, paralysis, etc. The
effective application of accessible design and development practices can make sure that all
users have equal access to our information and site functionality. Web accessibility also
benefits others, including older people with age-related impairments and people with low
literacy or people who are not fluent in the language of the website.

Now, imagine if you are trying to get information on unicef.org, but you couldn’t see photos,
or couldn’t read the content, or couldn’t navigate the website…..what would your experience
be?

Please click on the scenarios below to learn more.

Web accessibility and UNICEF

According to WHO and the World Bank, 15% of population have disability. Individuals living
with significant limitations in functioning often experience exclusion from full participation in
their communities, and lack of access to information contributes to this exclusion. Building
accessible websites serves UNICEF’s mandate of promoting social equality and inclusion.
Website accessibility allows more people to be actively engaged, contributing their
perspectives and insight. As a result, it helps society reach a fuller potential through greater
collaboration and innovation.
 The mandate of UNICEF’s work is guided by three conventions: The Convention of the Rights
of the Child (CRC), Convention on the Elimination of all Forms of Discrimination against
Women (CEDAW) and the Convention on the Rights of Persons with Disabilities (CRPD).

Please click on the conventions below to learn more.

Considerations for functional diversity

In the Convention on the Rights of Persons with Disabilities, disability is defined as an

interaction between persons with different levels of functioning and an environment that
does not take those differences into consideration. We need to be aware of functional
diversity and apply technics to make the web content accessible.

Here are a few examples of how our functions could vary by different disability group.

Please click on the circles to learn more.

Vision

Many of the most common accessibility considerations don't have to involve any kind of
special use of technology. And a lot of these are related to low vision. For people with low
vision, high contrast mode and increased text size are important tools.

The image below shows UNICEF website's current home page on low contrast mode.
Please flip the image to see the same page on high contrast mode. Pay attention to the
differences in navigation, font colors and images.

Hearing

People who are deaf will not be able to access auditory models of operations (e.g. voice
narration without the text), therefore at least one mode of operation that does not require
hearing should be provided, such as text on screen as shown in the image below. For someone
who has limited hearing, the enhancement of the clarity and the reduction of the background
noise will help them to better access information.

Mobility

For someone who has limited manipulation or strength, it could be difficult to work with ICT
that requires manual actions, such as entering complex code that requires the use of both
hands. As an alternative, one-handed operation could be a solution.

How to make websites more accessible?

As you already understood, from the previous chapter, there are always relatively easy, no-
cost or low cost solutions on making your website accessible.
 To demonstrate how, we will address three key components to make website more
accessible: Navigation, Content and Design.

Please click on the circles below to learn more.

Accessible navigation

People who have normal vision and do not depend on a keyboard, are able to quickly browse
a website from top to bottom, noticing the major headings of the page and distinguishing the
major sections of the page, such as menu, main content, and sidebar. However, people who
need to use assistive technology have a significantly different experience navigating the same
website, either using a keyboard or a screen reader. A screen readers is a software program
that allows blind or visually impaired users to read the text on the computer screen with a
speech synthesizer. If a blind person is listening to a page using a screen reader, the webpage
is read to them in the order that the content appears, in the source code. Now let’s take a
look at how screen readers access the webpage.

Links

Give your links unique and descriptive names. Please click on the tips below to learn more.

• Tip1: When including links in your content, use text that properly describes where the
link will go. Using "click here" is not considered descriptive, and does not make sense out
of context.
• Tip2: Links should never be empty. They must always contain text or images with
alternative text. Alt text is a hidden text that describes an image. An empty link can be
very confusing for keyboard and screen reader users.
• Tip3: Links that are embedded in the picture are not visible. Provide text to indicate the
reference of the link. For example, the picture above on the right is complemented by a
descriptive link underneath that reads "A day in the life of one Muhamasheen boy".

Accessible content

I want to talk now about writing accessible content, because it doesn't matter how accessible
your website’s navigation is, if the content you write isn't also accessible, your website is still
inaccessible.

The first thing to keep in mind is: Use logic to organise the content of your website.

Make sure that all content can be accessed with the keyboard alone in a logical way. Use
headings correctly to organize the structure of your content. Try to give concise and
meaningful headings to your sections/pages.

Screen reader users can use heading structure to navigate content. By using headings (<h1>,
<h2>, etc.) correctly and strategically, the content of your website will be well-organized and
easily interpreted by screen readers.
 Let’s see how screen reader works in practice.

Working with multi-media

For some users with disabilities, the most important issue to address is the usage of multi-
media content. Images, graphics and videos cannot be “read” by screen reader, but text
descriptions can help visually impaired people to understand the meaning of these
multimedia elements.

Click on the magnifying glass below to learn more.

Images:

• If an image carries information, use alternative text or caption to define the image. The
alternative text is read out in linearized order, as a substitute for the image.
• Keep alt text reasonably short while still being adequately descriptive.
• In cases where an image is purely decorative, always apply empty alt text (alt=“”). An
image will be announced by the screen reader as an image, so you don't ever need to
address the fact that an image is an image in the alternative text.
• More information on how to describe the images and graphs is available in UNICEF Web
accessibility standards.

Videos:

• People with hearing impairments will struggle to deal with audio files, as will many
people who speak your language only as a second language. In order to provide better
access to these populations, make sure to provide a transcript for the video or the audio,
or, if it is a music video for example, short description of what the video is about.
• Transcripts also serve a second equally valuable purpose, they make the content of your
media file searchable on the internet.

Accessible design

After you made sure both your website’s navigation and content are accessible, you also need
to pay attention to design elements such as font, color contrast, etc.

Please click on the magnifying glass to learn more.

1. Use minimum 12pt font. If you need to include footnotes or other text of a smaller size,
increase the size of the body text to 14pt, rather than reduce the size of text below 12pt.
2. Use fonts that do not have many decorative elements. Recommended fonts are: Times
New Roman, Verdana, Arial, Tahoma, Roboto, or Calibri.
3. Choose high contrasting color combinations:
▪ Approximately 1 in 12 men and 1 in 200 women experience some sort of color
blindness.
 ▪ More than 99% of all color-blind people are suffering from a red-green color vision
deficiency.
▪ Make sure that all information conveyed with color is also available without color.
4. Some people have difficulties distinguishing foreground from background if the contrast is
insufficient. Ensuring proper contrast between foreground and background also benefits
partially sighted users and anyone who needs to use mobile devices in sunny conditions.

Tips:
• Make sure that all text contrasts sufficiently with its background when viewed by
someone with color deficits or when viewed on a black and white screen.
• The visual presentation of text and images of text should have a contrast ratio of at
least 4:5:1.
• Use a color-contrast checker tool (such as: http://colorsafe.co/ ) to confirm whether
your color combinations meet the above standards.

Accessible forms

When form fields are not labeled appropriately, the screen reader user does not have the
same cues available as the sighted user. It may be impossible to tell what type of content
should be entered into a form field.

Please click on the shaded area to learn more.

1. If the field is for a person's name, it should be labelled appropriately as either "Full Name"
or have two separate fields labelled as "First Name" and "Last Name."
2. Accessible forms need to have a clear relationship between form labels and fields for
users who cannot see the form. Each field in your form should have a well-positioned,
descriptive label.

How to check your website's accessibility

Testing tools are also an important part of identifying issues and tracking the ongoing
accessibility of your websites and web software.
Below are several tools that can help assess accessibility and make references to the issues
that need to be fixed. Click on the links to explore the tools.

Wrap up

Here is a summary of the best practices to follow when building accessible websites:
I. Consideration of functional diversity:
• For people with low vision, high contrast mode and increased text size are
important tools.
• At least one mode of operation that does not require hearing should be provided
to people who are deaf.
• For someone who has limited manipulation or strength, one-handed operation
could be a solution.
II. Accessible navigation, content and design:
 • Give your links unique and descriptive names so that screen readers can read them.
• Use logic to organise the content of your website, and use headings correctly.
• Provide alt text for images and transcript or subtitles for videos.
• Pay attention to design elements such as font, color contrast, etc.
III. Accessibility standards for UNICEF websites:
These standards explain how to make web content more accessible for people with
disabilities and more user friendly for everyone. They apply to all public facing
websites that are managed by, or on behalf of, UNICEF, whether or not they are
UNICEF-branded.

Read the standards on Digital Labs SharePoint site:

https://unicef.sharepoint.com/teams/DOC/digitallabs/SitePages/Accessibility%20sta
ndards.aspx

Congratulations!

Congratulations on completing the Web Accessibility Training module! We hope that you feel
better prepared to create accessible websites that meet best-practice Web Accessibility
standards.

Please visit the Resources section to learn more, and keep the Disability Section updated on
your progress of making your website accessible by writing to disabilities@unicef.org.

Also, don't forget to return to the course page to fill out the course evaluation, in order to
print your course completion certificate.