Digital Web just released the first part of a new two part article of mine entitled Seven Accessibility Mistakes .
In it I am listing mistakes I have encountered in the past (and done some of them) and give tips how to avoid them in the future.

Some of these tips might be utopic for you to achieve, but I for one am up for the challenge.

Following a thread on the evolt list about reading the next sibling element of a current element and making sure it really is an element and not a text node (line break), I decided to add a small helper object to my upcoming JavaScript book that takes care of some of these issues.

Give it a try: DOMhelp

My questions now are:

• Is that something that really can help save beginners frustration
  about different browsers and DOM oddities?
• Is it pretty bullet proof?
• can you think of other methods that should be in there?

I promise to add a greeting, should you come up with something I
forgot or find out I did wrong. I don’t get many free copies though…

:-)

I am aware that there are a lot of libraries already out there, but
most of them are just too massive to use in a beginner book.

Well, it is the 24th, and I am with my family celebrating Christmas. This year they managed to create the ultimate torture device: “We don’t give any big presents this year, so don’t bother getting some”. Of course everybody told me in secrecy about the massive presents they did buy for the others…

Happy fact: The first three chapters of the ten chapter book for Apress “Practical JavaScript for the Usable Web” are finished and it will be shipped in July. The other project I am involved in is scheduled a bit earlier and will feature one chapter on “Accessible JavaScript”.

This question pops up almost weekly on message boards, mailing lists and in chat sessions:

How can I remove the ugly border around an image when it is linked?

I am amazed that this is still a question that needs to be asked, but the trick to remember is that when you put an image inside a link, like:

Then the browser puts a border around the image in the colour of the link. Therefore, changing the link border setting will not have any effect:

a {border:none; }

Instead, you need to set the image border to “*none*”:

 a img {border:none; }

It might be a good idea to define this as a preset in the beginning of your style sheet, to avoid the need to repeat it over and over again.

Also notice that the setting is “border:none”, which tells the user agent that there should not be a border – if you use “border:0” you expect the User Agent to know how to display a border with a width of 0, which might not be possible.

I hope that this is going to be a post to show up high in google sooner or later, much like the ugly yellow form fields one.

I just updated DOMCollapse to support Safari and use proper DOM2 unobtrusive event handling.

If you don’t know it yet, DOMCollapse is a script that allows you to turn any page element into a trigger, that shows or hides the following element, by adding a CSS class to it.

Enjoy and please check for bugs.

Tested on MSIE 6, Firefox 1.07, Firefox 1.5 and Opera 8 on PC and Safari on Mac.

Comment at the original DOMCollapse post