The simple, perfectly valid and accessible solution is to use the <optgroup> element. It’s used for grouping <option> elements in a <select> list into sections. It’s perfectly safe to use since it’s supported across all browsers.
After writing my first article on the subject, Ultimate Site Logo, I’ve come up with two significant enhancements.. With the original solution, there were two major flaws. The first one was a semantic one and the other one a more obvious and technical one.
This time around I think I’ve got all the details right. Well, if that’s not Kaizen, what is?
Imagemaps was very popular in the early days of webdesign but seem to have fallen out of grace. Probably due to accessibility problems and the rise of CSS based designs. I think that it still has it’s place when used properly and one being aware of it’s potential accessibility problems.
I thought that to actually code this solution would be pretty straightforward, but soon discovered some peculiar quirks. I also couldn’t find any information about this, so I thought that I’d share my experiences with you.
I really hope that Stuart Robertsson, the maker of the ingenious Firefox Add-on X-Ray, updates it to work with Firefox 3 soon! I don’t think I’ve realized how much I’ve relied on this add-on in my daily work until now that it doesn’t work anymore.
To have a good site logo is important. It’s one of the things that distinguish your web site from everybody else’s. It’s also a design element that exists on all pages within your site. Naturally you want it to be good looking, but at the same time it needs to be accessible and also search engine friendly. To do this properly there are some techniques worth knowing. In this article I will show you the approach I’ve taken on my own blog.
In my opinion a good site logo have these characteristics:
It’s search engine optimized
Score high on Google
Support the strong convention that a click on the site logo takes you to the homepage
Enable those with screenreaders or images turned off to read the “logo”
It looks good
A good looking logo is important to build your brand.
If you’re the impatient kind you can watch the example page right away. For an explanation of how it’s done, read on!
If you’re building web sites you probably mark up contact information every now and then. Why not do it in a standardized ways so that you are able to quickly mark it up, style it and enhance it with microformats at the same time? The way to do this is by using hCard, a microformat for marking up contact information.
This article will not only show you why you should do this, but also exactly how!