TurkReno | Alabama Website Design, Hosting and Optimization

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.