fontsaccessibilitysifrsifr3

SIFR text invisible to browsers' Find command


Users are not able to find sifr text using ctrl-f/cmd-f. Is it possible to configure sifr for this functionality?


Solution

  • No, it is not.

    SIFR (Scalable Inman Flash Replacement) locates specified passages within an HTML document, and replaces them with Flash movies that print out the same text in a fancy font. The original text is preserved, and can be read aloud by screen reader software, but is hidden from view.

    Sadly, the Find function (CTRL/CMD + F) will not work on the Flash movies. Under the hood, each area of replaced text is actually treated as a whole separate window being operated by Flash, rather than an area of the browser window. So the highlighting or skip-to functions of Find will not work on the replaced text, because the browser does not have access to Flash's windows. In some browsers, a Find may "work" by finding the hidden text left for screen readers; but because it is hidden from view, there is no change in the screen to signal its location to the user, which can be frustrating.

    I would recommend looking into the @font-face CSS directive, which allows you to embed custom fonts. Font Squirrel is a helpful utility for generating the necessary code with a large variety of fonts of decent quality. Because @font-face works within the browser instead of superimposing new windows within the document, the Find function will work normally. Not all browsers support @font-face, but most modern browsers do. For older browsers, specify a fallback font in your CSS as usual.

    If it is truly important to you to have a consistent typeface across both older and newer browsers, you could try a hybrid approach:

    1. Use @font-face for most browsers
    2. Use JavaScript to detect @font-face support.
    3. Trigger SIFR only in browsers that do not support @font-face.

    The hybrid approach will yield the best results, but it's rather a lot of work. It also incurs a lot of dependencies -- your page has to include not just the @font-face stuff, but also the SIFR stuff, which will increase your page's download times. So weigh your options carefully.