Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

C8: Using CSS letter-spacing to control spacing within a word

Important Information about Techniques

See Success Criterion 1.3.2 (Meaningful Sequence)

Note: This technique must be combined with other techniques to meet Success Criterion 1.4.5 (Images of Text)

  • Success Criterion 1.4.9 (Images of Text (No Exception))
  • 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:

    Example Code:

    h2 {	letter-spacing: 1em; }

    So for the markup:

    Example Code:

    
    <h2>Museum</h2>
    

    the rendered result might look something like:

    Example Code:

    
    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.

    If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.

    Follow Lee on X/Twitter - Father, Husband, Serial builder creating AI, crypto, games & web tools. We are friends :) AI Will Come To Life!

    Check out: eBank.nz (Art Generator) | Netwrck.com (AI Tools) | Text-Generator.io (AI API) | BitBank.nz (Crypto AI) | ReadingTime (Kids Reading) | RewordGame | BigMultiplayerChess | WebFiddle | How.nz | Helix AI Assistant