Popular Mistakes in Universal Web Design

With today’s snazzy and competitive “Web 2.0” and social media world, universal design is many times forgotten. It’s bewildering as to why since there are many social, technical, financial, and legal reasons which support universal design practices. Let’s discuss some of the more prevalent issues in websites today, and how they relate to the main universal design principles.

The Principles

First, let’s review the seven universal design principles including some web-related examples. Keep in mind that these principles are applied, of course, to many industries outside of computer and web, such as civil engineering (buildings, walkways), entertainment (movie theaters, theme parks), and transportation (buses, trains).

  1. Equitable use: useful and marketable to people with diverse abilities.
    Example: A local government’s website is designed so that it is accessible to those who are using assistive technology such as a screen reader.
  2. Flexibility in use: accommodates a wide range of individual preferences and abilities.
    Example: Design of an airline website maintains visual aesthetics in various computer display sizes.
  3. Simple and intuitive: easy to understand, regardless of the user’s experience, knowledge, language skills, or current concentration level.
    Example: Primary controls of a web application are labeled with both text and symbols.
  4. Perceptible information: communicates necessary information effectively to the user, regardless of ambient conditions or the user’s sensory abilities.
    Example: An instructional video with captions provides the option to read the dialogue in addition to listening.
  5. Tolerance for error: minimizes hazards and the adverse consequences of accidental or unintended actions.
    Example: A technical error when submitting a form provides a clear explanation and options for how to continue.
  6. Low physical effort: can be used efficiently and comfortably, and with a minimum of fatigue.
    Example: Website design has sufficient color contrast and text size which minimizes eye strain.
  7. Size and space for approach and use: Appropriate size and space is provided for approach, reach, manipulation, and use regardless of the user’s body size, posture, or mobility.
    Example: A website is designed so that a physically impaired user who cannot use a mouse can still access all the content with a keyboard (or onscreen keyboard!).

Now that we are familiar with the principles, let’s examine several related web design issues.

Difficult to Read

The first popular mistake in Universal Design is textual content which, because of its design, is difficult for many to read. This relates to Principles 1, equitable use; and 6, low physical effort, specifically, eye strain. Note that cognitive reading difficulty is a separate issue not within the scope of this article. Good readability makes a website more usable and aesthetically pleasing. By the way, check out the Readability.com web application for super easy reading.

So what are the issues? Small-sized text and low color contrast are two key problems which make web typography difficult to read. In the example below, the main textual content is gray over a black background which fails Difference in Brightness and Difference in Colour tests. The text size is set to 12 pixels which is fairly small for many users, including myself. When removing the text size from the CSS, the browser displays the default size which is slightly larger, and much more readable! So instead of setting the default text to 12px or .75em, try a little higher like 16px or .95em.

Another best practice relating to text is to use relative sizing in the CSS (ems or percentages) rather than fixed sizes (pixels or points) to help ensure the user is able to resize the text in the browser as needed and have the layout scale with the text. Other good guidelines including provide user-friendly headings and ample line-spacing.

A web page with poor color contrast and small body text.

Difficult to Determine Text Links

By default, hyperlinked text is rendered with an underline. This is a long-standing convention in web browsing. Removing this convention not only breaks user expectations, but may make the link inaccessible to those with color-blindness or low vision. Many times compounding this problem is when links are defined with a dark color among black text. Similarly to the issue above, this relates to Principles 1 and 6.

My optometrist tells me that beginning around age 40, men’s eyesight begins to lose its ability to distinguish between colors. And boy is she right! Many websites have dark blue links with no underline, and I sure have to strain my eyes to determine the text links. The example below is from a news story. Can you see the text link? It’s quite difficult for me.

A web text with dark blue text link.

News websites seem to be notorious for using blue links with removed underlines, even from the distinguished UK site The Telegraph. To solve, simply remove the barrier by returning the underline. The Nomensa blog is a good example. Optionally, use bold text, or another visual denotation for a text link such as a colored background.

Visual Noise

Scattered layouts and content overload is not only visually unappealing, but not very usable nor accessible. This directly relates to Principle 3, simple and intuitive. In a Californian local government web page, shown below, there are numerous navigation areas, two large subsection banner images, and just an unorganized, scattered appearance. As a result, the main content doesn’t begin until the “fold” of the page, which is obviously not ideal. Also, there is no focal point, no visual hierarchy, causing a user to be even more likely to frantically search the page for what the user needs.

A website with content overload.

By contrast, check out the Australian Government and USA.gov websites; much more spacious and organized which creates a more usable experience.

More examples which create “visual noise” are:

  • Navigation: Too many sections of navigation on a page (as in example above) and too many levels of navigation can be confusing as well as a design nightmare.
  • Redundant tooltips: Title attributes on text links which have the same content as the link itself creates a tooltip that is obtrusive and unneeded.
  • Meaningless images: only use an image in content when it has value; it should convey meaning important to the textual content.

No Keyboard Access

Keyboard access, the ability to navigate a screen and interact with focusable objects using the keyboard alone, is essential. Unfortunately, many websites don’t provide this. More accurately stated, many websites create barriers to keyboard users since HTML is inherently keyboard-accessible. If you design for a mouse event, be sure to provide equal access for the keyboard. This creates device-independence; that’s a good thing! This issue relates to Principles 1, equitable use; and 2, flexibility in use.

When coding a website, there are several good practices to consider. In CSS, if the :hover pseudo class is used, ensure that a :focus state is also provided. Also, one should never remove the outline on the anchor element, i.e. a { outline: 0 } (be wary: most CSS reset stylesheets remove anchor outlines — be sure to add them back in in your own CSS later!). If it is absolutely necessary, then some kind of visual effect must replace it.

In JavaScript, do not use the double-click handler (onDblClick) because keyboards cannot execute this behavior. If the onMouseOver and onMouseOut JavaScript handlers are used, the onFocus and onBlur events must also be implemented to allow for keyboard access.

A large print keyboard.

Missing Alternative Text for Images

If an image provides relevant content it must be accompanied with alternative text. When the image cannot be seen—as would be the case with blind users, low-band users, and broken image links—then the “content” of the image still needs to be accessed. This issue, like above, relates to Principles 1 and 2. The most popular method to provide alternative text is enter the text in the image element’s alt attribute.

Many images such as graphical charts, comics, and infographics on the web do not provide a “long description” in the alt text and therefore block many users of its content. The Web Axe blog corrects some examples of this in its series “Fixing Alt”. For more about long descriptions, check out my two-part article Longdesc & Other Long Image Description Solutions.

Fixing Alt - If Web Browsers Were Celebrities

Here are some guidelines for alternative text:

  • If text is embedded in the image, add it to the alt attribute.
  • If an image is decorative only, it should contain an empty alt attribute. (e.g. <img src="decoration.png" alt=""/>).
  • For some images, such as charts and artwork, longer descriptions are needed.
  • If an image with a link contains content, then the alternative text should describe the function of the link, not the image itself.

The Takeaway

The seven universal design principles are an excellent resource when designing a website, as well as other products. People use a computer differently, and access the web differently. By keeping this mind, a web designer will be more successful in creating websites that are attractive, user-friendly and accessible to all.

Further Reading

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://twitter.com/stephen_womack Stephen womack

    Good article.  I know I have broken some of these rules myself. Good article to make me stop and think big picture when it comes to my web sites. 

  • Julia

    An article about Popular Mistakes in Universal Web Design displayed on a page with a background that makes the text unreadable… Mmmmm

    • Anonymous

      my thoughts exactly!…

      • http://www.facebook.com/profile.php?id=793341667 Laura Lestrange

        I’m on Firefox and it’s fine for me…

    • Erika

      Ok so it’s not just me!  I thought maybe it was intentional so that we could experience just how hard it is to read LOL. 

    • http://twitter.com/dennisl Dennis Lembrée

      I informed the editors about this issue. Seems to be older versions of Firefox. Thanks for reporting.

      • Me

        Not very old actually – it doesn’t work on Firefox 3. Thankfully Firebug does, allowing us to go into the CSS and add a background color to assist legibility. Was it worth the effort? Frankly, no.

        • http://www.mikeot.graphicline.co.za Graphicline

          Seeing as Firefox 5 is now out, 3 is OLD!

          • Web

            FF 3 is not THAT old.  FF5 is only a month old.

          • Smola

            FF3 was released June 2008, making it just over 3 years “old.” FF3.5 was released almost exactly a year later, and 3.6 was released 6 months after that. Comparatively, IE8 was released March 2009, over 2 years ago.  However, IE did not always have the benefit of automatic updates like Firefox has.  I wouldn’t say FF3.x is “old” in the strictest sense of the word, but as Graphicline pointed out, it is *relatively* old.

            In any case, why have you held off updating? Have a handful of extensions that haven’t updated for FF4-5?

      • Anonymous

        Should be fixed now. :)

        —Pascal.

    • http://www.theseosubmission.com Millard

      great article

    • Dave Green

      I’m struggling (colourblind) to identify the link text!

  • Terry Fitzgerald

    Really useful ideas with the exception that embedded links to information opened in this page not in a new page so I had to keep coming back.

    • Erika

      If you hold down your ctrl or cmd key when you click the links it’ll force it to open in a new window…fyi :)

      • http://twitter.com/designmodo DesignModo

        good tip Erika :D

  • http://friendly-machine.com John Hannah

    Nice article. I have to admit, I often forget some folks navigate using the keyboard. I think with some of these principles, it’s important the designer know the target audience. There are cases where aesthetic considerations may trump universal accessibility. You just have to be certain the choice is well considered and can be justified.

  • Anthony

    It is ironic that you talk about link color contrast and underlining as a good practice on a web page where the links are brown and not underlined.

    • http://twitter.com/dennisl Dennis Lembrée

      True, but at least the links are red and not dark blue…

    • Web

      I agree.  Since when was orange a good color for anything – except sunsets and oranges.

  • http://accessibleweb.eu/ Richard

    Interesting, although the point about underlining links is slightly undermined by the fact that the links on this blog aren’t underlined. 

    It isn’t that simple an issue anyway, for many dyslexics the addition of underlining makes the text harder to read and so LESS accessible. 

    • http://twitter.com/dennisl Dennis Lembrée

      Good point, but at least the links are red and not dark blue…

      Do you have a reference for your second statement?

      • http://accessibleweb.eu/ Richard

        Regarding underlining of links causing problems I would point you in the direction of http://www.distilled.net/blog/distilled/usability-versus-dyslexia/ – talking about redesigning the website for the British Dyslexia Association – although to make matters more complicated their website does have some underlined links.

        The difficulty with underlining is that it can cut into descenders (or at least be too close to make them distinguishable). Of course there are alternative ways of underlining which could avoid this, using CSS outline or border and ensuring they are not too close to descenders, but of course it is a compromise.

        • http://twitter.com/dennisl Dennis Lembrée

          Great, thanks for the info and link; I’ll go tweet that article!

  • Nikir

    not readible in firefox!
    do what you preach …

  • http://www.philippinewebservices.com/philwebservices-global-solutions-inc-%E2%80%93-proudly-pinoy/ philwebservices

    I really had a great time reading on it. Although I’m not used to do web design but when I read it all over it could really help those web designers a lot and with this they can now prevent some mistakes.

  • http://www.pro-logix.net/ Bill

    Nice article. It is very easy to forget these principles, especially when you are fighting with the business decision makers who don’t understand why these things are important.

  • http://www.itmitica.com/en IT Mitică

    Another good article with good advice that’s building up in the back of my head for when I need it. Thank you for explaining also what to do.

  • http://logodesignblogs.blogspot.com/2011/07/5-ways-to-set-price-of-logo-design.html Logo Design Blog

    Amazing Article, great example for beginners.
    Thanks 

  • website design Hyderabad

    Web Design&Development is a strategic blend of creative designing and graphic art, content planning and management, the right technology deployment– along with a robust server/data center to host the website.
    website design Hyderabad

  • http://twitter.com/NeilkWhitehead Neil Whitehead

    Reading list….not forgetting “Don’t make me think’ by Steve Krug
    http://www.amazon.co.uk/Dont-Make-Me-Think-Usability/dp/0321344758

  • http://webylife.com Nikunj Tamboli

    Interesting read according to me Difficult to Read Text- is one of the common mistake web designer makes
     

  • CR

    Another principle to use for making text more readable is proximity. Subheads should be closer to the text that follows than the text that precedes it. I suggest you alter your stylesheet to fix this issue, as it makes it hard for me to read your articles.

  • http://twitter.com/dimspace dave marsdin (dim)

    The background redraws constantly in opera when you scroll the page as well. Enough to make me leave the site. 
    And why tell us that the standard is to underline hyperlinks so that they are easily visible to people and then not underline any of your hyperlinks. 
    Incredibly slow to load this page on a 10mbit connection as well 

  • http://eventlogos.wordpress.com/ Event Logo Design

    Simply good article, great way to elaborate the mistakes in web designs.
    Thanks for sharing.

  • http://eventlogos.wordpress.com/ Event Logo Design

    I like the way this article gets chants for being favorite for web design inspiration seekers. Thanks for such a nice article.

  • http://www.modred.co.uk Scott

    Thanks for that. Some nice tips there. The site looks fine to me… I’m using chrome.

  • http://www.webdesign-in.de/ Monika T-S

    I agree “By default, hyperlinked text is rendered with an underline. This is a long-​​standing convention in web browsing. Removing this convention not only breaks user expectations, but may make the link inaccessible to those with color-​​blindness or low vision.”

    but Ican’t find textlinks with “underline” here on this site ;)

  • http://james@composerhome.com James Humberstone

    Kinda funny how this article breaks the underline links rule while it complains about news sites that break the underline links rule!!

    Oh some people already pointed that out. Oh well. I kind of think Blue is better than red if you’re not underlining… given it’s the “original” link colour.

  • D’vid

    That ‘difficult to read text’ part should be applied to your new news letter too. It is extremely hard to read as of late. For the rest: all good.

  • Kevin

    Agree with the comments about NOT underlining hyperlinks – for me, if you’re going to post an article about the failures of good practice, then avoidance of such practices should be aparamount within the article, regardless of the colour of the font.

    Similarly, although I didn’t hover over all of the images, there was no “alt” text – the same principle applies.

    The article would have been MUCH more credible had the mistakes not been repeated in the article itself. :)

  • Pingback: Japanese Style Web Design