Avoid Inline Spacing

Serious - WCAG Level AA

What the issue is:
The accessibility issue arises when developers use inline styles to set text spacing (such as line-height, letter-spacing, or word-spacing). Inline styles are hard-coded directly into HTML elements, which makes it difficult for users to override these styles with their own custom stylesheets. This can lead to poor readability for users with visual impairments who may need to adjust text spacing for better legibility.

Why it matters:
For users with low vision or other visual impairments, the ability to adjust text spacing is crucial for improving readability. When text is too tightly spaced, it can be difficult to read, leading to increased cognitive load and frustration. By allowing users to customize text spacing, you empower them to create a reading experience that suits their needs, which is a fundamental aspect of web accessibility.

How to fix it:

  1. Remove inline styles: Identify any inline styles that set text spacing properties on elements.

  2. Use CSS classes: Define CSS classes in an external stylesheet or within a <style> tag in the <head> section of your HTML document.

  3. Apply classes to elements: Replace inline styles with the appropriate CSS classes.