Most beginners in development and designing will not look deeply into accessibility, the purpose of this article is to educate beginners as early as possible of the possible pitfalls and how to avoid them. It is like a cookie jar is atop the shelf and a kid is trying to reach it but can’t. What happens next? Frustration enters! Not providing a way for your visitors to get a grab of that cookie jar is very not fine, especially when they really need it.

What is Accessibility

Image by: Yello-Dog

Millions of people around the world have disabilities that hinges them from information. Some clients that developers and designers might encounter can be specific about projects that are for people with disabilities.

Accessibility is simply defined that people of all sorts, regardless of disability, can access the information you provide in your website. There are many ways on how to make your information accessible to people, from simple language translation to transcribing audio or adjusting the whole design.

You Are Not The Default

The interface is for the users. Always remember that you are not the default of things. There are many things that seem very simple to you but very hard for other people. Time to see what works for who.

Things to Consider

Image by: Svilen Milev

1. Placement of Things

Placement of things in your website is important. Most of the people I know, and those I don’t, start looking for the “Search bar” of each website on the upper right corner or at the center top, and if is not there the reaction would be “huh, there’s no search?” before finding it on the left or right panel. This is because people are used to seeing the search bar there. This apply to Register, Login, and Logout too.

2. Present Content in Different Ways

When using images, provide ALT attributes to describe the image. For audio recordings and videos, you may provide transcripts for people who have disabilities with hearing.

Although design, aside from content, really gives a website it’s life it is important to consider those who can’t load all that images, or flash, quickly because of slow internet speed. JKRowling.com has multiple language versions for her website, it also has a Text Only version since the main website is flash-based.

Dissemination of information through audio and video is a good way of being more expressive to your audience, but what about those who can’t hear? In this case, providing transcript is a good take. However,  it might be too taxing to transcribe a one-hour video, just provide a summary or a list of important things mentioned.

3. Provide Easy Navigation

Image by: Pawel Kryj

• Pagination

  Use pages to avoid loading too much content in a single page, many websites filter 10 posts per page for loading speed and browsing comfortability.

• Anchor links and Table of Contents

  Although not much used today, this might actually help in navigating easily inside a single page. A good example is Wikipedia, the moment you load a page you don’t have to go far just to know what the content is because of the table of contents. Now, imagine Wikipedia without the table of contents. Now back to reality, which is better?

• Sitemap

  Having a sitemap enables visitors to easily see all of your site’s webpages, usually in a hierarchical format.

• Navigation panel

  Who doesn’t have one?

4. Use HTML Tags Accordingly

There are cases when instead of adjusting font size, header tags are used. This might cause complications with devices or applications that rely on tags for parsing.

5. Do Not Rely on Colors Alone

Vischeck simulates how a colorblind may see images in your website. In this case, text colors might have a negative effect. Better stick with black for texts since information conveyed in colors will cause problem for colorblind visitors.

There are also instances when a person with Photosensitive Epilepsy should be considered when designing flash banners as they are sensitive to visual stimuli with certain patterns and flickering. More tools for accessibility below.

6. Icons and Texts for Better Context

An icon conveys a thousand words…most of the time. But for people who are not used to icons and symbols a house will not make sense to get to the home page. A combination of icon and text is perfect, look at Yahoo!’s homepage, understandable right? Lack of context disorients your first time visitors(that feeling of being alienated).

7. Give More Control

For users who are having a hard time with seeing font size under 14 there are tools that they can use to magnify your website, but will it be too much if you provide it yourself through stylesheets? Try giving them the power over your font size, and they’ll love you for that.

8. W3C’s Guidelines and Checklist for Accessibility

The W3C published its Web Content Accessibility Guidelines for specific points to consider for better access. A Checklist for Accessibility is also available. It deals with colors, languages, tables, images, and almost everything that a web developer/designer would want to know.

Some Tools to Use

EvalAccess

A web-browser accessibility evaluator. You have the option to evaluate a single page or the entire website, or the source code itself.

WAVE

Another web accessibility evaluation tool which provide an easy-to-understand report about how accessible your site is.

Accessibility Color Wheel

Not adept at color pairing? Use this tool to see if your colors are OK! for the three kinds of color blindness.

WebAnywhere

Hear if your website is properly read by accessibility tools. No screenshot for this one because you have to try it to know how it works, behold the power of hearing!

There are many tools available to make user experience better, W3C has a List of Accessibility Tools that you may want to check to provide your visitors an accessible content, or to provide your client satisfaction.

By sharing the tools and techniques that you know of, many people are given the chance to access information with ease. So share below!