12 Accessibility Pitfalls to Avoid

by on 18th November 2009 with 46 Comments

Usability isn’t an exact science. What one visitor considers helpful another considers annoying. Despite this uncertainty and complexity, you should always strive to make your site as accessible as possible to the people you’re trying to reach. You’ll find that a little bit of catering to the special needs of a minority of users can drastically improve the function of your site for all users. Here’s our list of twelve accessibility pitfalls to avoid along with some examples showcasing sites that either excel or fail miserably in these areas.

Captchas

screenshot

Web developers sure seem to love captchas, but users can’t stand them. Grant it, they’re not all bad but most of them are either impossible to read or unnecessarily complicated like the one above. Another important issue is that captchas often represent a serious roadblock for the vision-impaired. If you absolutely must use a captcha, make sure most humans can read/understand it and have options in place for those users who are unable to see it.

Not Using “alt” Attributes on Images

screenshot

It’s definitely a good practice to always insert a helpful bit of alt text for the images on your site. This way users who are unable to view your images are represented with a text equivalent. Note that not all browsers treat the alt attribute the same way. Because of this many developers confuse the purpose of alt and title, mistakingly thinking that images with an alt attribute should display a tool tip. In reality, the title attribute is what should display a tip on mouse over (see the Smashing Magazine example above).

Using Pop Ups for Content

screenshot

Most modern browsers ensure that your content will be blocked if it comes in the form of a pop up. This means you’re running the risk of losing several possible users who simply move on when they realize that your site isn’t compatible with their setup. Only the most dedicated visitors will investigate the problem in your help pages to discover how to solve the problem.

Improper Labels on Forms

screenshot

Visit Mint.com (shown above) and check out their sign up form. Notice that you can select a specific field whether you click on the field itself or on the attached label. This is because the Mint developers are using the label element properly. The lesson here is that simply labeling your forms with plain text isn’t enough. Instead, you should always use the label element to maximize usability. This not only provides easy-to-select fields, but also ensure that screen readers and auto-fill functions work properly with your forms.

Unrecognizable Links

screenshot

The screenshot above shows a section of the homepage of Tutorial 9. Notice that you can instantly differentiate between the text that contains a link and the text that doesn’t. Popular ways to create link differentiation include color contrast, underlines, and rollover effects. Notice that Tutorial 9 actually employs all three methods! This dramatically increases usability because users can clearly see where to click if they wish to access more content.

Vague Link Text

Consider the following examples:

1. To visit our CSS Gallery, click here.
2. Be sure to stop by our CSS Gallery!

As you scan a page, your eyes are likely to focus on differentiated links more than the rest of the text because they stand out. The first example may seem like a good way to go because the call to action “click here” is what catches your eye. However, without properly reading the entire sentence, “click here” doesn’t inspire action because the user isn’t sure where it leads. In contrast, the second link can be instantly recognized and understood as a path to a CSS gallery, regardless of whether or not the user has read the content before it.

Cluttered Content and Insufficient Spacing

screenshot

The site above is really more of a parody than a proper example, but it gets the point across and was far too funny not to include. Put simply, don’t crunch your content together or include an outlandish amount of pictures or text (news stories and blog posts are exceptions). Small business owners just getting started on the web almost always fall prey to this mistake and include paragraph after paragraph of information that no one will ever read. Like it or not, the web is a visual beast. The information on your page should be clearly organized and easily understood within seconds.

Changing Font Size Shouldn’t Break Layout

screenshot

Not everyone on the web is a 19 year old with 20/20 vision. Many users, young and old, have to increase their default text size to make a page more readable. Check out what happens to Fox News (and several other popular news sites) when you increase the font size. The layout is completely destroyed: the navigation links all run together, buttons are miles from their associated text and the ads running down the right side have disappeared completely. This sort of oversight can alienate a large portion of visitors.

Poor Contrast Between Text and Background

screenshot

These guys may be toting their design skills but they’ve ruined their credibility by doing so with a graphic that’s nigh upon impossible to read. I understand that sometimes clients require you to use a stock photo with zero copy space, but it’s your job as a designer to figure out how to integrate easily readable text with the image. Use bold type, strokes, drop shadows, color bars and anything else you can think of to differentiate your message from its background.

Overuse of Flash

screenshot

Don’t misinterpret this as a Flash bashing mantra. Flash has brought the web to a level of richness that can make a developer’s wildest dreams come true. I am just as prone to being sucked in by an amazing and unique flash site as the next guy. However, use extreme caution when integrating Flash so much into your website that it won’t function without it.

Make sure you carefully consider the reason behind the site’s existence and your target market for the site. If you want to build an online application or eye candy for visitors, Flash may be the way to go. But if your target market is the general public, an all Flash site could be a bad idea for a number of reasons. The first is usability, Flash-based site developers can often be so obsessed with making something pretty that zero thought is put into whether a user can actually figure out how to use the site or not. I’ve noticed that big name ad agencies tend to follow this trend by making beautiful websites that can take minutes to figure out how to use. Another reason to avoid Flash is that many users are so annoyed by Flash that they disable it completely. Finally, always consider whether it’s acceptable to sacrifice mobile visitors. Many smartphones like the iPhone don’t yet support flash and are therefore shutout of many mainstream websites.

Complicated Drop Down Menus

screenshot

There’s a fine line between a helpful menu and an overloaded mess and the developers at Microsoft are flirting with it. On one hand, they are providing users with easy access to their full line of products. On the other hand, they’re throwing a ton more content at users than they are used to in a simple drop down menu. This might be acceptable if clicking the “all products” button took you to a dedicated page containing the list of products, but that’s not the case (clicking only closes the menu). Spend a minute on their site and you’ll see that nearly all of the navigation menus are crammed full of small (arguably hard to read), monotonous links.

The point is that over populating menus usually springs from an attempt to increase usability while in reality resulting in decreased usability due to the inordinate amount of information that must be sifted through to get where you want to go.

Conclusion

So there you have it, twelve easy ways to make your site friendlier to the masses. I hope this article has helped you spot a few ways you can start improving the accessibility of your designs. Let us know what you think of these tips. Feel free to completely disagree on any or all of them and be sure to let us know about all the little things that bug you regarding accessibility.

Comments & Discussion

46 Comments

  • David

    Nice article, very useful. I did notice though that your Microsoft link is to BBDO Worldwide’s site. Oooop!
    Thanks for the info.

  • Joshua Johnson

    Good catch! Fixed.

  • andrew

    I’m not going to defend what Microsoft is doing, but Jakob Nielsen (arguably the leader in web usability) says that “mega dropdowns” aren’t always a bad thing.

    http://www.useit.com/alertbox/mega-dropdown-menus.html

  • Joshua Johnson

    I agree, but check out the examples in that article and compare it to my comments about Microsoft above. The Food Network dropdown breaks things up with nice color bars making the sections more clearly defined. And they still cram way less content in them than Microsoft. Also, when you click on a navigation button, it takes you to a dedicated page for that material instead of merely opening and closing the dropdown.

    This is exactly what I mean by saying there’s a fine line between a helpful menu and an overloaded mess. The Food Network put a little more time and thought into their menus and it resulted in a serious increase in usability.

    Great article! I appreciate the discussion.

  • http://www.18aproductions.co.uk Tom

    Really great tips as always, thanks! :)

  • Chris

    @andrew
    “Jakob Nielsen (arguably the leader in web usability)”

    I think a lot of people would argue with that statement. UX is way bigger than Nielsen.

  • gsweet

    the problem with these mega drop downs is that once in them, there is no provision to scrolling within the space they occupy.

    For example, you move to a netbook with a resolution of 1024×600… some of these Mega drop downs are more than 700 pixels tall and the area below 600 pixels is unscrollable and inaccessible.

  • http://jitendravyas.com Jitendra Vyas

    Beautiful article

  • Roger

    Interesting points – but you should include links to tutorials explaining HOW to avoid these pitfalls, rather than just drawing attention to them.

    I for one find it difficult to ensure that increasing text size will not affect layout, as I’m sure many developers do.

    I think you should at least point people in the direction of how to develop to avoid these.

    :o)

  • Pingback: Notable Tech Posts – 2009.11.22 | The Life of Lew Ayotte()

  • Pingback: 12 Accessibility Pitfalls from Design Shack « Blog of Northwich Web Designer TheDaveyB()

  • Deepak Chaudhary

    Hey Joshua, Very interesting and correctly evaluated and written article!! Some of the things like “title” for images etc are very common but designers tend to ignore them in a hurry!! Thanks for this!!

  • http://www.musings.it Federica Sibella

    Hi Joshua, useful post indeed. I completely agree on the overuse of Flash: it’s maybe very pleasant but too often hard to use. The correct use of label in the forms is also a very good reminder. On the other side I’m not so convinced about the vague link paragraph: sometimes a “click to download” is clearer for the user if the explanation about what is to be downloaded was previously given.

  • http://www.trevorsaint.com Trevor Saint

    Love the article. Well written, and easy to read. And a nice memory refresher.

  • Charles

    AKA, Usability 101. Good deal reiterating these points to those who have not burned them into their brains yet (for lack of intuitively realizing them), though.

    But on the last point (Complicated Drop Down Menus), I would say that in some applications (ie: ecommerce) they increase usability as they reduce the time it takes to reach a subcategory.

  • http://designinformer.com Design Informer

    great article! Thank you for this awesome article. Going through my site now and applying these.

  • Lane

    I think the word you are looking for near the beginning is “granted” not “grant it”.

    And why didn’t you follow your own advice about alt tags on images? I don’t think many people would consider “screenshot” to be a helpful alternative to seeing the actual picture.

  • Pingback: Mes favoris du 24-11-09 au 25-11-09()

  • Big D

    “Usability isn’t an exact science.” You are correct. It’s not. Usability is also not accessibility, either.

    So what is your article really about? Since you offer tips about accessibility and usability and do not distinguish between the two, you leave people just as confused as when they arrived here. You’ve caused more problems than you attempted to solve.

  • Autocrat

    What concerns me is that even today – after Years of design development, studies, articles etc. – there are Still people asking questions about this stuff!

    There is No lack of information about Better Design/Coding Practices.
    If people actually bothered to learn what they were doing – rather than being reliant on Dreamweaver and Photoshop – we wouldn’t have so many sucky sites!

    Worse – you do Not know who to trust.
    Jsut go look at the Guild of Accessible Web Designers (GAWD) – and resize your text!
    Possible one of the Most Common requirements of users is to be able to adjust the text size – and so many sites literally break (I know – bad pun too).

    There’s no excuse people.
    The information is out there.
    It’s jsut down to plain ignorance and laziness that you don’t already have the answers.
    It also goes to show that you are Not testing your stuff out!

    Go look at things like CSS Gardens etc.
    Look at how many of those “beautiful” designs actually suck when it comes to being functional!

    .

    So – here’s the general idea.
    Build it plain.
    Make sure it works.

    Make sure that it works with the keyboard and gives responses in the same ways as it does for Mouse.
    Yes, that means you should be using :focus and :active (cover ie6) as well as :hover.

    Make sure you can resize text.
    Do Not make things of fixed height – and if you do – set overflow on it!
    If you want set measuerment – use EMs, and set heights in EMs – then things scale.

    Check the colours you are using – make sure there is Contrast!
    MAke sure there is contrast before you start slappign in image backgrounds … and after the images are in – make sure there is still contrast!

    Stuff like that is written All Over the Net!
    Seriously – try Googling for it!

    .

    The distinction between Usability/Acessibility can be a little slim at times.
    Increasing the response zone of a link with padding … is both A and U.
    Making sure that labels/inputs respond visually … is both A and U.

    Lets face it – if you improve the Accessibiltiy of the site (or at least bring it up to the bsics it should be at), you are improving the Usability of the site for that user-group, yes?

    .

    Okay – lecture over.
    Sorry
    ;)

  • http://webaxe.blogspot.com Web Axe

    Nice article. Would love to see Headings on the list (markup as well as usage). Also, requiring JavaScript for core functionality is a big no-no.

  • Pingback: Wayne State Web Communications Blog » Blog Archive » [Friday Links] The Thanksgiving Edition()

  • jeff

    “Not Using “alt” Attributes on Images”
    Dude when was this article written, 1994? Who can’t download images? Ok I’m done ranting and anxiously look forward to your upcoming article “10 tips for Netscape 3.0″

  • http://www.enailsupply.com/zoya-nail-polish.aspx zoya nail polish

    This is very useful information, especially for web designers. Thanks!

  • http://www.enailsupply.com/ nail tek

    I am happy to find result here in the post, thanks for sharing.

  • http://www.notabledesign.com Montreal website design company

    Very nicely written article. I do agree with all the said pitfalls

  • http://www.249designs.com/ fort collins web design

    “Poor Contrast” is still a problem when surfing the web. I really like that so many blogs are making the header text bigger. Makes that blog much easier to read and navigate.

  • http://www.tacticalfinancing.com Houston Apartment Financing

    I know I’m a little late in adding my thoughts but this particular article made me think. It was an enlightening article. I have become a frequent reader of your blog since I came across your site a while back. I can’t say that I agree with all you mentioned but it was emphatically intriguing ! I operate a small firm that secures funding for businesses in the Houston market. You could say I specialize in Houston Commercial Financing and deal with people that banks won’t even talk to anymore. I’m trying to create American jobs so I hope you’ll permit me including my link in this post. I’m always seeking to promote our very special service and am the sort who still believes America keeps getting better and better in spite of our current difficulties. I’m not sure if my earlier comment was successful so I’m attempting again. Thanks again for an engrossing article. I will be back again soon.

  • http://www.thenetimpact.com/ Web Design

    I’m with you on the captchas! They are frequently very hard to read and it takes many tries to get it right – frustrating for a site user.

  • http://www.myfirstblog.org My First Blog

    I image this could be various upon the written content? nonetheless I nonetheless believe that it usually is appropriate for just about any type of subject material, as a result of it might often be satisfying to determine a warm and delightful face or maybe listen a voice when preliminary landing.

  • http://farmvillesecretsrevelaed.org triu

    really good results are pressented

  • http://www.artversion.com web design

    I love your comperson here we use it in web design as well.

  • http://www.joshwillishomes.com Austin Home Builder 

    It’s laborious to search out educated individuals on this topic, but you sound like you know what you’re talking about! Thanks

  • http://www.sourceomega.com fontaines d’eau

    I would definitely follow those rules in my website. Thank you for helping to realize something very important.

  • http://www.pkblinds.co.uk blinds doncaster

    Holla, fantastic page I have just subscribed to your feed

  • http://www.paggreviews.com/ pagg stack

    Well these sort of security things are really good for a site as this can prevent spamming up to a lot of extent.

  • http://www.themarketingconsultant.net/ san diego IT consultant

    I really think that these kind of security will help to prevent spamming. I will try it out in my site.

  • Pingback: tae min()

  • http://www.slimming-products.net slimming products

    I like it very much and which you shared the info in this post is very useful. Thanks for sharing a wonderful post. I found this post while surfing the web.Thanks for sharing this article.

  • http://www.xn--mothravfall-08a.nu Håravfall

    I would like to thank you for the efforts you have made in writing this post. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own blog now.

  • http://www.insulbarrier.com.au roof insulation

    I think you write very good article I agree with the views and ideas! Second, the article gave me the feeling is very large, so I learned a lot of knowledge. Very grateful to the author is share.

  • http://physicaltherapy-assistantsalary Physical Therapy Assistant Salary

    I loved as much as you’ll receive carried out right here. The sketch is tasteful, your authored subject matter stylish. nonetheless, you command get bought an edginess over that you wish be delivering the following. unwell unquestionably come more formerly again since exactly the same nearly a lot often inside case you shield this hike.

  • http://www.tgc-anaheim.com/index.php?route=product/category&path=107_161 コート

    Thank you for the information that provided.

  • http://www.ballyabc.com Side Effect

    Hey, really great work, I would like to join your blog anyway so please continue sharing with us.
    Side Effect

  • jaffa

    Great.

  • http://81url.com/cnatrainingonline76450 certified nursing assistant training

    Whatever the case, cost should never be weighed against what you intend to benefit in the long run.
    Note that you don’t need a high school diploma
    or GED to enter into online CNA training. You can check
    with the licensing authority of the respective state for the CNA certification renewal steps.

Subscribe
Membership
About the Author