Overflow hidden on image alt text

HTML & CSS
1

I have just had an idea and haven’t cross browser tested it yet but…

I am working on a large site with a lot of product images and fairly long alt tags on the product images taken automatically from the product’s name.

When testing I saw a particular product with a missing image and realised I could control how the alt text is displayed.

img {overflow:hidden; font-size:76.9%}

I have set the font size to be smaller but also realised that setting overflow hidden would protect layouts from breaking if ever there was a missing image.

Users who aren’t using screenreaders always have a product title next to the image anyway.

Anyone done this before?

Anyone know if there are any accessibility issues with overflow hidden on an image like this?

2

Hi,

You would need for the image to be display:block for the overflow to work in browsers other than IE.

IE8 and under (haven’t tested ie9) won’t change the font-size of the alt attribute text I don’t believe.

Otherwise it should do what you want but alt attributes should really be short snippets of text and the description should be in the title attribute instead and thus avoid the issue altogether in most cases.