Advanced Text Resizing

For text inside hero images to be considered accessible, they must conform to the following guidelines:

1. They must not be "hard-coded" into the image in order to conform to WCAG 1.4.5 - Images of Text.
2. They must adhere to the contrast requirements of WCAG 1.4.3 - Contrast (Minimum)
3. They must accommodate the adjustable text-spacing guidelines of WCAG 1.4.12 - Text Spacing.
4. They must be resizable via a browser's text zooming feature to conform to WCAG 1.4.4 - Text Resize.

The first item is easily resolved: just use "live" HTML text. Checking contrast is covered in the Text Contrast Strategies section of Enable. The final two requirements, though, can bring up some hard, mind-numbing issues that I have seen over and over again, so I thought I'd show how I've fixed these.

Text Zooming Issues

The styling advice given here is recommended for both new and existing work.

This solution described below is available as an NPM module. (Module installation instructions)

Consider this screenshot of a typical desktop-sized hero image:

Cüneyt Arkın

is a Turkish film actor, director, producer and martial artist. He is widely considered one of the most prominent Turkish actors of all time. Arkın's films have ranged from well-received dramas to mockbusters throughout his career spanning four decades.

Learn more

It is easy to render this text via HTML. The design even accommodates text spacing requirements: when I apply Steve Faulkner's text spacing bookmarklet, the text fills the hero image.

However, things break down when I try to resize the text. Here is what the hero image looked like when I applied 150% text zoom on the page:

This is typical of a lot of hero images on the web. It's so common that I created a JavaScript library to work around this issue. When the text is resized using the browser's text-zooming feature, the layout changes to accommodate the larger text:

How does this work? When the user resizes text on the screen using the browser's text zooming functionality, the JavaScript library adds the text-zoom class on the body tag. Additional styles were created to adjust the layout of the hero.

Installation Instructions

You can load this JavaScript library into your application in several ways:

• as an ES6 module using Webpack.
• as a CommonJS module using require() and Webpack.
• as a native ES6 module within the browser.
• as an old-school ES4/JavaScript library.

If you haven't done so already, choosing which you should use is a major architectural decision. Here are a few articles that will help you decide:

• Jan Olaf Krems gives a great overview of the JavaScript file format differences.
• Joe Honton discusses that with ES modules and HTTP/2, you may not need Webpack anymore
• Stack Overflow has a really good thread about Webpack vs. ES6 modules as well.

Using NPM/Webpack to load ES6 Modules:

1. Install the enable-a11y NPM project.
2. Edit your webpack.config.json file to resolve the ~ modifier by adding the following:
   Wrap text

   ☜ Scroll to read full source ☞

   module.exports = { ... resolve: { extensions: ['.js', '.jsx', '.scss', '.css', '*.html'], modules: [ path.resolve('./src/js'), path.resolve('./node_modules') ], alias: { '~enable-a11y': path.resolve(__dirname, 'node_modules/enable-a11y') }, ... }, ... }
3. You can use the module like this:
   Wrap text

   ☜ Scroll to read full source ☞

   // import the JS module import textZoomEvent from '~enable-a11y/js/modules/textZoomEvent'; // import the CSS for the module import '~enable-a11y/css/textZoomEvent'; // How to initialize the textZoomEvent library textZoomEvent.init();
4. Alternatively, if you are using LESS you can include the styles in your project's CSS using:
   Wrap text

   ☜ Scroll to read full source ☞

   @import '~enable-a11y/css/textZoomEvent';
   (If you are using it in your CSS, you will have to add the .css suffix)

Using NPM/Webpack to Load Modules Using CommonJS Syntax

1. Install the enable-a11y NPM project.
2. You can import the module using require like this:
   Wrap text

   ☜ Scroll to read full source ☞

   var textZoomEvent = require('enable-a11y/textZoomEvent').default; ... textZoomEvent.init();
3. You will have to include the CSS as well in your project's CSS using:
   Wrap text

   ☜ Scroll to read full source ☞

   @import '~enable-a11y/css/textZoomEvent';

Using ES6 modules natively.

This is the method by which the page you are reading now loads the scripts.

1. Grab the source by either using NPM, grabbing a ZIP file, or cloning the enable source code from GitHub.
2. If you want to load the module as a native ES6 module, copy js/modules/textZoomEvent.js , and css/textZoomEvent.css from the repo and put them in the appropriate directories in your project (all JS files must be in the same directory).
3. Load the CSS in the head of your document:
   Wrap text

   ☜ Scroll to read full source ☞

   <html> <head> ... <link rel="stylesheet" href="path-to/css/textZoomEvent.css" > ... </head> <body> ... </body> </html>
4. Load your scripts using the following code (NOTE: you must use <script type="module">):
   Wrap text

   ☜ Scroll to read full source ☞

   <script type="module"> import textZoomEvent from "path-to/textZoomEvent.js" textZoomEvent.init(); </script>

Using ES4