10 September 2013
The WCAG guidelines on resizable text state that you should be able to scale text by 200%.
How to test:
In Firefox, got to View -> Zoom -> Zoom Text Only. Then when you are back in your page, zoom up to 200% by pressing Ctrl + 6 times.
Possible problems that happen when only text gets bigger:
- Text that wraps underneath itself has too little space between the letters. You've set your line-heights in px.
- using height which causes text to get cut when it overflows that height
- Items lie on top of one another, because you're using absolute positioning
- text stops sitting on a particular background colour and becomes hard to see (or just looks untidy)
SCENARIO: I have an element that must be at least x pixels tall, but could grow larger if I put more text in there
SOLUTION: use min-height rather than height, remember that older IE will treat height as min-height so use your .ie6 styles or whatever you are using to set it seperately
SCENARIO: I have an element that must be no more or less than a specific height
SOLUTION: set the height in ems rather than px and the box will grow with the text resizing
SCENARIO: text is sitting on top of other text or items and is illegible
SOLUTION: rework the layout using floats or relative positioning, negative margins, or if you have fixed dimensions for your absolutely positioned item (e.g. a close icon on a lightbox), style your surrounding boxes so that their margins sit on the area where the absolutely positioned item is. At worst you may have to use a bit of JS to refine the position (e.g. you need to align something to the bottom of another element) but that is mixing styling rules with behaviour rules.
SCENARIO: my text no longer sits on a coloured background, I've run out of background image
SOLUTION: rebuild so that the background surrounds the content section of your box, which has a background color. The background adjusts as the size of the content grows and shrinks because it sits around it rather than under it
LEAST DESIRABLE SOLUTION: wrap your text in an element that gets given a background color
SCENARIO: there's no longer enough space between the lines of text
SOLUTION: don't set line-height in pixels, set it in ems, and make less use of them because as you use relative units, you'll find that they are a pain to maintain when they start getting inherited.