Font Weight Too High
Critical - WCAG Level A
What the issue is:
This rule flags elements that use inline CSS font-weight values of 600 or higher to convey importance or emphasis instead of using appropriate semantic HTML (for example <strong> or <em>). The automated fix wraps the element’s textual content in a semantic <strong> element and removes the inline font-weight style.
Why it matters:
Visual bolding alone is purely presentational. Assistive technologies (screen readers, braille displays) rely on semantic markup to expose meaning and relationships. <strong> communicates 'strong importance' to AT, while a span with font-weight only communicates a visual style. Using semantic elements improves comprehension for screen-reader users, keyboard-only users, and when content is consumed without CSS (high-contrast or user stylesheets).
How to fix it:
Audit occurrences of inline style="font-weight:600" (or >=600) and determine whether the bolding conveys semantic importance or is purely stylistic.
If it conveys importance/emphasis, remove the inline style and wrap the text node with <strong> (or <em> if it is emphasis rather than importance).
If the bolding is purely visual, remove inline font-weight and use a class (e.g., .visual-bold) for presentation-only styling; do not rely on presentation to convey meaning.
If replacing with <strong> changes visual weight, adjust global CSS (e.g., strong { font-weight: 700; }) rather than reintroducing inline font-weight tied to non-semantic elements.
Best practices:
Prefer semantic elements (<strong>, <em>) over presentation tags (<b>) for meaning.
Use CSS classes for consistent styling instead of inline styles.
Audit stylesheets for non-inline font-weight rules and ensure semantics are used where meaning is intended.
Common mistakes:
Automatically converting every bolded element to <strong> without checking intent (overuse reduces meaning), using <b> or role attributes (there is no role="strong"), and reintroducing inline font-weight on the element instead of styling the semantic element.
Avoid wrapping interactive controls in semantic tags in ways that break accessibility — keep label/button semantics intact and place <strong> only around text content.