DesignFestival: Popular Mistakes in Universal Web Design

By Dennis Lembree
20^th Jul 2011
General, HTML CSS, JavaScript, Typography, Usability
Tutorial

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).

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.
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.
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.
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.
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.
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.
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.

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.

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.

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.

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.

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.