Accessibility Tips

A collection of tips, guidance and practical suggestions in developing accessible websites

March, 2008

You are currently browsing the Accessibility Tips archives for March, 2008.

Using titles on form fields

By Isofarro on March 25th, 2008 - 3 comments

Form elements provide a decent range of accessibility options: label elements match up label text with their corresponding field elements, fieldsets group together similar input elements and the legend provides a succinct title for these groupings of fields. With those elements alone, forms are fairly simple to mark up in an accessible manner. The difficulty […]

Avoid skipping header levels

By Isofarro on March 10th, 2008 - 3 comments

There have been various discussions in web development circles about whether we can skip heading levels for various reasons, including structural consistency. Repurposing headers One of the benefits of a proper and consistent heading structure in an HTML page is that they can be repurposed to improve access to the content. For example, the heading […]

Signpost forms with headers

By Isofarro on March 10th, 2008 - 4 comments

The typical websites of today commonly have small forms in various locations on the page. These forms could be logins, subscribing to mailing lists, site search, blog comment form; they are ubiquitous because they tend to cover important use cases on a site. It makes sense to inform screenreader users of these forms – particularly […]

Deciding when display: none is appropriate

By Isofarro on March 5th, 2008 - 8 comments

It’s common knowledge that screenreaders won’t read out content styled with display: none, but that doesn’t mean content should not be styled this way. There are times when it is appropriate to style content this way, but we need to be careful. Progressive enhancement with display: none Core content should never be styled with display: […]

Avoiding visibility hidden

By Isofarro on March 5th, 2008 - One comment

Hiding content from view with visibility: hidden in many cases prevents the screenreader from reading the content, so content styled this way is inaccessible. This technique is not appropriate for hiding content on screen because no screenspace is saved by styling this way – the visitor is left looking at a blank region the size […]

Providing link text

By Isofarro on March 4th, 2008 - No comments

In websites offering news, it’s common for there to be a story title and an image both linking to the actual story. The design requirement, or even a tracking requirement, may force there to be two separate links, one for the story title, and one for the story image. Image links A common mistake is […]

Positioning content offscreen

By Isofarro on March 4th, 2008 - 5 comments

In cases where we need to hide content from a visitor but still make it available to the screenreader, we position it offscreen. The simplest way to do that with CSS is to use the following style: .offscreen { position: absolute; left: -999em; } Avoid offscreen using top A typical mistake is also to set […]

Copyright © 2007 - 2009, isolani