I'm building an image-based horizontal navigation bar for a site, as the designer wants a specific typeface, and the font is not licensed for embedded web use. I assumed the best way to do this would be to make an unordered list of the menu options, then style them with background-image replacements. I've done this, and they work well.
However, now they want the images to scale up on hover, and try as I might to find a solution to scale the background-image, it seems to be more trouble than it's worth with the current state of CSS3 support for background-size. (Please correct me if I'm wrong and there's a solution I missed.) So, I'm resigning myself to switching to an IMG for each list item.
In this method, what would be the best way to keep it accessible without making a royal mess of things? Should I simply use an ALT attribute for each image, or does that not degrade as gracefully as image replacement?
Obviously, I am building this site for a client, and while I've been trying to keep up with best web standards and practices, I must admit I haven't built a client site in a few years (my usual gig is video and film post-production), so I'm going through a bit of a crash course to make sure I'm covering all my bases. Thanks!