A collection of tips, guidance and practical suggestions in developing accessible websites
You are currently browsing the Accessibility Tips archives for March, 2008.
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 […]
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 […]
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 […]
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: […]
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 […]
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 […]
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 […]