Use real markup for emphasized or special text
Emphasis, quotation and correction are meaning rather than decoration, so they belong in markup. Use em and strong for stress, blockquote and q for quotations, cite for the title of a work, del and ins for edits, sub and sup where they change what a value means. W3C lists H49 as sufficient for 1.3.1 Info and Relationships together with the general technique of marking up structure semantically, so it is one half of a pair and never carries the rule alone. CSS bolding looks identical on screen and carries nothing underneath it. Where this bites hardest is any page whose styling changes what a sentence means, and the clearest case is a struck-through price sitting beside a live one.
How we find it in an audit
No scanner separates meaningful emphasis from decorative styling, so this one gets read. We look for the places where presentation is doing work. Struck-through prices, quoted passages built from indents, a do NOT in bold. Then we check whether the markup underneath says the same thing the styling says.
How affected users experience it
Most screen readers say nothing about bold or italic by default, so emphasis that exists only in CSS simply is not there. A price list showing $80 struck through beside $60 reads as eighty dollars sixty dollars, and a listener has no way to tell which one they are about to be charged. With del and ins a reader can be set to announce the difference, and adding the words was and now makes it work for everybody with no settings at all.
Passes vs. fails
Passes
<p>Was <del>$80</del>, now <ins>$60</ins>.</p>Fails
<span style="text-decoration: line-through">$80</span> $60How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- ARIA attribute is defined in WAI-ARIAA tool can check this
- ARIA state or property has valid valueA tool can check this
- Element with role attribute has required states and propertiesA tool can check this
- Form field has non-empty accessible nameA tool can check this
- Headers attribute specified on a cell refers to cells in the same table elementA tool can check this
- Role attribute has valid valueA tool can check this
- ARIA global properties not used where prohibitedA tool can check this
- ARIA required context roleA tool can check this
- ARIA required owned elementsA tool can check this
- ARIA state or property is permittedA tool can check this
- Table header cell has assigned cellsA tool can check this
Other ways to satisfy this rule
52 guides on this site are filed under 1.3.1 Info and Relationships. W3C lists this one as sufficient for that rule only alongside G115, so the pair is what passes and neither half does on its own.
- ARIA11sufficientAdd landmarks so users can skip around
- ARIA12sufficientUse role=heading when h1-h6 is impossible
- ARIA13sufficientName repeated landmarks so they are distinguishable
- ARIA16sufficientName controls from visible text with aria-labelledby
- ARIA17sufficientGroup related form fields with ARIA roles
- ARIA20sufficientMark leftover page areas with role=region
This guide is our interpretation of W3C technique H49: Using semantic markup to mark emphasized or special text. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.