5 Accessible and pretty CSS tips

We are in the last few bits of the new site and while designing it a major focus has been on accessibility and not just for search engines. For us accessibility is built into the design its about reaching as many people as possible and giving as many people as we can the chance to read about our work and to enjoy our highly entertaining blog posts (no really they are). In European countries the various EU and country specific laws are pretty rigid and all web designers should by now be familiar with WAI Level 1 & 2 and be reaching and exceeding these standards as the norm. One of the major criticisms is that by following the standards you are left with dry boring sites, this just is not true! you can still have amazing sites and we are going to show you 5 neat tips to make your standards compliant site look just as good as it always did.

Declaring external links

One of the areas many web designers fall foul on in reaching WAI level 2 compliance is in the declaration of links both internally but more importantly to declare an external link as such. Max Design show a very simple method of showing an external link as an icon, which degrades to text, making it highly accessible. http://www.maxdesign.com.au/presentation/external/ This technique can also be used to show other objects (such as links to pdf’s, word documents etc) or more importantly to video and other visual elements.

Read More, more

Again this CSS script assists reaching level 2 compliance by allowing you to declare a full title (keyword sensitive) but visually just showing the ubiquitous read more, it works well with the tip above. For the Venture Skills site we modified the CCK teaser file, to repeat the teaser title on all read more links (not particularly complicated, and even easier in contemplate) http://www.knusperpixel.com/playground/more-more-links.php

Variable font size

This is an odd one, its not really an accessible script, and it’s also something that’s done by the browser, but I find that the browser can’t scale up or down text and keep the wrapping the same. The script uses a Javascript controller to switch between the various CSS, if implementing this on a larger site then its worth placing your text based css in a separate sheet from the layout and make multiple calls, this way you won’t be recalling the whole script each time you reload. http://www.deltatangobravo.com/images/zoom/

Accessible rollovers

Rollovers certainly look nice, but often are very un-accessible to people who are not seeing the visual effects, these simple rollovers combine pixys fast rollovers with Stuart Langridge’s accessible image replacement. While perhaps a little more complicated then many rollovers to implement, they still look good, and degrade well. http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html

Accessible and pretty forms

Developing forms is a nightmare, developing accessible forms requires time and patience, without the visual clues a screen reading software has to rely on the structure defined by the form is correct. This tutorial guides you through creating semantically correct forms and then visually styling them. It is without doubt the most important article in this post and one that should be read by every web designer/developer who ever has to design and develop a form. http://alistapart.com/articles/prettyaccessibleforms Once you have mastered the methodology you can then go on to create some impressive form layouts, it took some doing but for one part of the new site we have a form based around Sky Rockets 3 column layout.

5 Great CSS tips

5 great looking tips to help you keep your site looking stylish while still making it accessible what css tricks do you use to keep your site looking both good and standards compliant?

All our Posts are audio subscribed for more information see here, and to access the podcast feed here

This blog is moving soon, make sure you move with us by using our Feedburner RSS feed, if you have used the autodiscovery button in your browser you may need to swap feeds, simply delete the old feed and add, http://feeds.feedburner.com/VentureSkills For a more detailed explanation on feeds and recieving our content in various formats click here