/Access all areas/ rawcliffe-leisure.co.uk
02/02/2007 | Filed under Develop > Access all areas
You can’t afford to ignore the Disability Discrimination Act. Nomensa’s Alastair Campbell put www.rawcliffe-leisure.co.uk through its paces
Tour operator Rawcliffe Leisure’s site is the work of .net reader Dave Whitehead. It’s a striking site and is all the more commendable, as Dave is new to XHTML and CSS.
Visually, the site is clear and the code is valid, like some of the previous sites we’ve looked at in this column. The accessibility would benefit from a liquid layout, and more use of structural elements such as headings. For example, in the left column of the homepage, there’s some text that visually appears to be headings (for example, ‘Parties and Celebrations’), but these aren’t headings in the code.
Doing a little mind reading, I can imagine that Dave would reply, “but I would like the whole block to be a link, and you can’t have a heading inside a link”. Very true, because a link is an ‘inline’ element (like bold) – you can’t put a ‘block’ element (such as a heading) inside it.
The conundrum is whether to have the nice big hit areas that are good for every mouse user, especially those with motor skill issues, or have the correct structure. Well, the answer is both: with a little help from DOM scripting you, can create the larger hit area and use the right structure. Rather than using spans to separate the text content, you could use heading and paragraphs:
<li>
<img src=”pic.jpg” alt=”Hen party” />
<h2>Parties and Celebrations</h2>
<p>If you are planning a ‘stag’ or ‘hen’ party in Blackpool, you’ll want to be sure it’s an event to remember. </p>
<p>Find out about <a href=”page.html”> Parties and Celebrations >></a></p>
</li>
How to apply the hit area in JavaScript cannot be covered here, but if you get up to chapter eight of Jeremy Keith’s excellent DOM Scripting book (domscripting.com/book), it should be a doddle.
Using this method, the appearance is the same, the HTML source is optimal, the link works as normal without JavaScript or CSS, and, for the 95 per cent of people with JavaScript, they have a large hit area.
Bookmark with:
Comments
Steve / 02/02/2007 / 13:35
Can't you simply use css hover classes for the rollover effect? Same functionality without needing JavaScript.
Edd / 06/02/2007 / 08:34 / http://www.designbycake.com
CSS :hover pseudo-classes only apply to a few certain elements when viewed in Internet Explorer, whereas Javascript will apply to everything easily -- you are right though, and CSS would be a much cleaner way of doing it.
Alastair Campbell / 06/02/2007 / 15:52 / http://www.nomensa.com
CSS would provide the visual effect (barring IE), but you need JavaScript to create the 'hit area' properly.
Woody Sabran / 12/02/2007 / 12:58 / http://www.woodysabran.com
No offense, but wasn't this article meant to be about accessibility?! There is a striking flaw on this site... using an image containing text as a background image. It's the logo as well as which is all the more important... when you view the site without css you will see that there is no replacement text / alt text avaiable which means the site is without any obvious identity (apart from the title of course). By the looks of things, not much work needs to be done to fix this, just add some text to #masthead, and set the text-indent style to be something like -10000px. Job done... you've added some text for accessibility but it won't be visible unless the css is disabled.
Brian / 14/02/2007 / 12:51
This article is unreadable due to the over-animated adverts!
Nebog / 01/05/2007 / 02:02 / http://www.nebog.com
I shall use this method. Thanks for this article.
emotika / 01/05/2007 / 03:01 / http://www.svt.pl
Have to agree with Woody & Brian on this one. Advertising on a site about accessibility
is a rather odd decision. Hoever,this article is about accessibility not usability. And frankly,one myth about accessibility is that you're catering for an insignificant minority. Over at Digital Web yesterday, Christian Heilmann wrote a very insightful article on why clients don't care about accessibility on the web.
AlastairC / 25/07/2007 / 19:37 / http://www.nomensa.com
I'm not sure that you can draw that much of a distinction between accessibility and usability, I would say one is a niche of the other:
http://alastairc.ac/2007/05/responsibilities-in-accessibility/#accessibility-is-usabillity
The point of the article is that the site had degraded it's accessibility (i.e. structural code) to use a nice feature - I wanted to show you could have both. Besides, are people with visual impairments more important than those with motor impairments? Both the structure and hit area are valid accessibility concerns.
Unfortunately I can't do much about the adverts, they are part of the site and pay for it being here...
Richard Morton / 09/10/2007 / 16:24 / http://www.qm-consulting.co.uk
Emotika says "Advertising on a site about accessibility is a rather odd decision". Without getting into the debate about quality of advertisements, and animation, why on earth shouldn't a site about accessibility advertise. There is no reason that adverts can't be accessible, although they often aren't and can add to the clutter of a page.
Joanna Franks / 23/12/2007 / 17:47 / http://www.artikel24.net
i allways recommend to use css rather than javascript. jscript is not the best solutions for the seach engines to index a page. anyway happy xmas to all.
