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