Accessibility From A Developers Point Of View - Part 1

Accessibility: It's the new "Web 2.0". The days of flash-based websites and image rollover menus are coming to a close as the web development community focuses more and more on accessibility. What is accessibility I hear you ask? Put simply, in the web design field, it means ensuring your website is usable by those with special needs. I find myself working on a website that requires the highest level of accessibility conformance (triple A) so I will write a few articles on the basics of accessibility from the point of view of a web developer. There are considerations that must be taken into account when developing a website for the vision impaired and other special need requirements:

1. Clean code
   This is an obvious one as the world has moved on from table based layouts long ago, but a CSS based layout is a must. Writing to XHTML Strict 1.0 standards is advantageous as it enforces a complete separation of presentation from layout. Clean mark-up ensures that your site is easily read by screen-reading browsers. As a bonus it makes for better SEO.

2. Useful images
   Do not use image tags to create drop shadows, rounded corners and for pictures that have no contextual meaning. Only use CSS background images and the like for presentation-only images. When you do use images ensure they have 'alt' tags that adequately describe the image content.

3. Positioning of code
   CSS can lay your site out however you like, but it is important when making an accessible site to consider the ordering of your HTML. Think again how your site will be read by screen readers and if your code layout is optimal. The first element on your page should be a 'Skip to Content' hyperlink that anchors to the main content area, skipping over the navigation options (which should follow second).

4. Heading tag flow
   It is also important to keep correct ordering of your heading tags - H1 through H6. Think of them as parent-child relationships. You must have only one H1 on the page and it should be near the top. You can have as many H2 tags as you wish; however, you only make the jump to H3 when the content that is being headed is considered relevant to the content of the previous area. The same goes for H4, H5, and H6. The default appearance of the tags is irrelevant. If your design calls for a heading that appears larger than its parent do not traverse the tree backwards, simply apply a different CSS class.

As I learn more techniques throughout my current project I will compile another entry for part two!