Ten Steps To A More Accessible Web Site PDF

Even Grounds – Accessibility Consulting
Email: info@evengrounds.com Phone: 1 (703) 822-5186

Web: http://evengrounds.com
Twitter: http://twitter.com/tbabinszki Facebook: http://facebook.com/evengrounds
Ten Steps to a More Accessible Web Site

Written by Tom Babinszki, Even Grounds, Inc.
Introduction
One way to offer our site to more people is including all segments of society into our audience.
In this workbook, we will explore what the steps are that you can take to make your site more
accessible to people with disabilities. Approximately one out of six people live with some kind
of a disability. If you include all of these people among the ones who can benefit your web site,
you can automatically increase your audience by 20 percent.
We can hear a lot about web accessibility, but it either sounds too cryptic or too technical.
In this workbook, I will show you ten steps you can take to make your web site more accessible
to people with disabilities.
Before you think that you don’t want to read another technical explanation, my promise to you is
that I will guide you step by step and explain everything in simple terms.
This workbook can be useful to you if you just installed your new blog and want to ensure that it
is accessible to people with disabilities. Also, if you are an experienced web developer and
programmer, you will be able to use this same information just as well.
But before we start, let me point out one thing:
When you make a web site accessible, it does not mean that you cannot use any features that you
currently have. Rather, what it means is that you can do anything on your web site, as long as
you add enough information to make it accessible. Accessibility is not about posing a limitation
on your web site. It is about extending the number of people who can benefit from your site.
So, let’s dive in!

Step 1: Understand People with Disabilities
If you want to make your web site accessible, it will not help you to follow a bunch of rules that
you can find on the internet hoping that it will do the job for you. Instead, ask yourself why and
how you want to make your web site accessible. Once you can answer this question, the rest will
make much more sense, and your internet search will make it all fall into place.
The reason to make your site accessible is to allow people with disabilities to enjoy the same
content that anybody else does. But who are people with disabilities?
Just to name a few:
 Those who are blind

 Those who have limited vision
 Those who cannot hear
 Those who cannot use their hands
 Those who have a cognitive disability
And of course, the combination of any or all of the above, for example, there are thousands of
deaf blind people who are browsing the internet daily.
There are many more disabilities, thus the combination of all will produce countless scenarios.
However, if you understand the most common disabilities, you will be able to cater to them
better by making your information available.
One good way to start is to learn about the technologies people with disabilities use. These
include screen readers, screen magnification systems, and voice recognition software.
I put together a list of articles which explain how people with disabilities use the computer, and
they describe many of the technologies they use.
It takes about a half hour to read all of these. It will not only help you to understand more about
technologies you have probably never heard about, but it is also an interesting read.
Read how people with disabilities use the computer!

Step 2: Automated Human Verification
Most likely you have seen countless registration forms on the internet which make you type a
word from an image to submit your data.
This verification method helps site owners to decrease the amount of SPAM they receive by
ensuring that only real humans can interact with their page. This method of filtering is called
CAPTCHA, you will find this concept very often.
While this method certainly cuts out much of the SPAM, it also makes it impossible for blind
people to register on your site or contact you. The reason is that blind people use a screen reader,
which reads all textual information to them, but a screen reader is not able to read the images.
Later we will talk more about making images accessible, but that method does not work here. If
you provide a text alternative of an image to blind people, it will also be available to SPAM
robots, so such a verification method will become useless.
However, it is also important that you make sure that only real people can use your web site.
There are other, alternative methods to check if a human is trying to use your page. These
methods make use of text based questions, e-mail verifications, and there are some other clever
tricks which can help you combat SPAM while making your site accessible.
Read about the different verification methods you can implement!
When you set up your blog or company web site, make sure that you choose a verification
method that works for all people. Nowadays, many content management systems, such as
WordPress or Drupal will offer you many alternatives to choose from.
Step 3: Link Text
As you start building up your site, it is certain that you will want to link to other pages, either
your own, or somebody else’s.
When you link to other pages, there are two things you need to specify:
 The page you link to

 The text that you link this page to
Very often you can see links which say “click here”, which is not informative.
You want to make sure that the link text makes sense, and only from this site users can figure out
what you link to.
For example, when we refer to the Even Grounds blog:
 Bad practice: Click here to read the Even Grounds Blog

 Good practice: Read the Even Grounds Blog
Just by reading the link texts, the information you provide should make sense.
Step 4: Headings
There are two ways to indicate titles on a page.
The first way, which is not preferred, is just changing the font of the text.
The second is to use headings. Headings allow you to organize your content in a hierarchical
way; you can indicate titles, subtitles, parts, chapters, etc.
Headings also make it much easier to search in your content. Some screen readers, for example,
allow users to list only the headings, so essentially they can view a table of contents on your
page without you having to make one.
If you use a content management system, you can select the titles, and assign H1 or Heading1 to
it if it is the main title, for subtitles H2/Heading2, etc. If you are composing your page using
HTML, you would write it up as:
<h1>Main title</h1>
<h2>Chapter One</h2>
<h2>Chapter Two</h2>
Etc.
It is a good practice to use Heading 1 only one time on a page. Also, make sure that headings are
used in a strict hierarchy, for example, if the main level is Heading 1, for the second level don’t
use Heading 3 or Heading 4, only use Heading 2.
Step 5: Too Much Information on a Page
Once you have gotten somebody to visit a page on your site, you may feel that you would like to
give them as much information as possible, so you expose them to much of your content in case
they decide not to dive deeper into your site. However, too much information can be more
detrimental than too little.
You don’t have to show all kinds of information at once, rather, ensure that people can get to all
of the information which is easy to find.
Let’s take a blog as an example.
You may have the following on one particular page:
 The blog post

 Recent posts
 Related posts
 Recent tweets
 Social media contacts
 RSS information
 Subscription to the newsletter
 Blog archive
 Mission statement
 Detailed contact information
 Etc. Etc.
I’m not saying that all this information does not belong to a given page, but it is also true that the
more information you have, the more difficult it is to find what you are looking for.
So, try to cut down on the information as much as you reasonably can.
First, look at all the little things you have on your page, and evaluate if you really need it. If you
do, leave it there, if you don’t, get rid of it.
Also, you can cut down on the size of the different blocks. For example, instead of displaying the
last 20 posts, display the last five.
You should also make sure that the information is not too cluttered, so people can easily find
what they are looking for.
This helps anybody who visits your site, but most importantly, it allows people with cognitive
disabilities to better understand your site. People with cognitive disabilities may just look for
another site with similar information if that’s easier to read, even if your content is of higher
quality.
Step 6: Label Images
As mentioned when we talked about the automated human verification section, people who use a
screen reader cannot take advantage of images. If you provide images which are relevant for
understanding the information you want to convey, describe what these images contain.
Keep these descriptions as short and concise as you can. For example, don’t start the description
by saying “this image contains”, it is redundant. So, if it is a picture of a dog, say “dog”, if it is a
picture of a child playing, say “child playing”.
Most content management systems allow you to add a description to your image when you
upload it, depending on your system you would fill this information into “alternative text”,
“image caption”, etc.
When an image does not provide any information, and its purpose is only decoration, it is not
necessary to describe these images. If you are designing your page in HTML, all you would add
to the image is:
alt=””
If you use a content management system where you are able to provide the alternative text or
image description, just put one space into this field.
This tells screen reader users that you have thought about making this image accessible, but as it
does not carry information, you left the explanation blank.
There is a difference between adding a space to the description and not doing anything at all. The
screen reader will announce if there is an image and that it does not have a description. In this
case, people may not know if it is important or not, but if you use one space, they will know that
it isn’t important.
Step 7: Videos and Podcasts
While videos and podcasts are two very different genres, we can talk about them under the same
umbrella, because they have similar accessibility issues.
Any media which contains audio or visual actions should be described.
There are two ways to do it:
 Captioning
 Audio transcription
Captioning provides a transcript of the audio text, but also describes any additional auditory
information, for example the speaker, the tone of the voice if relevant, and any other sounds.
This is helpful information for hearing impaired people. Also, describing visual content is useful
to visually impaired people.
Audio transcription only provides a transcript of all spoken text on the video or podcast.
Adding captions and audio transcriptions can be a little more time consuming, or costly if you
decide to hire somebody. Generally captioning is more expensive, so if you decide to make your
audio or video content accessible, an audio transcript is usually a good way to do it.
The easiest way is to type out your audio content into a text file and post it on your site as a text
alternative.
Just recently, YouTube started offering automated captioning. You can upload your video and
YouTube will caption it for you. The drawback is that it uses a voice recognition system, which
may not get all the information right. Also, it will not be able to describe additional sounds.
The good news, however, is that it at least gets much of the work done for you for free. After
YouTube creates the captioning for you, you can edit it and make changes as needed.
Step 8: Using Colors
In certain situations the use of colors can greatly enhance your site and makes it much easier for
people to find information. You can use one color for the main content, a different color for the
menus, a different color for mandatory information, etc.
It is, however, important that you don’t make use of colors only when you communicate
information.
For example, if you post a form on your site, it is perfectly ok to use red for mandatory fields,
but include some other information for people to provide an alternative way to distinguish what
is mandatory and what isn’t. For example, add a “*” to the mandatory fields, or say “required” in
parentheses.
Also, it is useful not to make statements like “click the green button to continue”, rather, say
activate the “next” button to continue.
Step 9: Provide Enough Information to Fill Out Forms
When you use forms, such as a contact form, a comment form, or a registration form, it is
important that the user understands how to fill out the individual fields.
Always provide clear instructions for form fields.
Some may be obvious, such as “first name” or “last name”. In other cases, more instruction is
needed, for example when entering a date. Do you want the user to spell out the month, use day
first or month first, use two or four digit year, etc.
In this case, instead of just labeling the field with the word “date”, you can say
“date(MM/DD/YYYY)”.
In some cases, instructions can be even more complex, always attach enough information to the
form field, or provide a link where people can read in more detail how they are expected to fill
out a particular form.
It is also a good idea to allow people to go back and change data if they made a mistake, as
opposed to starting all over again.
Step 10: Contact Information
There is no such thing as a bullet proof site or service. It could easily be that part of the work you
are doing was not covered in this workbook. It is also possible that some people have some
highly specialized needs and they may need extra assistance using your site, obtaining
information or services.
To ensure that you serve everybody equally, make sure that it is easy to get in touch with you or
anybody who will be able to provide immediate assistance.
Make sure that your contact information or a contact form is easy to locate. If you are using a
contact form, make sure that it is accessible based on the above advice.
But this itself is not necessarily enough. Make a point to encourage the site visitors to ask any
questions, or get in touch with you if they need further assistance.
Conclusion
If you only consider one out of the ten steps above, you can make a difference for people with
disabilities.
If you implement all of the above suggestions, you can be sure that your site will be more
accessible than the average sites.
However, there is much more to accessibility than 10 easy steps.
Especially if your web site has any legal requirements, for example it needs to meet the Section
508 standards in the United States, or it needs to be WCAG conformant in another country.
I only wanted to cover the ones which do not require much technical knowledge and are
relatively easy to implement.
If you have questions in any other areas, or you need to comply with any legislation, I will be
happy to help.
Also, don’t forget to check the Even Grounds web site, where we continuously post useful
information.

Ten Steps To A More Accessible Web Site PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ten Steps To A More Accessible Web Site PDF

Uploaded by

Copyright:

Available Formats

Even Grounds – Accessibility Consulting

Email: info@evengrounds.com Phone: 1 (703) 822-5186

Ten Steps to a More Accessible Web Site

But before we start, let me point out one thing:

So, let’s dive in!

Step 1: Understand People with Disabilities

Just to name a few:

 Those who are blind

Read how people with disabilities use the computer!

Step 2: Automated Human Verification

Read about the different verification methods you can implement!

Step 3: Link Text

 The page you link to

For example, when we refer to the Even Grounds blog:

 Bad practice: Click here to read the Even Grounds Blog

There are two ways to indicate titles on a page.

Step 5: Too Much Information on a Page

Let’s take a blog as an example.

You may have the following on one particular page:

 The blog post

Step 6: Label Images

Step 7: Videos and Podcasts

Any media which contains audio or visual actions should be described.

There are two ways to do it:

Step 8: Using Colors

Step 9: Provide Enough Information to Fill Out Forms

Always provide clear instructions for form fields.

Step 10: Contact Information

However, there is much more to accessibility than 10 easy steps.

You might also like