Accessible Text in SVG
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.
Using a couple of cross-browser tricks, this text also resizes well using the browser text-zooming functionality:
The design also ensures that when text spacing is adjusted and text zoom to 200% is applied, the text is still fully visible.
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.