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.
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
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.
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.
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
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.