# Word spacing set with !important in style attributes must be at least 0.16em.

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/accesslint/0.16/distinguishable/word-spacing
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

When an HTML element has `word-spacing` set with `!important` in its `style` attribute, and the value is less than `0.16em`, users cannot override it with their own spacing preferences. This is a problem because some people need wider spacing between words to read text comfortably.

WCAG Success Criterion 1.4.12 (Text Spacing), at Level AA, requires that users can adjust text spacing properties without losing content or functionality. The four properties covered are line height, paragraph spacing, letter spacing, and word spacing. For word spacing specifically, users must be able to set it to at least 0.16 times the font size.

Many assistive technologies and browser extensions work by injecting author origin styles to override page styles. A `style` attribute with `!important` has the highest cascade priority among author origin declarations. This means no other author origin style can override it, and tools that rely on injecting stylesheets to adjust spacing are blocked. Users with dyslexia, low vision, or cognitive disabilities who depend on increased word spacing to parse text are directly affected.

The `word-spacing` CSS property adds space on top of the default space between words (such as the width of the space character). So a `word-spacing` value of `0.16em` does not mean words are only `0.16em` apart; the actual gap is the normal space plus `0.16em`. This rule checks the CSS property value, not the total visible gap.

## How to fix it

There are two straightforward fixes:

1. Remove `!important` from the `word-spacing` declaration so users and assistive technologies can override it.
2. If `!important` must stay, set the value to at least `0.16em` (0.16 times the font size).

Removing `!important` is almost always the better option. It lets users set whatever word spacing works for them without any upper bound imposed by the page.

## Examples

### Incorrect: word spacing below the threshold with `!important`

```html
<p style="word-spacing: 0.05em !important;">
  This text has restricted word spacing that users cannot override.
</p>
```

The value `0.05em` is below `0.16em`, and `!important` in a `style` attribute prevents assistive technologies from overriding it.

### Incorrect: word spacing of zero with `!important`

```html
<p style="word-spacing: 0px !important;">
  Words are forced to default spacing with no way to increase it.
</p>
```

### Correct: remove `!important`

```html
<p style="word-spacing: 0.05em;">
  Users can now override this word spacing with their own preferences.
</p>
```

Without `!important`, assistive technologies can inject a higher-specificity or later-declared style to override the value.

### Correct: set the value to at least `0.16em` with `!important`

```html
<p style="word-spacing: 0.16em !important;">
  This meets the minimum threshold, so the restriction is acceptable.
</p>
```

The value is at or above `0.16em`, which satisfies the minimum word spacing requirement.

### Correct: move the style to a stylesheet

```html
<style>
  .spaced-text {
    word-spacing: 0.1em;
  }
</style>
<p class="spaced-text">
  Stylesheet-based styles can be overridden by user or assistive technology stylesheets.
</p>
```

Styles in a stylesheet, even with `!important`, are easier to override than inline `style` attributes with `!important` because later stylesheets or higher-specificity selectors can take precedence.

## Notes

This rule only applies when the element has visible text node children. It does not flag elements that contain no text.

If the page provides its own mechanism for users to adjust word spacing (such as a settings panel), the rule may still flag the issue, but the Success Criterion could be satisfied through that mechanism. Relying on a custom control is less reliable than simply allowing style overrides, since users must discover and operate the control.