Accessibility: <i> vs <em>

For my students…

In one of the Quiz questions in Unit C, the following question was asked…

The tag <i>…</i> is available only to devices that can visually display text.

  • Incorrect Response: True
  • Correct Answer: False

The text book author on page c-6 states that this is True although the quiz is set up to mark the correct answer as false. So which is correct? The quiz or the author on page c-6?

I did a little research to answer the quesiton. Several pages from the W3C are included that explain how tags should be used when we are structuring HTML documents.

  • The HTML 4.0 Main Content page 1
  • Using the <em> and <strong> tags 2
  • Using the <i> and <b> tags 3

According to these documents, <i> and <b> render (meaning visually display) italics and bold text. <em> and <strong> are called logical tags and are used for symantic changes (changes in meaning) in non-visual representations of our web pages. Italics and boldness are visual concepts and can be used to "mean" several things. Emphasis and strongness have specific meanings for enhancing a passage of content. Since we are in the business of communicating via the web, it is in our benefit, and the benefit of our clients, for us to understand the nuance of each.

Alright then, so we are talking about how each of these approaches to modifying content presentation are supported by screen readers. We’ve read how the W3C recommends we design but what really (add emphasis to the word really) happens?

After searching a bit on Google for which tags are support by screen readers, I came across the following article by Steve Faulkner 4 . This author tested two different screen readers, Jaws and Windows Eyes, and found that neither "rendered" differences in content when using the <i>, <b>, <em>, or <strong> tags. Perhaps all this fuss about making our content accessible doesn’t matter because the device vendors aren’t supporting the nuance of meaning anyway. What’s a designer to do?

Faulkner concludes…

"While it is good to know this, it is not a reason to not use these elements to convey meaning. Accessibility is not just about people with vision impairment, it’s about all user’s with disabilites, and web standards is not just about accessibility. This is merely another example where screen reader vendors are not serving their customers well."

I agree, just because particular vendors are not utilizing the tags that have been designed to support nuance of meaning for non-visual rendering devices, it does not mean that we as designers should discontinue their use. Once the device vendors, or at least the ones mentioned in this test, catch up with the needs of their customers, our web pages will already be designed to utilize those technologies. We also don’t know what technologies are coming down the road that will take advantage of them. An artificial intelligence program that can discern emotive changes in content based on tag structure? Who knows. As designers of digital communications, we are served by understanding what tools are in our toolbox. It makes us better craftspersons.

References

  1. The HTML 4.0 Main Content page. The World Wide Web Consortium. http://www.w3.org/TR/REC-html40/cover.html#minitoc
  2. Structured text. The World Wide Web Consortium. http://www.w3.org/TR/REC-html40/struct/text.html#h-9.2
  3. Font style elements. The World Wide Web Consortium. http://www.w3.org/TR/REC-html40/present/graphics.html#h-15.2.1
  4. Faulkner, Steve (February 28th, 2008). Screen Readers lack emphasis. http://www.paciellogroup.com/blog/?p=41