Examples of Inaccessible Web Design

On this page are screenshots showing the effects poor web design decisions can have on a page. Each example shows one image of the intended page display, an image of an accessibility issue, and a description of the problem. These are from real sites around the web.

Every problem described here can be avoided simply by using modern web design techniques that focus on accessibility.

Pick an image for a larger view.

Font Size Dependency

In this example, the page is designed with exact font sizes set. Then each element on the page (paragraph, image, etc.) is placed at exact x/y coordinates that depend on that font size. So what happens when a visitor finds that the text is too small to read? They make it larger, of course!

When the text is zoomed, the carefully placed elements do not change their positions accordingly, so they now overlap. The content is more unreadable than it was before.

This inaccessible page was created with the tools provided by Homestead.com, in our opinion the absolute worst service on the planet when it comes to web accessibility.

Image Dependency

In this example, the page content is mostly in graphics, the colors and arrangement give a fairly classic brochure-type look and feel. Suppose a blind visitor comes along, or someone who has disabled image loading for speed reasons. What will they see? A mostly blank page. The site is unusable, plus there is nothing for search engines to pick up as search engines cannot read text in graphics.

This inaccessible page was probably designed by a graphic designer who was trained in print media. Many of the techniques used in print design are not suitable for web media, although a design developed for print may be adapted for web use by someone with sufficient skills.

Browser Dependency

In this example, the page is designed using code that is proprietary to Windows Internet Explorer. When viewed in other browsers, the images and navigation menu vanish, making the site unusable for those visitors.

This inaccessible page was created with Microsoft FrontPage (long obsolete) but the process known as "browser sniffing" to present specific content or styling to the page visitor is an ancient technique that will not die, but needs to.

Unfortunately, the lure of do-it-yourself editors is that anyone can create a site with no knowledge of web technologies. Unskilled users can easily end up making sites just like this one. Note that even worse results can happen using Microsoft Publisher to construct web pages.

JavaScript Dependency

In this example, the page design is slick and "cool", and may appeal to a lot of people. It has neat moving images, glowing mouseover effects, and a scrolling content box, all done using JavaScript (JS). While there is a place for these things on the web, they should not be used arbitrarily. Your target audience may not find them to be so cool.

Many people disable JS for security reasons, some simply because JS effects can be more annoying than eye-catching. If you went to this site with JS disabled, all you'd see is a checked background. It is unusable.

This site has a specific target audience who will undoubtedly have JS enabled, so it unlikely to be an accessibility problem for them. However, the techniques used on this page are often not suitable for a more general audience.

Stylesheet Dependency

In this example, the page has many of the same issues as the example of font size dependency. Each element on the page (paragraph, image, etc.) was carefully placed at exact x/y coordinates using Cascading Stylesheets (CSS). When text is zoomed, everything starts overlapping.

One way a visitor might get around a problem site like this would be to disable stylesheets, which can be fairly easy to do in most browsers other than Internet Explorer. Unfortunately, this page wasn't constructed with any kind of logical order, so it makes no sense at all when stylesheets aren't applied. It becomes unusable.

This inaccessible page was created with the Yahoo Page Builder tool. It is almost as bad as Homestead.com (the worst of the worst, in our opinion).