Accessibility Tips

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

Using fieldsets outside of forms

By Isofarro on April 30th, 2009 - 2 comments

The focus on using the most appropriate markup in JavaScript enhanced pages has raised an interesting problem about the use of form elements outside of a form. And using a fieldset to group these elements together is proving to be a very useful way of making them accessible. Using form elements outside of a form [...]

Aiding keyboard usage with :focus cues

By Isofarro on February 9th, 2009 - 3 comments

Knowing where the keyboard focus is at any time is critical for keyboard users to navigate through and to a particular page. It’s not only screen reader users who don’t use a mouse, many disabilities leave the keyboard as the only viable way to interact with a computer whilst still using a monitor. The dotted [...]

Punctuating text-equivalents

By Isofarro on January 2nd, 2009 - 3 comments

When we have an image on a web page and that image conveys content, then we know it is important to provide a text equivalent of the content that image offers. The most typical (but not only) way of doing this is to add the text equivalent content in an alt attribute on that image. [...]

Avoiding redundant title attributes

By Isofarro on April 14th, 2008 - 9 comments

The title attribute is one of the overlooked attributes in the HTML collection. It’s most often used to mark up abbreviations with their expanded forms. Sometimes it’s used to rout around Internet Explorer’s tooltip behaviour of image alt attributes. The attribute itself is meant to supply optional supplementary information. The most beneficial example is in [...]

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 [...]

Copyright © 2007 - 2009, isolani