Find out what CSS Safari supports and what it doesn’t

There’s a great page on the Mac site that lists exactly which CSS rules are supported by Safari. I’d love to see a grid of all major browsers and what CSS they support. While outdated, this CSS3 support grid is a nice start. Heck, maybe I’ll get off my duff and do one myself. If you know of a browser CSS or JS Support grid, leave a comment for everyone to share

Add a conditional comment with XSL

This is probably one of those posts that I’ll use a million times and everyone else will say… that’s nice. Here’s how you create a conditional comment for IE6 with xsl. you need to use an xsl:comment and a cdata and don’t add any extra spacing.

IE6 only element, such as an image or css file

Image replacement and screenreaders

Ok kids, if you use image replacement to create super-cool rollover buttons, raise your hands. Good. Now, keep your hands raised if you put title attributes on the links to give added information. Great! What is the text inside the link? Keep your hands raised if you repeated your title attribute in the link text.

Congratulations, you’ve probably done some usability testing with an actual screen reader.

For those who put your hands down; here’s the deal-eeo. Screenreaders ignore title attributes by default. Sucks… I know. I’ve been adding really juicy title attributes for usability and they’re being ignored!

Go ahead and duplicate your text

I was doing some user-testing today with Victor Tsaran, the Accessibility Project Manager at Yahoo! He came across a button with link text that was the same as the image. He said, “what’s this going to do?” It was a simple thing like “more info”… But the title attribute said “Visit Joe’s Web Site for more information.” That, he suggested, should have been the link text.

The link text is hidden from the visual users and the title attribute is hidden from the screen readers; so duplicating the information isn’t a bad thing. If you find yourself putting good information in a title attribute for a link that is using image replacement, duplicate the content in the link. It’s that simple. Now, put your hands down, it’s starting to smell musky around here.