Techniques for WCAG 2.0

On this page:

-

# H49: Using semantic markup to mark emphasized or special text

## Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)

## User Agent and Assistive Technology Support Notes

- Some semantic elements are not supported well by assistive technologies. Elements and attributes that are known to have limited support include `code`, `del`, `dfn`, `ins`, `kbd`, `s`, `sub`, `sup`, `tt`, and `q`. For these elements, authors are encouraged to consider whether they are using them in a way that would require users to be able to access the semantic meaning of the markup in order to understand the content and, where understanding the semantics is required, to provide this information in text.

- Most screen readers do not provide automatic notification about `em`, `strong`, `b`, or `i`.

- JAWS contains support for `blockquote` and `cite`. WindowEyes contains support for `blockquote`, `q` and `cite`.

- Firefox 1.0 (Windows) and higher, Opera 7.54 (Windows) and higher, Mozilla 1.7.3 (Windows) and higher automatically generate quotes around `q` elements, but Internet Explorer 6 for Windows does not.

Firefox 1.0 (Windows) and higher, Opera 7.54 (Windows) and higher, Mozilla 1.7.3 (Windows) and higher automatically generate quotes around q elements, but Internet Explorer 6 for Windows does not.

## Description

The objective of this technique is to demonstrate how semantic markup can be used to mark emphasized or special text so that it can be programmatically determined. Using semantic markup to mark emphasized or special text also provides structure to the document. User agents can then make the structure perceivable to the user, for example using a different visual presentation for different types of structures or by using a different voice or pitch in an auditory presentation.

Most user agents will visually distinguish text that has been identified using semantic markup. Some assistive technologies provide a mechanism for determining the characteristics of content that has been created using proper semantic markup.

## Examples

See rendered examples of semantic text.

### Example 1

This example shows how to use the `em` and `strong` elements to emphasize text. The `em` and `strong` elements were designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.).

Example Code:

     ...What she <em>really</em> meant to say was, &quot;This is not ok,
     it is <strong>excellent</strong>&quot;!...

### Example 2

This example shows using the `blockquote` element to mark up long quotations which may require paragraph breaks. It also demonstrates the use of the `cite` element to specify a reference.

Example Code:

    <p>The following is an excerpt from the <cite>The Story of my Life</cite> by Helen Keller</p>
     <blockquote>
       <p>Even in the days before my teacher came, I used to feel along the square stiff boxwood
       hedges, and, guided by the sense of smell, would find the first violets and lilies.
       There, too, after a fit of temper, I went to find comfort and to hide my hot face
       in the cool leaves and grass.</p>
     </blockquote>

### Example 3

Here is the use of the `q` element to mark up a shorter quotation. Quotes are provided around the `q` element, because many user agents do not support this element yet and therefore do not display it properly (see UA notes). CSS rules to suppress automatic generation of quotes are provided for those user agents that do support the `q` element, to prevent them from generating quotes automatically in addition to the quotes provided by the author, resulting in double-quoted content. In the future, when the `q` element is more broadly supported, the need to provide quotes and suppress browser-generated quotes will go away.

Example Code:

    q:before { content: ""; }
    q:after { content: ""; }

Example Code:

     <p>Helen Keller said, "<q>Self-pity is our worst enemy and if we yield to it,
    we can never do anything good in the world.</q>"</p>

### Example 4

Superscripts and subscripts are created using the `sup` and `sub` elements.

Example Code:

     <p>Beth received 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
    <p>The chemical notation for water is H<sub>2</sub>O.</p>

## Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM

- HTML 4.01 Quotations: The BLOCKQUOTE and Q elements

- HTML 4.01 Subscripts and superscripts: the SUB and SUP elements

- Fixing Quotes in Internet Explorer

## Related Techniques

- G115: Using semantic elements to mark up structure

## Tests

### Procedure

1. Examine the content for information that is conveyed through variations in presentation of text.

2. Check that appropriate semantic markup (such as `em, strong, cite, blockquote, quote, sub`, and `sup`) have been used to mark the text that conveys information through variations in text.

### Expected Results

- Check #2 is true.

- Top
- Contents
- Intro
- Previous: Technique H48
- Next: Technique H50