Using CSS letter-spacing to control spacing within a word

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

All technologies that support CSS.

This technique relates to:

Description

The objective of this technique is to demonstrate how the visual appearance of spacing in text may be enhanced via style sheets while still maintaining meaningful text sequencing. The CSS letter-spacing property helps developers control the amount of white space between characters. This is recommended over adding blank characters to control the spacing, since the blank characters can change the meaning and pronunciation of the word.

Examples

Example 1: Separating characters in a word

The following CSS would add the equivalent of a space between each character in a level-2 heading:

h2 {	letter-spacing: 1em; }

So for the markup:

<h2>Museum</h2>

the rendered result might look something like:

M u s e u m

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each word that appears to have non-standard spacing between characters:

  1. Check whether the CSS letter-spacing property was used to control spacing.

Expected Results

  • Check #1 is true.