6 Tips for Basic Web Accessibility

Accessibility is a commonly overlooked aspect of web design. To make a website accessible is pretty much to make it usable for as many people as possible. This is often specific to people with disabilities, but can be broadened to include:

  • People without certain features enabled
  • People on slow internet connections
  • People without certain plugins installed
  • People who are new to a certain subject
  • And much more.

The World Wide Web Consortium (W3C) has a section of their site called the Web Accessibility Initiative (WAI). This focuses mainly on accessibility for people with disabilities, and explains accessibility for people with disabilities.

Here are some simple tips to improve your website's accessibility.

Include a "Skip to Content" Link

The header of a page is often filled with a logo, navigation links, subscription links, and sometimes even more. With CSS, you can lay them out so that they don't take up too much space vertically, but what about browsers that cannot use CSS?

You add skip links, of course! These are links that are hidden with CSS, so that when CSS cannot be used, these links are shown. They link to the ids of common parts of the page, so that these users don't have to scroll all the way down the page to get to the great content.

<a href="#content" class="skip">Skip to Content</a>

If the id of your main content box is "content", this will create a link that when clicked, will automatically scroll to the top of the page.

To hide it, we will use a bit of CSS. But you can't use display: none, because some text-based browsers may actually pick that up and just not display it. Instead, we will use the following method.

.skip {
    width: 0;
    height: 0;
    overflow: none;
}

This can also be used to add "Go to Top" links in the footer. But these don't need to be hidden, because even people using browsers with CSS can find these useful.

<a href="#">Go to Top</a>

Remember the alt Attribute

A commonly forgotten part of images in HTML is the alt attribute. Not only is it required for proper validation, it is an important part of accessibility. It is what will be shown when an image cannot be loaded, for example in a text-based browser that cannot display images.

The alt attribute should include a short description of the image. I should not simply be a description of what the image looks like, but should explain the purpose of the image.

Don't Tell Users to Click Here

A common mistake that we all make from time to time is to tell users to "Click Here". Sure it's easy to do, but our link text should really be more descriptive.

Not only is descriptive link text useful for accessibility, but it is also helpful for Search Engine Optimization. It pretty much gives Google's spiders a bit of information on what the link contains.

Style Focused Form Elements

When a user clicks inside of a form element, it is said to be focused. However, certain styles can make it difficult to tell if a form field is focused or not, such as a background image that hides the blinking cursor. If there is no difference between a focused and non-focused element, your user might not be able to tell where the text will show up if they start typing.

To style focused form elements, we can use a bit of CSS, using the :focus pseudoclass.

input {
    background: #fff;
}
 
input:focus {
    background: #ddd;
}

This will make all inputs white. When the user clicks in one of them, it will turn grey. When they click outside of it, it will go back to white.

Use tabindex in Form Elements

A common way to for people to fill out a form is to "tab" through the fields by pressing the Tab key. This can be required by people who cannot use a mouse.

If you have any forms on your site, try tabbing through them and see if they go in a logical order. If they don't, don't worry: the tabindex attribute can help you.

For example, take a look at this code:

<form>
    <p><input type="text" name="name" tabindex="1" /></p>
    <p><input type="text" name="position" tabindex="3" /></p>
    <p><input type="text" name="birthday" tabindex="2" /></p>
</form>

When you tab through this form, you will start at the field with a name of name. And then birthday, then position.

Don't Rely on JavaScript

Remember: JavaScript is something that can be disabled.

Some people may have JavaScript disabled for security reasons, to make pages load faster, or for whatever reason. You never know who may have it disabled.

Because it can be disabled, you should not rely on JavaScript for displaying the content, navigation, or anything else that is important for the site's usability. Try to limit JavaScript to smaller, non-essential uses, and be sure to always test your site with JavaScript disabled.

The same applies to plugins such as Flash. Don't rely on it, because some people just might have it disabled, or might not have the plugin.

Does anyone else have any other tips for accessibility? Be sure to share your thoughts.

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

3 Comments

  1. December 14, 2009

    Good intentions, but a few comments. Styling form elements is more usability issue; using proper form labels is a better suggestion. You should NOT use tabindex. It gets in the way of assistive technology, and not needed if your content is (and should) be in reading order. "Skip to" links are good, but not needed if coded well with headings, ARIA, and/or HTML5. Proper use of Headings is another big factor to consider for web accessibility.

  2. December 14, 2009

    Additionally for skip links, I always use the CSS pseudo-classes :focus and :active to make the skip link visible when it receives the focus. In this way,sighted keyboard only users can also make use of the skip link.

    On tabindex. I think it is important to point out that this should really be implemented using an all or none approach. Namely, either provide a tabindex value for all keyboard accessible elements (links, input fields) on your page, or none of them. If you apply it to only a few, you run the risk of decreasing usability for keyboard users as browsers will as a rule tab through all the tabindex fields first, and then move onto the non-tabindexed fields.

    Better still with forms is to ensure that the fields are laid out in the correct order in the underlying source code. This way, a logical tabbing order is maintained without using the tabindex attribute (which is deprecated anyway in (x)html 1.1

  3. December 14, 2009

    Web Axe:

    Thank you for your comments. I don't know tons about assistive technologies, and didn't know that tabindex could get in the way. It can also be useful to make good use of headings.

    Joe Chidzik:

    It is a good idea to try to keep the fields in the correct order in the source code, to be sure that they will be tabbed through in the right order.