digitalizes

Photo - allaboutgeorge

Yes that’s right, it’s all about accessibility. Accessibility is the new accessory for the web 2.0 era. This is now a critical factor in web design both on the level of aesthetics (virtual ergonomic functionality) and coding. But I hear you say isn’t accessibility a rather dull concern that stipulates functionality over form, all those ugly links, large text and destructive ‘fluidity’? Well the answer is definitely NO, it doesn’t have to be! Accessibility is a key component of web 2.0 design standard and it can also have many positive benefits that go hand in hand with your hard won search engine traffic. A site designed with accessibility in mind will also incorporate the most effective methods for information delivery and navigation, this in turn will tend to assure desired visitor actions whether it be multiple page views, shopping or just absorbing the stuff on your site.

Obviously the key concern of the official accessibility lobby is to make the internet a more user friendly place for people with various disabilities, or just the general mild effects of ageing, such as poor eyesight, and this enhanced usability is naturally incorporated into the site design. So it’s a double-edged sword, on the one hand human usability and on the other machine interoperability.

First human usability issues.

Space is the Place

The days of overcrowded pages full of flashing gifs, searing text on black backgrounds, contextual internal links and a mess of tables are thankfully long gone. That approach may have been acceptable way back in the late 1990s when everyone was trying to prove what he or she could do with website design, but now, less is very much more.

White space is king, content should have plenty of breathing space, this makes it much more easy to read and digest. Content is more than just king though, it is really all that your site should be about. No one is really interested in the fabric of a website in these information hungry days and the current attitude to design is to take away everything until there is nothing left to remove. Think of your site as an art gallery hosting content.

Lost in Space

Remember that navigation can become an important cognitive issue if it is badly designed. Navigation should be uniform throughout, all primary internal links need to be displayed on a well designed yet simple menu that appears on all linked pages and in the same position. Many people with reduced dexterity will tend to navigate the Internet with a keyboard or some form of device that talks to the keyboard enumerator in a computer. This means that your pages need to be clearly navigable with tab and return keys. Links have to have what is known as ‘focus’, especially contextual links, which are incorporated into a body of text. Focus is simply making sure that these links stand out and would be well defined to someone with colour blindness, but they also need to highlight when they are subject to tabbing. Add padding to linked images so that they will also display ‘active’ status when tabbed over.

The CSS below causes links to highlight with yellow when tabbed over.

a:focus, a:active {
background-color : yellow;
text-decoration : none;

How Muted is My Valley

Accessibility and web 2.0 aesthetics are all about restrained use of (mostly) muted and transparent colour and this is often extraneous to content on some of the best web 2.0 sites. Think of the doyens of web 2.0 - Google, flickr, delicious etc. All design backgrounds should be external to your content ‘wrapper’.

Here is a handy link to some more in-depth info on the web 2.0 colour pallet.

web 2.0 colours

Big Up Text

Big text, or at least larger than life headings are not unusual in web 2.0 land and there is a definite move away from the tradition of very small font sizes. Make sure all of your headings are defined as proper ‘Hx’ headings styled up in CSS. Some use of text images is OK but this should be very limited. I particularly like to use text images for some of my supplementary text headings where aliasing is an issue. But generally this won’t help your SEO cause if you substitute images for H1 or H2 headings.

Scalability, the accessibility folks are very keen to see text which can be re-scaled by the user and for this reason ‘em’ values are preferred to fixed ‘px’ values in your style up shilarney. Though I am still hanging on to ‘px’ values I’m afraid.

Scalability is a very contentious issue for many web designers as enabling this to take place in a non destructive way is quite difficult to achieve but it is likely to become an even more important issue in the future.

These are just four of the most basic accessibility concerns which are intrinsic to the web 2.0 design ethos. For more detailed information on this subject have a look at
The Guild of Accessible Web Designers GAWDS site.

Validate

I mentioned machine interoperability above, this is concerned with the readability of your code which in turn can effect the accessibility of your site. Generally a well-crafted site should validate for its chosen doc type in the W3C validator.

I tend to use the info hound ‘html tidy’ as a first line of attack when checking or constructing valid pages. Though a word of warning: turning seriously mashed code into valid code is not as easy as one would think and some degree of confidence with html is required. Sometimes the output code from ‘html tidy’ can be stripped of entire html elements as a result of relatively small errors.

There is still some debate on the importance of valid code in relation to Google and SERPs ranking. But doing things right can never be a bad thing and it is almost certain that Google will take code validity into account at some point in the future as algorithms update and yet further qualitative measures are introduced.

Valid pages work more efficiently in browsers and other parsing tools and utilities, they load faster and are more likely to interact with accessibility add-ons in a more beneficial way.

Externalize Externalize!

Everything (CSS, javascript etc) except your content and vital html elements!

Avoid java and flash navigation, this has no value in terms of accessibility and is useless for your SEO too. If you must use java or flash for navigation, supplement this with an additional HTML menu which can be located in your page footer.

Article by Oliver Wood Oliver Wood Art Photography

         

Subscribe to the RSS Feed