Search code examples
htmlimagefindtitle

How to find text in images with the browser control+F

Have HTML pages with many sections and each section has a section title displayed as an image (to use nice font). The problem is that even if I specify an 'alt' and 'title' text on each image/title the Ctrl+F browser functionality does not find the text. Thought two possible solutions but not very happy about them

  1. Use embed fonts. Problem: Can not find the font required by client to use and not sure about copyrights.

  2. Have the text in the image in DIV near the image but hidden from user view. Problem: Can search engines consider this keyword stuffing? Will browser find text if display:none

Does anybody has a better solution? Thanks Riga

Solution

  • Generally the best approach to image replacement is to do so exclusively within the stylesheet.

    The HTML should still look like:

    <h2 id="fantastic-section-of-awesomeness"><span>This is an Ordinary Heading</span></h2>

    Your CSS can then do:

    h2#fantastic-section-of-awesomeness {
    background: ...; /* The replacement image */
}
h2 span {
    text-indent: -100000px;
}

    Note that the text is not actually hidden. Some screen readers interpret display: none; incorrectly (even when given in a media="screen" stylesheet). Instead, we simply shift it far off the left side of the screen where it can't realistically be seen.

    I have not specifically tested this for Ctrl+F, but the fact that the text is still technically visible should allow the browser to find it.

    It will not be able to highlight the image as a match, however, which may still lead to confusion. There's no real way around that without using an @font-face.