Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

There are several ways to present text on your web page in exactly the font your designer decided; as an image, a flash hack, some javascript hack, dynamic fonts. But to this day, the only thing that seemingly works on all platforms is the old text-as-graphics solution. This is a kludge, of course, but for accessibility purposes, is using an image containing the text as an alt-attribute considered ok? Vision impaired users would get the text, as would search engines. Or am I missing something?

share|improve this question
    
Thanks for the answers, not easy to choose accepted answer. –  Zano Aug 10 '10 at 22:47
    
And thanks for the uncommented down-vote, really helps me improve the quality of my questions. –  Zano Aug 11 '10 at 13:32
    
I didn't vote down, however, perhaps it is because you didn't include the question whether image as text is OK at the first place, instead you assumed it is and asked about the alt text. –  Danny Varod Oct 11 '13 at 1:25
add comment

7 Answers 7

up vote 6 down vote accepted

With some caveats.

  • If you change the image in the future, the alt attribute must also be maintained.
  • It would seem that search engines assign a higher value to actual text than an image with an alt attribute.
  • IMO, if you're using this for navigation, you'd be better off using @font-face or JavaScript to enhance a text menu rather than replacing it with images from the beginning.
share|improve this answer
    
+1 Thanks for the link. –  Zano Aug 10 '10 at 22:47
add comment

That's what alt is there for, for screen readers and robots

share|improve this answer
add comment

One of the biggest disadvantages with text-as-graphics is their inability to scale with text size (note: text size, not zoom). Sizing the image in ems might help to mitigate this.

Also, bear in mind that maintainability suffers greatly when using images, unless they're dynamically generated.

And, it's pretty inefficient to serve an image when all you want is a custom font - the file size of an image is a LOT greater than the equivalent text.

share|improve this answer
    
Note that text embedded in an image doesn't zoom nearly as clearly as native text in the markup, and so even defining the image size in ems is not an equivalent solution. –  Kit Grose Oct 10 '13 at 7:05
add comment

If you include images (via img) in HTML, always use the alt attribute (sometimes with empty value).

If the image contains text, and this text is (part of) the relevant content you want to convey, include this text in the alt value.

but for accessibility purposes, is using an image containing the text as an alt-attribute considered ok?

No. While it would be no barrier for a blind or a text browser user, dyslexic or visually impaired users (that have images enabled) might have problems with text images:

  • Users can’t adjust the font size, line height, letter spacing.
  • Users can’t change the font family.
  • Users can’t change the colors/contrast.
  • Users can’t select the text (e.g., for copy and paste). (as noted by Kit Grose)

Probably not much of a problem for short text (a single word, very short headline, call-to-action button, …), but it can be an accessibility barrier if used for longer text.

share|improve this answer
    
+1 for noting the inability to adjust the font size. Many users who have low vision issues do not use screen readers and could be limited by the text contained in the image. –  wootcat Oct 9 '13 at 16:12
1  
They also can't select the text to copy/paste it, and the behaviour for print stylesheets is not always desirable (e.g. an image that expects the background on the page to be dark as defined in CSS will print by default with no background at all). –  Kit Grose Oct 10 '13 at 7:06
    
@KitGrose: Good point, I added it. –  unor Oct 10 '13 at 7:18
add comment

I see no problem with it. I've never heard anyone say that it's a bad idea. But try to avoid or do the following:

  • making the entire content of a page an image (common mistake made by people who don't know what they are doing) -- this makes it hard for pretty much anything to parse, including search engines
  • try to avoid it as much as possible -- it's aways better to have text for things that images; it just makes it easier for everything (copying a chunk of text, SEO, etc, etc)
  • add both a an alt and title properties -- this ensures that when people roll over the image they will see the tooltip (because different browsers show different ones); I most do this on images that are links
share|improve this answer
    
Alt text isn't visible on tablets and mobile phones, besides, why should people have to move mouse over images just to read the text!? –  Danny Varod Oct 11 '13 at 1:22
add comment

Alt text's value is decreasing from SEO point of view, so it seems it we all can focus on accessibility and optimize alt text-s for screen readers.

As far as I know, it has only some percent influence on your SERP ranking

share|improve this answer
add comment

As others have said, if you do use this approach, you must provide alt text, however, I highly recommend you don't.

  • Zoom will be broken - Raster images are not scalable to larger sizes.

  • Images take more space than text, this will increase load time of page drastically.

  • Viewers that change browser colors e.g. for the sake of readability change to high contrast light on dark, won't see the images correctly and won't see the alt.

  • Copy paste functionality will be broken (users will not be able to copy any text and paste it into a document as text).

  • Layout and Responsiveness - Readability on mobile device may be broken - If the text isn't text, browsers may not be able to break it up differently into lines in order to fit it onto smaller displays.

  • If you place each word or sentence in its own image, you may improve layout, however, you may break text analysis (SEO).

  • There are commonly supported ways to enforce display fonts using CSS and font files. If some ancient browser does not support this, you shouldn't make all the users of modern browsers suffer for their sake.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.