Cufón and screen readers
Cufón has been talked about a lot recently, and it looks like a potential alternative to static images or sIFR in situations when you absolutely must use a typeface that is not “web-safe”.
I say potential alternative because in its current state there are a couple of issues that prevent me from using it: text rendered with Cufón can’t (easily) be copied and it causes problems in some screen readers.
Looking at Cufón’s Known bugs and issues it seems as if the text selection problem is being worked on, so I’ll leave it at that.
The screen reader problem is more troubling though. It seems to be caused by each word in text rendered by Cufón being a separate
span element. This makes several screen readers (at least VoiceOver, FireVox, ORCA, Window-Eyes, and Opera Voice) Read. The. Text. As. If. Each. Word. Was. Separated. By. A. Full. Stop.
Even worse, in some cases the screen reader will stop after reading the first word of a Cufón-replaced sentence. A screen reader user navigating by headings on a site that uses Cufón for headings may not realise this and miss all but the first word of each heading.
Browsing the Cufón API I found a way to avoid this problem – setting the
separate option to
'none'. This way Cufón does not wrap each word in a separate
span element. The catch is that, as far as I can tell, doing so makes it impossible for the text to wrap to multiple lines, so you can only use it if you know for sure that the text will fit on a single line.
A valid question you may be asking yourself is if screen readers really should be pausing after each
span element. I’m not sure. I think it’s reasonable that screen readers somehow convey
span elements and other inline elements to the user. I’m not sure what the “correct” behaviour should be, and there may be better ways than pausing.
In the case of Cufón the
span elements are meaningless and could (should) be ignored, but other times inline elements are there for a reason. It’s probably hard for a screen reader to guess which it is, though I suppose
span elements could be safely ignored most of the time since they have no inherent semantic meaning.
Anyone know of a solution to this problem, or know more about why some screen readers pause after inline elements? Please let me know.
- Previous post: W3C online course: An Introduction to W3C’s Mobile Web Best Practices
- Next post: Find and highlight HTML elements with FireFinder for FireBug