sIFR default CSS hides content from at least one screen reader

Just a heads-up to anyone using sIFR to render text: the default CSS that comes with sIFR hides the replaced text from the VoiceOver screen reader. I don’t know if any others are affected – VoiceOver is the only screen reader I have been able to verify this problem in.

The culprit is the following rule:

1. .sIFR-alternate {
2. position:absolute;
3. left:0;
4. top:0;
5. width:0;
6. height:0;
7. display:block;
8. overflow:hidden;
9. }

VoiceOver (or WebKit, not sure) figures that anything inside an element with those properties should not be displayed or spoken, so the end effect is pretty much the same as using display:none – the user won’t know that the text is there.

This is obviously a major issue for anyone using VoiceOver. Fortunately the following CSS can be used to hide the replaced text instead:

1. .sIFR-alternate {
2. position:absolute;
3. left:-9999px;
4. }

After this change, all screen readers I have been able to test with read the replaced text. So, if you use sIFR on any of your sites, please consider updating the CSS to avoid inadvertently causing problems for VoiceOver users.

Posted on February 8, 2010 in Accessibility, CSS, Typography

• Previous post: Forgotten CSS selectors
• Next post: Specify a text colour for img elements

Comments are disabled for this post, but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.

Sponsors