Front-end developer essentials – Accessibility & web standards

This is the second in a series that should form the building blocks to being a good all-round front-end developer. Previously I explained the basic ideas behind user interface design and here I’ll discuss why accessibility and web standards are important.

Accessibility

We involve web accessibility in web development to ensure that people with disabilities can use websites and applications effectively. When we talk about disabilities this covers the following wide-ranging impairements:

  • Vision and hearing
  • Physical
  • Cognitive and neurological

An accessible site improves usability for all users, for instance a quiet environment where sound must be muted, an out-dated browser, small screen or the ever increasing group known as the silver surfers. There are many things to bear in mind developing for an accessible page but here are a few to get started:

  • Provide transcripts for audio and video content
  • Use appropriate alternative text for inline images in the alt attribute
  • Ensure all content is available without Javascript
  • Do not automatically play video or audio content on page load, or if you must then provide a mechanism to turn it off
  • Use a language appropriate to your audience
  • Don’t assume the user is navigating with a mouse
  • Don’t rely on colour alone to convey information

Web standards

This means that we must make sure we use those technologies that are seen to be the most standardised by our peers and the W3C. Web standards means writing code to the highest standards not just settling for what comes out of a WYSIWYG editor.

  • Use a doctype
  • Validate your HTML to that doctype
  • Mark up your content using the correct structural element, including div and span sparingly as required
  • Separate content and presentation
  • Using CSS to enhance the layout of the content
  • Only use inline images where they form part of the content, stylistic images should be add via CSS
  • Javascript can be used to enhance content
  • Only use tables for displaying data

What’s the point?

Coding for accessibility and web standards not only helps people using your pages, it also has many other benefits.

Using a good document structure will mean search engines can understand your page producing a better result in listings. It also means older, non-standards browsers will still be able to display the content even if it doesn’t understand how it should look.

Separating content and presentation means your pages can easily be converted into other formats automatically as they are rendered, for instance mobile and PDA devices as well as places not usually used to read web pages i.e. through a gaming device or television. This idea also applies to content passed through assistive technologies like voice, text or braille browsers.

When you have separate files for layout and styling you, as the developer, benefits in an easier to maintain code-base.

Further reading

Tags: ,

Leave a Reply