Potential A11y Violation:
Invalid visual emphasis through CSS
Point of Failure
CSS should not be used to visually emphasize a word or phrase without conveying that emphasis through semantic HTML.
Okay To Do
html
<p>We will <strong>require</strong> proof of ID.</p>html
<p class="text-bold">Page Title</p>Not Okay
html
<p>We will <span class="text-bold">require</span> proof of ID.</p>html
<h1>Page Title</h1>Available Automation Evaluation
In checking known available linting and testing tools, these are our findings.
Linting Could Exist
Potentially automatable through a CSS linter. Ensure there are no classes that do the same thing the <strong> or <em> elements do.
Testing Exists
See axe-core library for p-as-heading rule.
Other Test Methods
In addition to automated tests, there are other types of tests that could be conducted to prevent this potential violation.
Developer Authored Test Could Exist
Developers should ensure that their code does not violate this rule.
Manual Test Exists
Inspect DOM where words have been given emphasis or boldness. Ensure that the appropriate HTML element has been used instead of CSS.