By Geof Collis
Badeyes Design & Consulting
January 16, 2010

In anticipation of the upcoming Accessibility for Ontarians with Disabilities Act (AODA) Information and Communications Standard, I have put together some tips for Webmasters on how to make your website accessible.

The examples below are based on WCAG 2.0(http://www.w3.org/TR/2004/WD-WCAG20-20040730/#priorities-techs)
along with today’s best Practices.

They are not an exhaustive list, not in order of importance and others may
have different ways of implementing them, however they will give a good foundation
for making a site more accessible.

Accessibility Defined

“Accessible” means usable to a wide range of people with disabilities,
including blindness and low vision, deafness and hearing loss, learning difficulties,
Cognitive limitations, limited movement, speech difficulties, photosensitivity
and combinations of these. Following these guidelines will also make your
Web content more accessible to the vast majority of users, including older users.
It will also enable people to access Web content using many different
Devices – including a wide variety of assistive technologies.

It is important to note, Accessibility is not just for the Blind, it is for
everyone, for those with Disabilities and for those without. Just like we have
come to realize the wheelchair ramp makes it easier to access buildings for
more than it’s intended target, so does an accessible website.

It should also be noted that along with Accessibility a site must also be “Usable”.
You can follow all of the guidelines but if a person has a hard time finding
something as simple as a link on your site, cant understand how to fill out
your form, page takes too long to load or the site is just plain difficult to
navigate, then Accessibility wont be of much use. The 2 go hand in hand.

Title

A descriptive title is one of the most important elements of a website. It’s
not good enough to name a page something like “Home page” or “About
Us”, it tells the visitor nothing about where they are other than on someone’s
home page and becomes even more meaningless if you found your way there by a
search engine, or if you bookmarked it.

A good title should let the visitor know exactly where they have landed, but
also not be too long for example: “Accessibility News, your online magazine
devoted to accessibility.”

Skip Links/Navigation

The very first thing should be the “Skip Link”. This feature offers
the ability to skip or jump over large blocks of links, text, images or other
material found before the Main Content. It also offers the ability to skip to
menus as well. This accessibility aspect benefits those who do not use a mouse
for one reason or another, those who use head wands, sip and puff devices and
other assistive devices such as screen readers.

Past thinking was that this feature benefited screen reader users only so the
link was made invisible, however that has changed and we now realize that although
some screen reader users will use this feature, it also benefits other disabilities,
so we now make it visible, usually the very first link at the top of the page
wherever possible.

Imagine if you had to use a head wand, sip and puff or even a keyboard only
to tab through a set of links 18 deep with numerous images and other material
before you got to the main content, it wouldn’t take long before you gave up
and left the site out of shear frustration.

WAI ARIA Landmark Roles

At this writing they are not widely supported, but using Landmark Roles is another way of bypassing blocks on a website and should be incorporated into any new designs. They basically do the same as skip links but allow you to jump to even more commonly found sections of a website such as search boxes.

Images/Alt Text

The first thing that should be pointed out is there is no such thing as an
“Alt tag”, the proper term is “Alt attribute” and “Alt
text”, this is one of the most common misconceptions regarding web accessibility.
Images can have an alt attribute but do not necessarily need alt text.

1) Informational

One of the main questions asked regarding images is when should I use alt text.
If you are describing a webpage to someone and you feel it is necessary to inform
them of what is in the image then it is informational and needs alt text (see
also complex images below).

2) Decorative

If an image is just there to enhance the look of the site, flowers, stars or
spacers, then alt text is not necessary, it can just be quoted out as in alt=””.

3) Functional

Graphics can also be used for links but is not recommended, text imbedded in
an image will present a real problem to screen magnifier users, especially if
the graphic is of poor quality. When the text/graphic is enlarge it distorts
and becomes pixilated and blurry, very difficult to read. This is also true
when using other graphical text. If you absolutely must use a graphic for your
link then the alt text should reflect the function not the look, which is usually
the destination, home about for example

4) Complex

If the description of the image is too large for the alt text, then you need
to create a “long description”, this can be accomplished by making
the image a link and adding in the alt text something like “Company logo,
for a full description hit enter” and have it link to a description of
the logo.

Depending on where the image is on the page you can also quote out
the alt text and add the description near or adjacent to the image.

Semantic Mark-up

Semantic mark-up using html elements such as headings, lists and paragraphs
add order, structure and meaning to your web pages. It also allows screen reader
users the ability to navigate faster through your site and provides visual clues
to others how certain sections relate to each other.

Semantic Mark-up is probably one of the hardest guidelines to understand but
when implemented properly will give a real boost to the accessibility of a website.

1) Headings

This is one of the most widely abused features of accessibility as too many
designers use them to format text instead of using Cascading Style Sheets (CSS)
because some browsers default font size for the top level heading, H1 is too
large they’ll start with a heading level 2 instead.

Headings are set as H1 through 6, each being smaller in text size than the
previous, for example using CSS, Level 1 could be set at a size of 160%, Level
2 150% and so on, Level 6 being no smaller than the paragraph text which should
be set at no less than 100%.

Imagine a page where the main topics are Fruits and Vegetables, it could look
something like this:

H1 Fruits

H2 Bananas

block of text

H2Apples

block of text

And so on. The next section would be:

H1Vegetables

H2Potatoes

block of text

H2Carrots

block of text

We can take this further by adding another level to our section on Vegetables
as follows:

H1Vegetables

H2Potatoes

H3Idaho Potatoes

block of text

H2Carrots

H3Baby Carrots

block of text

A screen reader user would be able to use keyboard commands to bounce from
one level to the next, knowing what sections were associated and sighted people
would see, judging by the size of the text, which ones are also relevant to
each other. You could also go so far as to use colours for each level as well,
just as long as the contrast ratio between foreground and background was sufficient.

As you may notice, you can also format the headings as left aligned, centered
etc to make it even more apparent what sections are linked.

2) Lists

List also adds order to your web pages by grouping like information such as
navigation links, or related items. They also provide, like Headings, a mechanism
for screen readers to navigate through the pages faster. Using the structure
of headings above a combination of headings and an unordered list could look
like this:

H1Fruits

• Bananas
• Apples
• Mangoes

H1 Vegetables

• Potatoes
• Carrots
• Peas

You can also use lists to create blocks of navigation, formatting them into
horizontal navigation bars with CSS and finishing them off with the proper heading
level.

3) Paragraphs

Use paragraphs to break up text into manageable sections for easier understanding
and reading. Don’t make them too lengthy as some will find it very difficult
to follow.

You should also consider the literacy level of your intended target and write
the text accordingly. Since people like to scan web pages, front end load your
paragraph by putting the main point first.

Colour Contrast

One aspect of accessible design that had been very much overlooked in the past
was giving the user options for changing the background and foreground colours;
however it is starting to be recognized as an important part of overall accessible
design. Unlike being able to easily change the font size using your browser,
changing colors is a lot more difficult to accomplish. however, with the ability
to separate content from presentation, it is easier to offer up multiple style
sheets to suit individual preferences.

Being able to select your colour preferences makes it easy for those with low
vision to choose a colour scheme that is easier on the eyes. It also makes available
versions of your site for emerging technologies that use small screens such
as Personal Digital Assistants (PDA) and cell phones.

Placing this option at the top of each page is a good idea as it makes it easier
for those who need it the ability to find it quickly.

It is also important to make sure the colours contrast sufficiently, so use
a colour checker such as the one at http://juicystudio.com/services/luminositycontrastratio.php#specify.

Additional Information

1) Hyperlink Phrases

This is another bad practice that designers use a lot when creating links especially
when using a graphic for the link. More often than not they won’t use alt
text so to a screen reader user a link reads something like, images/xtremesm
or images/basicsm, to a sighted person the text in the image might give them
a clue to what’s at the other end, but not to a screen reader user. Now imagine
50 of these links on a page.

Another bad practice is using phrases such as “click here” or “read
more”, they give no clue to their destination and again, imagine 50 of
these on a page.

Links should make sense when read out of context, explains what the link offers,
doesn’t talk about mechanics and is not a verb.

2) Opening New Browser Windows

At one time it was common practice to open links in a new window on the theory
that it would keep visitors on your site but that has changed for a number of
reasons, 1 it breaks the back button, which is the normal way a person goes
back to a previous site, couple this with a screen reader and it becomes even
more confusing as the screen reader doesn’t always alert you that a new window
has been opened, this can be very frustrating.

Another problem is that many people have pop up blockers turned on so your
webpage won’t open anyway, creating even more confusion.

If you must have the browser open in a new window, inform the user that this will happen, not in text beside the link but part of the link, for example” link name, opens in new window”.

3) Valid Code

Just like a house is built to certain specifications for a reason, so should
a website. Having valid code will not only ensure that your website will be
accessible to the browser of the day, but also any standards compliant user
agent in the marketplace today; including but not limited to adaptive technologies
used by those with disabilities.

Just because your website looks okay in your browser does not mean that it
will in others, or work well with screen readers and other assistive technologies.

A browser will try to render a webpage with invalid code as best as it can,
sometimes creating a mangled mess of the page or even crashing the browser.

Writing valid code is not that difficult and should be a cornerstone for an
accessible website.