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?
-
And thanks for the uncommented down-vote, really helps me improve the quality of my questions.– ZanoAug 11, 2010 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 VarodOct 11, 2013 at 1:25
Add a comment
|
7 Answers
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.
answered Aug 9, 2010 at 21:44
That's what alt is there for, for screen readers and robots
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.
-
+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.– wootcatOct 9, 2013 at 16:12
-
1They 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). Oct 10, 2013 at 7:06
-
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.
-
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. Oct 10, 2013 at 7:05
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
-
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!? Oct 11, 2013 at 1:22
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
answered Feb 10, 2011 at 9:05
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.
