Best Practices for Accessible Text with Images
Banners are a common part of websites. They come in many shapes and sizes and perform many functions but they should always be accessible and easy to read.
Banners are a common part of websites. They come in many shapes and sizes and perform many functions. Some are static, others are dynamic. Some are still, others rotate. Some motivate while others have a ‘hard sell’ approach. They all communicate, and most of them use words to make the message clear. Are there better (and worse!) ways to include words in a banner? We think so. We’d like to point out the differences between having regular text appear overtop of a background image, and including that text in the image itself.
Accessibility
If you’re interested in making your website more accessible to people with disabilities, you’ll want to use text over top of a background image, because it’s easier for screen readers and other assistive devices to find the text. This is especially true if your banner image shrinks with the size of the screen; text in an image becomes illegible for everyone when the entire image gets small enough.
If you want the text in the banner to serve as a heading on the page, that text must be easy to find, within the proper heading tags – this is much easier to achieve if you are using text overtop of a backgound. It is also much easier to comply with the The Accessibility for Ontarians with Disabilities Act (AODA), and any other legislation that references WCAG 2.0 Level AA.
SEO
Search engines use the same rules as screen readers when they sift through the content of a website, so it’s no surprise that clear text will be easier for an engine to index than text embedded into the image itself. And as above, it’s crucial for the main heading on your page to be easy for search engines to find; so clear text over a background is the clear winner here.
Flexibility
This is where things get interesting… the prevailing wisdom used to be that creating banners with embedded text was more flexible because you could use non-standard fonts and colours. While it may still be some people’s taste to use different colours/sizes/fonts of text in one banner, most designers would discourage this because the overall effect is distracting.
Today we understand flexibiliy in terms of the ability to display dynamic text (displaying different text for different users/situations, etc.), or the ability to time the appearance of the text or have it fade or slide onto the page, and this kind of flexibility is only possible if the text is not part of the image.
Ease of use
What’s easier: using an image editing program to add text to an image – trying different fonts and sizes until you get it right, or simply typing text into a field and uploading a background image? Those ‘cool’ banners with text in them may look simple, but they can be very tricky to create and made to look right within the website. Uploading a background image, and typing into a text field is much easier because the website designer has already predetermined the best font, size, background, so that it looks great – EVERY TIME.
Maybe not a banner?
Are you using your big banner to post notices? If so, you could be using valuable space to communicate something that isn’t your primary message. A home page banner is best used for main website messaging (“Offering expert service 24/7”) and not event notices (“Job fair this Sunday”). Maybe what you really need is a notice board, where one or more messages can always be clearly seen (so nothing rotates or disappears).
A good web designer will create spaces for you that are appropriate to the kind of messages that you want to send; ones that are easy to use, and easy to read. It takes planning, communication and some creativity. The result is a website that is clear, has better meaning, and is more successful.
Leave a Comment