A Complete Beginner’s Guide to Web Accessibility

Posted in Web Design4 years ago • Written by 9 Comments

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!


113 Written ArticlesWebsiteGoogle+

Rean is the editor of 1stwebdesigner. He regularly writes about freelancing, technology, web design, and web development. Rean also writes at Moneyarty.com, a blog dedicated to teaching people how to make money online.

9 Comments Best Comments First
  • Rean John Uehara

    Tuesday, November 16th, 2010 17:47

    8

    I advise future readers of this article to follow your link since it brings them closer to the truth. Thanks for your time, you write magnificent feedback. :)

    +1
  • Mark Wassmer

    Monday, November 8th, 2010 10:50

    4

    Nice little article, provides a good starting overview for those who may not be familiar with some of the fundamentals of Accessibility.

    Couple of comments.

    3. Anchor links and Table of Contents – for more complex sites I would look into the use of WIA ARIA, which would provide you with better options for what you are looking to achieve here (certainly on complex sites). Also very AT friendly, where supported and ignored where not. (http://www.w3.org/WAI/intro/aria.php)

    4. Seems what you are saying is to use Semantic Markup. (good basic starting point – http://expression.microsoft.com/en-us/dd439542.aspx – ignore the software references!)

    8. Your Guidelines point to version 1.0 of the WCAG – should point to 2.0.

    Tools: Automated tools are great but should only be used as part of the testing process. Nothing beats real world testing, so where possible engage in user testing, compare your results to the automated test and it will be very insightful for future reference.

    That said some additional tools worth mentioning:

    TAW3. (although WCAG 2 is beta still works great.): http://www.tawdis.net/ingles.html?lang=en

    Luminosity Colour Contrast Ratio (is great as it will also tell you the pass level depending on text size): http://juicystudio.com/services/luminositycontrastratio.php

    All the best

    0
  • Henny

    Monday, November 8th, 2010 07:42

    3

    It’s a tough site to communicate as it is so experiential. I have to confess that I’m not a fan of Harry Potter so didn’t ‘get’ all the clues and cues for finding rewards. The challenge was to make it fun, interactive and accessible without giving everything away.

    Up until a few years ago Flash had not been accessible and some screen reader users have told me that suddenly using intricate Flash sites such as JK Rowling marked a paradigm shift in how you browse in relation to HTML pages. Remember this was pre Ajax, WAI-ARIA and social networking sites – all of which changed much of how we browse.

    So I know what you’re saying it can be seen as a bit confusing but the site, given the challenges it faced, was a pretty good start I think.

    0
  • Henny

    Monday, November 8th, 2010 07:13

    2

    A quick note on the JK Rowling site. When it was built it 5 or 6 years ago the Flash version was built to be as accessible as we could make it at the time. We were involved in the testing (I was at RNIB in the UK at the time) and you should be able to access it with a screen reader, all elements are keyboard accessible and there is accessibility help to explain keyboard shortcuts etc.

    We did advise that the text only version be dropped in favour of an equivalent version with colours, images, layout and so on but this wasn’t to be. I think the fact that an accessible Flash version was given was a pretty good achievement however.

    0
  • Jakub McJabbo

    Monday, November 8th, 2010 07:26

    5

    JKRowling.com is so confusing – its nice that you can read that “birds are singing” in top right corner, but it is so difficult to oriented on this site. Of course – i´m speaking about flash version.
    However – thanx for sharing all those usefull tools.

    0
  • Rahul

    Saturday, November 6th, 2010 19:04

    1

    Oww Great , i swear this is what everybody needs to know before starting , everything has to be considered i believe!! i see it’s all about being unique and original and very motivated !!!!! cool well done :)

    0
  • Brett Widmann

    Thursday, February 10th, 2011 22:02

    9

    This is a really helpful article! Accessibility is one of the most important things when creating a site.

    0
  • 1stwebd

    Monday, November 15th, 2010 16:47

    7

    Even the so-called “accessible” flash version is not accessible. The text is too small for me to read.

    0
  • Stijn

    Tuesday, November 9th, 2010 23:51

    6

    Interesting article. Web accessibility is something that’s often forgotten. It seems simple, but there are too much websites with difficult navigation. Don’t forget, web visitors are lazy. If they don’t find what they are looking for within a couple of seconds, you loose them in just a click…

    0
  • Brett Widmann

    Thursday, February 10th, 2011 22:02

    9

    This is a really helpful article! Accessibility is one of the most important things when creating a site.

    0
  • Rean John Uehara

    Tuesday, November 16th, 2010 17:47

    8

    I advise future readers of this article to follow your link since it brings them closer to the truth. Thanks for your time, you write magnificent feedback. :)

    +1
  • 1stwebd

    Monday, November 15th, 2010 16:47

    7

    Even the so-called “accessible” flash version is not accessible. The text is too small for me to read.

    0
  • Stijn

    Tuesday, November 9th, 2010 23:51

    6

    Interesting article. Web accessibility is something that’s often forgotten. It seems simple, but there are too much websites with difficult navigation. Don’t forget, web visitors are lazy. If they don’t find what they are looking for within a couple of seconds, you loose them in just a click…

    0
  • Jakub McJabbo

    Monday, November 8th, 2010 07:26

    5

    JKRowling.com is so confusing – its nice that you can read that “birds are singing” in top right corner, but it is so difficult to oriented on this site. Of course – i´m speaking about flash version.
    However – thanx for sharing all those usefull tools.

    0
  • Mark Wassmer

    Monday, November 8th, 2010 10:50

    4

    Nice little article, provides a good starting overview for those who may not be familiar with some of the fundamentals of Accessibility.

    Couple of comments.

    3. Anchor links and Table of Contents – for more complex sites I would look into the use of WIA ARIA, which would provide you with better options for what you are looking to achieve here (certainly on complex sites). Also very AT friendly, where supported and ignored where not. (http://www.w3.org/WAI/intro/aria.php)

    4. Seems what you are saying is to use Semantic Markup. (good basic starting point – http://expression.microsoft.com/en-us/dd439542.aspx – ignore the software references!)

    8. Your Guidelines point to version 1.0 of the WCAG – should point to 2.0.

    Tools: Automated tools are great but should only be used as part of the testing process. Nothing beats real world testing, so where possible engage in user testing, compare your results to the automated test and it will be very insightful for future reference.

    That said some additional tools worth mentioning:

    TAW3. (although WCAG 2 is beta still works great.): http://www.tawdis.net/ingles.html?lang=en

    Luminosity Colour Contrast Ratio (is great as it will also tell you the pass level depending on text size): http://juicystudio.com/services/luminositycontrastratio.php

    All the best

    0
  • Henny

    Monday, November 8th, 2010 07:42

    3

    It’s a tough site to communicate as it is so experiential. I have to confess that I’m not a fan of Harry Potter so didn’t ‘get’ all the clues and cues for finding rewards. The challenge was to make it fun, interactive and accessible without giving everything away.

    Up until a few years ago Flash had not been accessible and some screen reader users have told me that suddenly using intricate Flash sites such as JK Rowling marked a paradigm shift in how you browse in relation to HTML pages. Remember this was pre Ajax, WAI-ARIA and social networking sites – all of which changed much of how we browse.

    So I know what you’re saying it can be seen as a bit confusing but the site, given the challenges it faced, was a pretty good start I think.

    0
  • Henny

    Monday, November 8th, 2010 07:13

    2

    A quick note on the JK Rowling site. When it was built it 5 or 6 years ago the Flash version was built to be as accessible as we could make it at the time. We were involved in the testing (I was at RNIB in the UK at the time) and you should be able to access it with a screen reader, all elements are keyboard accessible and there is accessibility help to explain keyboard shortcuts etc.

    We did advise that the text only version be dropped in favour of an equivalent version with colours, images, layout and so on but this wasn’t to be. I think the fact that an accessible Flash version was given was a pretty good achievement however.

    0
  • Rahul

    Saturday, November 6th, 2010 19:04

    1

    Oww Great , i swear this is what everybody needs to know before starting , everything has to be considered i believe!! i see it’s all about being unique and original and very motivated !!!!! cool well done :)

    0

Comments are closed.

54.237.153.141 - unknown - unknown - US