Bad Example Revealed
The image above shows the issues that exist in the previous page (badexample.html). They include:
- A navigation menu uses Javascript which requires mouse action.
Why is this bad? The Web Content Accessibility Guidelines specify that every element on the site can be operated without a device ("device-independent manner"):
Not every user has a graphic environment with a mouse or other pointing device. Some users rely on keyboard, alternative keyboard or voice input to navigate links, activate form controls, etc. Content developers must ensure that users may interact with a page with devices other than a pointing device. A page designed for keyboard access (in addition to mouse access) will generally be accessible to users with other input devices. What's more, designing a page for keyboard access will usually improve its overall design as well. (from Core Techniques for Web Accessibility)
Additionally, since the menu consists of images, the menu is not visible if the site is viewed through a text-only browser or as a text-only version.
- A header image with insufficient alt text, and that is also communicating important information (the title of the page)
Why is this bad? Alt text should explain exactly what is in the image, and what the image is doing on the page. In this case, the image is presenting the title of the page, which is important information for a visitor to your web site.
- A link that doesn't make sense out of context
Why is this bad? Screen readers or other similar technologies may present links outside of their context on the website. On the Bad Example page, if the link is taken out of the context of the page, the link text just reads: "here". The link text should explain where the link is going and what it is for.
- Using a table for page layout
Why is this bad? If a table exists only for page layout, it should have an empty table summary. This indicates that the table is for layout only. Using a table for layout also dictates the order in which the content is presented via screen reader or another assistive technology. This can create problems if the content doesn't make sense in its presented order.
So now you've seen the bad example. Continue on to the Good Example Page to see how things can be improved!