/Access all areas/ Scumballs To Cancer
04/03/2008 | Filed under Develop > Access all areas
This month, Nomensa’s accessibility expert Alastair Campbell analyses Scumballs To Cancer, a site covering a charity fundraising event
Scumballs To Cancer is dedicated to two people taking part in the “Scumball Rally”, which raises money for treating prostate and testicular cancer.
From a development point of view, the site is valid XHTML script with a CSS layout. There’s also good structure throughout. However, there are some details that deserve a little attention.
My initial test is to pick a content-oriented page, strip the CSS, view the alternatives and the structural HTML elements. This site has a hidden <h1> on every page: “Scumballs To Cancer”. While this is suitable for the homepage, for other pages the most important heading should be what that page is about. Also, the alternative text for the header image is simply “Header”, which doesn’t make sense if you can’t see it. A solution is for the homepage to have this as the main heading:
<h1><img src=” banner.png” alt=”Scumballs To Cancer” /></h1>
For other pages, the image would not have the heading element, and the visible heading would be the <h1>.
Another issue is the use of pipe-symbols in the main navigation, even though each link is in a list item. Access technologies might display these inappropriately, and as visual separators they can be better dealt with in the CSS. The navigation is correctly in a list, so with an associated image, the following CSS would add the symbol:
#menu li {
background: url(pipe.gif) no-repeat 50% 100%;
}
However, this would add the same image to the last item as well, so to replicate the same design we would also add a class of last to the final item in the navigation and add this CSS:
#menu li.last {background-image: none;}
In future, we might be able to use #menu li:last-of-type and not have to alter the HTML.
Finally, the “click here” links. Although there are specific circumstances in which you can justify multiple links with the same text going to different places, it’s best to avoid this. Some access technologies provide functions to list all the links in a page, and titles such as “more” and “click here” are useless. So, for the homepage, where it has “We’re auctioning a personalised number plate. Click here for further information”, you could instead use the text that describes the destination: “We’re auctioning a personalised number plate”. Once you get into the habit of using descriptive text for a link, it actually helps everyone who’s skimming the text, too.
Bookmark with:
Comments
Polly Parker / 08/03/2008 / 09:51
I found your article very interesting - however why does your link open in a new page which goes against accessibility guidelines
Alastair Campbell / 11/04/2008 / 19:58 / http://www.nomensa.com/
Hi Polly,
I'm afraid it is due to the CMS used, I'm not in control here. For the record, you can use new windows if the user is informed before clicking the link (ideally in the link text), however, I do try to avoid them whenever possible.
