Description
Example 3 fails on visual emphasis using font-weight: bold
specified via CSS rather than using a semantic element
https://www.w3.org/WAI/WCAG22/Techniques/failures/F2#example-3-using-css-to-visually-emphasize-a-phrase-or-word-without-conveying-that-emphasis-semantically
H49 suggests using the strong
element for this:
https://www.w3.org/WAI/WCAG22/Techniques/html/H49
@stevefaulkner did some testing on this in January 2023 https://www.tpgi.com/screen-readers-support-for-text-level-html-semantics/
tl;dr
- Modern screen readers do not voice
strong
orem
differently to other text - NVDA 2015.4 did voice these differently but removed this feature in NVDA 2016 because it was extremely unpopular with users (Semantic support (not just style support) for del and ins on web pages nvaccess/nvda#4920 (comment))
- font-weight: bold (and other font styles) are optionally announced by screen readers
To quote Steve's post:
the strong and em are not accessibility supported and therefore should not be a factor in accessing conformance with SC 1.3.1:Info and Relationships. Visually identifying emphasised and important text via CSS styles is an accessibility supported method and will be conveyed to SR users when they have the required settings enabled.
On that basis Example 3 shouldn't be a failure.