Accessibility Tips

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

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

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

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

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