Text in Images
Summary
Perhaps the most misunderstood and controversial accessibility requirement is the ban of text in images for AA compliance level. For people with low vision, text on images can mean lost content. There are ways to get the look and accessibility you want.
What is AA conformance level?
A, AA, AAA, correspond to whether
"one or more groups will find it impossible/difficult/somewhat
difficult to access information in the document"
If your site does not meet AA conformance level then some users
are going to find it difficult to access.
Why is the alt tag not enough?
People with low vision enlarge the font size on their screen to a readable level. However a screen magnifier is needed to enlarge bit maps. Using this can lose clarity and resolution, so that content can still be difficult to access.
When is this a problem?
This becomes a true accessibility problem when the text in an image is important content. A site with "ABC" blocks, for example, as a background image has not used graphical text for important content - the user does not benefit from being able to read the repetitive rendering of "ABC". But, when the name of the site or a heading is presented only as a graphic, the user may become disorientated without this information.
Does this include images on buttons?
Buttons are often the biggest problem, They contain important navigational instructions. If the user has difficulty reading the text on the button, they are often left confused and stranded
So how can I put content into graphics without being less accessible.
You can use an enlargeable graphical presentation like vector graphics
(SVG -scalar vector graphics) or alternative enlarged pixel images.
For many sites, however, CSS (cascaded style sheets) positioning
and styles
can be used for the right look and the right accessibility level.
As a last resort, you can provide redundant textual content.
Using SVG is good for more than just text
All graphics can be problematic because they can not be rendered
in an alternative presentation that is better suited for a user.
Text can be read, enlarged, reduced, whatever. Graphics however,
are usually just left as graphics.
SVG however is a vector presentation for all graphical presentation.
As such, the user can manipulate it and use technologies that can
render the graphic into a form that is right for them.