Make Sure Your Website Text is Still Legible When It is Resized

A fundamental guideline in web accessibility is making text scalable for people with visual disabilities.

However, without the proper knowhow, text often disappears when resized and the page gets usability problems. Here are pointers that will make your site work for all visitors, whether or not they change the text size.

1. Use minimum heights for containers.

The problem with using fixed heights for containers is that text, when enlarged, goes beyond the borders and covers the items below it. To fix this problem, use minimum heights for your containers so that they will increase along with the text, thereby pushing the items below it downward and preventing overlapping.

2. Use dark background colours.

Light-coloured text over a dark background image, when enlarged, will cause it to extend beyond the image. If the background colour is white, the text becomes illegible. An easy way to get around this is to use a dark background colour so that when the text overruns the background image, it will land on a dark background and still be visible.

3. Stay away from horizontal scrolling.

Horizontal scrolling is not favoured by most web users so it is best to avoid using it when the user is resizing text (at least for the first 2-3 resizes). Horizontal scrolling is usually a result of containers having their widths specified in variable units such as em, so that when text increases, the widths also increase.

4. Avoid embedding text within images.

Users cannot resize text embedded within images. If the text is essential to your content, avoid embedding it and convert it to real text.

5. Make a visible font resizer available to the user.

Having a visible font resizer for the user rather than letting them do it through their browser is better for you since there is less chance of your page design being altered. A visible font resizer acts by pulling in another stylesheet that stipulates a larger font size or increased dimensions to allow larger text.

Conclusion

It's important to remember that to communicate effectively online you need to make sure your message is not only well written, but also well-presented.

If people find it slow, difficult or impossible to read your information, you're creating a poor user experience and poor website usability - and when that happens you can be sure your website visitors will be heading back to the search engine and off to visit competitor websites that are more accessible and easy to use.