Distinguishing B(old) from STRONG Text with CSS

| | Comments (0)

Although not a major accessibility blocker, many standards experts recommend replacing B tags with STRONG tags (and I with EM). If you are dealing with legacy documents, this can be trick because B tagged text and STRONG text actually look identical in WYSIWYG mode (and neither are read differently from normally formatted text on most screenreaders).

There are two solutions to deal with this. One can automatically replace the B tag with the STRONG tag in the HTML code. However, because the text looks the same, I find it's easy to overlook this step. So to spot offending tags, there's a CSS trick you can use.

If your goal is to eliminate all B tags, you can modify your CSS so that anything in the B tag shows up as a garish color (say red). See CSS example below:

b {color: red; font-weight:bold}

Once implemented, the Bold text will be magically transformed into a freaky color making the offending tag easy to spot in WYSIWYG mode. So long as the STRONG tag is just strong {font-weight:bold}, the visual outcome will be different.

Philosophical Note

A question that has vexed many a strandardista mind is why the B and I tags are still in every major (X)HTML spec despite the long-standing campaign against them. The one spec that eliminated them officially was XHTML 2.0, and that seems to have been superseded by HTML 5 (which still keeps B/I although only as a last resort).

I think the answer is that bold-face/italic formatting are inherently presentational. That is, when a content author clicks the B/I button they are not necessarily thinking - "I am emphasizing that strongly", but rather "I need to distinguish the text for some reason."

Sometimes it's emphasis, but sometimes it's for other reasons. I often bold face some non-English text, just to help Western eyes. In other words, bold face/italics along with color/text-size/font-face are accessibility accommodations for the sighted.

The fact that screenreaders skip over boldface and italics by default tells me that this is not information that someone listening to the text can really use. Natural speech does include intonation variations for emphasis, but writing those down in most written text can be very odd and very annoying (based on some novels I have read).

As far as I can tell, I know of only of only one argument for STRONG/EM with empirical consequences and that is translation into non-Western text where visual indicators of emphasis are something other than bold/italics. However, I am not anticipating that most Penn State documents will be translated in the near future.

While there are plenty of CSS workarounds for deploying format changes including re-styling headings, re-styling TH and CAPTION tags, contextual styling of menu links and even using obscure semantic tags like CITE, ADDRESS, ...there are times you want to adjust the visual formatting of a piece of isolated text unrelated to emphasis, I just cannot bring myself to write code like <span class="bold"> when the B tag is so much more succinct.

Leave a comment