Accessible Screen Readers for Background Images in IE (Internet Explorer)

Accessibility is, in my opinion, very easy for developers to become compliant with. WCAG 2.0 AA (Web Content Accessibility Guidelines), the ever so outdated 508. It is easy, so if you have the extra time and the audience, please make your site accessible.

That said, I was working on a site that had a home graphic setup as a background image in CSS, with text on it, that surely would not read. You cannot add an ALT tag to a DIV, so what you need to do is simply add the text you need into the DIV itself and then hide it. Unfortunately though, Internet Explorer makes you work a little bit more.

$this->performHighlight(‘


Place text that you want to be read by the screen reader here.

‘, ‘html’, $content);

line-height: 0px; – Solves IE7, IE8 Compat
font-size: 0px; – Solves IE8
color: transparent; – Solves all the modern

About Phillihp Harmon

I'm Phillihp. My name can be spelled the same way forwards and backwards, so can my posts... if you wish. I'm out here exploring, learning, and sharing what I find. This is more for fun and personal growth, I aim to be as consistent as possible, so check back daily!
This entry was posted in **, Chrome, DIY, Firefox, HTML5/CSS3, Internet, Internet Explorer. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


*