Of course there’s always those who think that as long as a page validates and images have an ‘alt’ attribute that their page/site is accessible. I guess in those cases what’s needed is more education and continuing development and learning. No-one knows it all when it comes to accessibility, even the accessibility gurus don’t know it all (and they tend to freely admit that – probably with the exception of useability expert Jakob Nielsen, whose views on useability tend to be rather inflexible), and there’s always more to learn, new techniques, technologies, and opinions on what’s best practice when it comes to accessibility.

The article debunks the usual whining reasons from lazy and/or misinformed developers who don’t get why accessibility is important (you know the kind of thing – accessible design is boring, it’s too expensive, they don’t have disabled visitors anyway, etc. etc.), but most importantly the article gets across that what’s needed is a wholesale shift in the mindset that accessibility’s an optional extra (which of course it isn’t – especially if you’re a business covered by disability legislation).

Probably the most important thing though that the article says, apart from the premise of the entire article of inclusion, is that what we need to get away from (which is what the principle of inclusiveness promotes) is that there is a “them” and “us”. It’s something I’ve long argued is a problem in many areas; that for some reason humans seem intent on separating people into groups and labelling those who don’t share the same characteristics as the majority as “them”. It’s a concept I just don’t get, but that’s another discussion.

Probably my second favourite paragraph in the article is this one:

Once we embrace inclusiveness, it becomes difficult to marginalize others as members of one specific group, such as “users with disabilities.” If we discard “us” and “them” thinking, we stop looking for reasons to avoid accessibility, and we begin to see others’ needs as our own. With inclusion, we don’t dismiss web accessibility requirements, we see them as a chance to create empowerment by embracing our similarities and differences.

As the article says, if you stop looking at groups of people as “other” and concentrate on the similaries we all share, you realise that many of the needs of making a website useable and accessible are common to us all. My favourite line in the article though is this one:

What does your website sound like? Turn off your style sheet and look at what you’ve got. Suddenly the person listening to a website with a screen reader is no longer different from you—your needs are the same.

Good advice, and something we should all probably do with our sites, even if we think we know how to make a site accessible and what accessibility means, because chances are there’ll be quite a few things we’ve missed or simply not considered.

An interesting read.

This gives you a nice texture which takes the ‘glare’ off a stark white page (works best with “natural” type themes) which is very quick and easy to do.

How?

• Open your favourite graphics programme (I used PhotoPlus X3 for this, but any graphics app should do it).
• Create a new image of a fairly large size (I used 100px x 65px)
• Flood fill the background with white
• Look on the menu of your graphics programme for the “noise” option (in PhotoPlus X3 which is my current new toy I’m playing with it’s under “Effects”, but it may be elsewhere in other apps).
• Under “Noise” you should find an “add noise” option, which is what you use to create the background image.
• Once you’ve added noise, simply save as a jpg (which gives a file size of just over 1kb, which isn’t bad for a background image). Using a jpeg format as well, you can slightly tweak the effect by playing around with the quality slider for the jpeg when you come to save it. Altering the quality of the final file you can get some interesting effects from the same ‘noise’ pattern at different quality levels
• Use tiled/repeated as the background for your page!

The settings I used for the “add noise” step were…

In PhotoPlus X3…”Coverage” at 10% with a “uniform” distribution.

To get a similar effect in Paint.NET (which is the other graphics app I use regularly) I used:

• Intensity: 40,
• Colour saturation: 0
• Coverage: 70.

Basically have a play around and have a look what it looks like tiled and play about with the settings until you’re happy with the effect.

This is my resulting background image…

Background image produced with Paint.NET

…and:

Background image produced with PhotoPlus X3

For those requiring a text version of the image, the breakdown reads thus:

2% – Time spent actually designing anything
35% – Time spent trying to get the layout to work using only CSS before giving up and using tables
8% – Swearing
2% – Time Spent making the site W3C compliant
43% – Time spent trying to get the bastard to work in Internet (expletive deleted) Explorer
5% – Time spent wishing a slow and painful death on Bill Gates plus more swearing
5% – Time spent looking for that one extra space in the Javascript that Firefox is throwing a wobbler over
JBVoices

My own breakdown would differ somewhat I have to say, partly on the grounds that I hate JavaScript with a vengeance, and I’m crap at writing it (as I’m sure my OU tutors would agree), and do not have the time or resources to check it’s accessible in all situations/combinations of browsers/assistive technologies, so it’s easier to avoid it and achieve the same effect using other methods (e.g. CSS). For me therefore I’d replace the JavaScript with PHP.

As Gill also said in her entry, being the stubborn cow that I am, I refuse to resort to tables, and will chip away with CSS until it damned-well works, and I have to say I must be doing something right, as under the skilled tutorage of Gill, Carol and Helena when I jumped in feet-first and launched myself from M$ Frontpage into “doing things properly”, I developed a fairly good grasp of CSS, and recently something’s obviously “clicked”, because I’ve been finding CSS layouts a lot less time consuming to initially put together (though that’s not to say that I don’t spend ages tweaking things here and there to accommodate horrible browsers and generally knock things into shape.

There are also a couple of differences in my method of working, and the stuff I end up lumbered doing, so without further ado (I obviously had far too much time on my hands that day!), here’s my very own version of “Time management and modern web design”…

And, again, the text version…

• 2% – Time spent actually designing anything
• 18% – time spent trying to get the layout to work
• 8% – swearing
• 12% – time spent making the site W3C/WAI compliant and checking accessibility
• 14% – time spent trying to get the bastard to work in Internet (expletive deleted) Explorer
• 6% – time spent wishing a slow and painful death on Bill Gates plus more swearing
• 5% – time spent looking for the semi-colon in the PHP the server’s throwing a wobbler over
• 6% – time spent staring blankly at the screen, waiting for inspiration to strike/wandering the web in search of inspiration
• 5% – deciding which colour scheming tool to use/deciding a colour scheme
• 1% – changing all the CSS for the new colour scheme I’ve just changed my mind over
• 5% – Searching for accessible/compliant [insert name of widget/feature here] script/searching for prior bookmarked script
• 4% – Trying to make sense of the client’s latest vague design request
• 5% – Searching for stock images to replace rubbish ones provided by client/to meet request, “Oh just put whatever you think there!”
• 4% – Time spent correcting appalling images supplied by client
• 2% – Time spent on phone beating client into submission over appalling design request
• 1% – Time spent deciding on suitable music for coding to (essential to the design process)
• 1% – Time spent wishing real life was more like “Hackers” and I zoomed around on roller skates
• 1% – Wishing I’d chosen something easier for a career…like brain surgery

Of course, hurling obscenities at the screen comes as an optional extra with all the categories, possibly with the exception of the talking to the client on the phone, as they tend to get a bit miffed if you start swearing at them…

…and of course like 67% of all statistics, these figures are dreamt up on the spot.

One of my favourites of these is a rather nifty PHP include menu which means you can use an include for your navigation list, but still have the current page highlighted in the site’s navigation, without needing extra markup like adding an ID to the ‘body’ element. I can’t accept the credit for this one because it’s not something I coded, but I’ve been using it for so long now that I can’t remember where I first found it.

All you need is two bits for the navigation; your unordered list for your navigation, which of course you can style in any way you so desire using CSS, and a tiny little PHP snippet. First you’ve got your unordered list (I save mine as ‘menu.html’):

</p>
<ul>
<li><a href="mylink1.php">Link 1</a></li>
<li><a href="mylink2.php">Link 2</a></li>
<li><a href="mylink3.php">Link 3</a></li>
<li><a href="mylink4.php">Link 4</a></li>
<li><a href="mylink5.php">Link 5</a></li>
</ul>
<p> 

<br />
 < ?php<br />
 $menu = file_get_contents("menu.html");<br />
 $menu = preg_replace("|
<li><a href=\"" . basename($_SERVER['PHP_SELF']) . "\">(.*)]+>|U", "
<li class=\"current\">$1</li>
<p>", $menu);<br />
 echo $menu;<br />
 ?><br />
 

Just place the PHP snippet within your page wherever you want to display your menu.

What does it do? It simply uses ‘preg_replace’ to take your menu, find the link to the current page (basename($_SERVER['PHP_SELF'])), and then remove the ‘a’ tags to remove the clickability for the current page (visitors don’t need to click it because they’re already there), and give the ‘li’ tag a class (’current’) and print out the menu on the page. Of course then you can style the ‘current’ class in whatever way you choose with CSS. Though the same thing can be done using the cascade and CSS, that involves using extra markup (adding an ‘id’ to the body and list (’li’) elements), and of course you have to remember to change the body ‘id’ for each page, and adding extra markup to the HTML and CSS seems a lot more cumbersome than this nifty little PHP snippet that does the job without any extra effort on your part. That’s the sort of code I like!