But if we’ve got a situation where we want floated content to stay wrapped within the div what do we do?

(more…)

The Title Attribute

The title attribute (not to be confused with the title element in your document head) is available to provide supplementary implementation information to users, although without a solid guide to user agents on how to implement the title there is an inconsistency among browsers as to how they support it. In some cases the title may be provided as a tool tip, although this would require the user to hover over the element with a pointing device. Keyboard users wouldn’t see the tooltip, while screen readers have title attributes turned off by default and users have to turn that feature on.

(more…)

Two very good articles on WebAIM, the first Alt text and linked images and Appropriate Use of Alternative Text, provide a strong basis for creating accessible image links. Basically, whenever you use an image as the only content within a link you need to provide a text equivalent of the function of the link. The alt attribute should be used to show the function of the link (rather than a description of the image).

Like many people, it appears that I had made some wrong assumptions in the past about the correct way to mark up images as links. In my old scenario I was marking up a title on the surrounding link element while providing alternate text to describe the image. The reality is that screen readers ignore that title attribute on the link and, as Jared points out in one comment the title is only intended to be supplementary information anyway. So, naturally, using the link’s title isn’t enough.

(more…)

Since mid-2001 I’ve done a serious shit-load of schooling, too. I’ve done industry level certification in Web Design and Web Administration and I’ve made the Dean’s Honour Roll of Excellence for my Faculty through a Bachelor of Computing. I have only one project unit left at University to achieve my undergraduate degree. At the same time I’ve taught myself best practice front end web development methodologies (started with an Idiot’s Guide to Creating a Web Page, no less). I’ve spent long hours researching issues such as accessibility and usability, pushed my boundaries into working with PHP, and blogged like a mad banshee into the wee bloody hours. It was to prove a point - I am better than that man who stood on the wharf at 4am in silky fish soaked boxers totally exhausted (and exploited).

(more…)

For anyone who doesn’t know what I’m alluding to, its when we use conditional comments to target Internet Explorer (either en-masse or by version) to fix those lovely little anomolies we’ve grown to love in our own special industry fashion. Using conditional comments is a far superior way to dealing with these bugs than the dark and soul-degrading option of CSS Hacks. IE7 saw a few CSS Hacks come back to bite high profile standardistas when sites suddenly fell apart because several exploited browser bugs were fixed.

So how many lines are in your IE stylesheets? For example, on this site, although admittedly its a reasonably simple layout, my current IE6.css file has 14 lines of which 8 are selectors and declarations. The likely suspects in my IE6.css file use width, padding and a font-size for code. I’m of the mind to use this stylesheet sparingly after all measure of enquiry (or a sudden time crisis) has led me to no other alternative. I also only place the very exact rule that needs to go into that IE6 fix. As yet I haven’t had to utilise an IE7.css file.

(more…)

As a colonial its important to weigh up the two opponents before placing my 20 cent bet. In the Blue Corner sit Paul Boag and his straightman Marcus Lillington (of Headscape) - try to picture Batman and Robin without the gay costumes. They’ve pummelled out 122 episodes of highly informative web standards lacrosse. Their army of loyal devotees worship DOCTYPE as God and are willing to suffer minor abrasions in a quirky suburban English manner - with humour and a hard cup of tea.

In the skies Paul and Marcus would be the aces defending a very British Tradition of the BBC and Thames Television logos. Hand to hand I think they’d be a solid pair of knobbly fellas willing to break a hatstand or two. Seriously. Maybe even a pint glass.

(more…)

Understanding how humans sort through a complex world of sensory input, and how we make these quick perceptive decisions, allows us to accept that visual design can go overboard in various little ways that affect the users ability to focus on content or utilise the information we’ve provided. In a signal versus noise landscape we definately don’t want to introduce noise into the visual design.

(more…)

The Developers

The first problem area of QA - the developers themselves - can always be improved over time. Every project teaches new tricks and techniques so by the time you’re doing QA its probably quite an old site, or a migration over to a new CMS. I’d recommend you note and advise as unobtrusively as possible - from a huddled corner behind the water cooler - that there might be more effective ways to skin that cat. Semantics, for example, seems to be a curve rather than a binary step. I’ve learned the hard way over time to appreciate and acknowledge the good factors as well - so don’t just say the code is shit and storm out of the room.

(more…)

Recent examples of the red herring phenomenon in my recent past are always sore points to the ego. On a web page enhancement, for example, I had to create some backgrounds behind a set of four H3 headings, each of a different colour and with a rounded right hand corner. I put in a soft gradient for effect and had not bothered to change the text from #666 (quite blackish but not black) to anything especially relevant. My world view was - hey what do you think of that background and gradient? What about those four colours? The red herring reply was the #666 on that H3 needs to be white, something that wasn’t meant to be up for question.

(more…)

On the other hand our electronic dishwasher, video player or mobile phone generally lack a lot of the affordance they should have. We complain about them constantly - manuals written in Korean are testament to the issue. Please don’t deny there’s a problem with the 1001 inventive interfaces to programming a television.

Web design requires the same attention to affordance. Something that’s a link needs to have the affordance of a link, for example. Cool is alright but if you went to work tomorrow and designed a cool door for your office which lacked affordance you might get some complaints - suddenly you have an office that’s got usability and accessibility issues! People can’t find the way in to see you and those who find the handle try to turn it when the knob needs pulling towards them. For no apparent reason they find themselves locked out of your office. While, of course, it works perfectly well for you because you know the secret behind that lack of affordance. This is the crux of usability and accessibility in real world web design.

(more…)