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.

  1. <div style="
  2.         background-image: url(somegraphic_with_text.jpg);
  3.         line-height: 0px; /* Solves IE7, IE8 Compat */
  4.         font-size: 0px; /* Solves IE8 */
  5.         color: transparent; /* Solves all the modern */
  6.         width: 1030px;
  7.         height: 320px;
  8.         ">
  9.         Place text that you want to be read by the screen reader here.
  10. </div>

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.
Add Comment Register



Leave a Reply

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

ERROR: si-captcha.php plugin says GD image support not detected in PHP!

Contact your web host and ask them why GD image support is not enabled for PHP.

ERROR: si-captcha.php plugin says imagepng function not detected in PHP!

Contact your web host and ask them why imagepng function is not enabled for PHP.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>