Good type… …needn't be flat! Rollercoaster

Accessible Text in SVG

This is the best solution to use, especially when building from scratch.

Consider the text that is overlaying the image below. You will notice that clicking the "Animate Text" button moves the text along the path of the roller coaster it overlays.

This text complies with text spacing and text resizing requirements. If you use the text-spacing bookmarklet above, the text spaces out and doesn't get cut off.

A screen shot of the above demo showing the letter and word spacing increased.
Figure 1: The above demo with the text-spacing adjusted with the bookmarklet.

Using a couple of cross-browser tricks, this text also resizes well using the browser text-zooming functionality:

A screen shot of the above demo with the text zoomed to a factor of 200%
Figure 2: The above demo with the text zoomed to 200%.

The design also ensures that when text spacing is adjusted and text zoom to 200% is applied, the text is still fully visible.

A scrren shot of the above demo with both increased text spacing and text zoom of 200% being applied.
Figure 3: The same demo with both text spacing and text zooming applied.

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞