/Access all areas/ www.psas.org.uk
28/02/2007 | Filed under Develop > Access all areas
Ignoring the Disability Discrimination Act can be fatal to your business. Accessibility expert Alastair Campbell looks at www.psas.org.uk
Public SMS Alert System (PSAS) is a free service for receiving emergency messages about your area, designed and built by recent graduate Adam Morgan. The site is well conceived and stays focused on its purpose.
There are a few issues that we have covered previously (such as alternative texts, proper use of headings and access keys), which can all be found online if you missed previous issues (www.netmag.co.uk/zine/the-accessibility-test).
What struck me about the PSAS website was how it would benefit from ‘bulletproof design’. One of the main differences between designing for the web and print is you can’t guarantee how people will display your page. Certain techniques should be avoided, such as fixing the height of an element containing text, which Dan Cederholm termed ‘Bulletproof Web Design’ in a book of that name (www.simplebits.com/
publications/bulletproof).
The techniques listed in the book align nicely with accessibility and using relative font sizes. If a user increases the font size on the PSAS site, text expands out of the boxes. In some cases the text expands and overlaps with links; in others, white text is displayed over a white background. The solution doesn’t have to affect how most people receive the page – with two changes you can keep the same appearance but allow for increased font sizes.
The first is to allow the boxes to increase in size. This is the default behaviour of div elements, but has been set with a pixel height. Where the coloured boxes have a height, this should be replaced with:
#mainright {height:120px;}
html>body #mainright {height: auto; min-height:
120px;}
IE6 and below do not support min-height, but expand the boxes anyway. To get this right across browsers, set the height, then pass the default value of auto, and a min-height to standards-aware browsers. In this way most people see the website as it is, and those with larger fonts don’t get overlapping text.
The second aspect is to apply a background colour to the box, or make the background image bigger to allow for expansion. These principles underlie many of the current standards-based and accessible websites.
