Quotations and Language - Optimal Content Examples

Table Of Contents

Introduction

A quotation is a strict repetition of an expression typically re-produced in the natural human language it was originally delivered.

Every web page is assigned a primary natural human language such English or French. The natural human language is used by screen readers to adjust the pronunciation of words. Occasionally, a quotation's natural human language may be different than the web page's natural human language.

Coding Requirements

The following summarizes selected techniques from the Web Content Accessibility Guidelines (WCAG) 2.0 for satisfying the most common applicable success criterion related to this topic. Additional WCAG 2.0 success criterions, techniques, and failures not listed here may also be applicable depending on the content.

1. Quotations

Related to Success Criteria:

If a quotation is long and requires paragraph breaks, use the <blockquote> element. When quotations marks (", «, ») are desired, they should appear inside the <blockquote> element.

If a quotation is short and appears within a paragraph, use the <q> element. When quotations marks (", «, ») are desired, they should appear outside the <blockquote> element.

Source: WCAG 2.0, Technique H49

2. Primary Natural Human Language Of The Page

Related to Success Criteria:

Each web page must define a natural human language (such as English or French). These are specified using a two letter code (en, fr) in the lang and xml:lang (XHTML 1.0 Strict Only) attributes of the <html> element.

HTML5 Example: <html lang="en">

XHTML 1.0 Strict Example: <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Source: WCAG 2.0, Technique H57

3. Changes To The Natural Human Language Of The Page

Related to Success Criteria:

When content (especially a quotation) is in a different natural human language than the page's primary natural human language (e.g. French on an English page), it must be indicated using the lang and xml:lang (XHTML 1.0 Strict Only) attributes.

The lang and xml:lang attributes are typically applied on the <span> element. However they can be applied to any HTML element, provided it accurately surrounds only the content that is in the different natural human language.

Source: WCAG 2.0, Technique H58

Content Examples

1. Quotations, Same Natural Human Language

Short Quotation (Inline): Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elementum, "nisl et aliquam volutpat, orci metus egestas leo, pulvinar varius justo tellus at quam." Aliquam erat volutpat. Duis feugiat est tempor diam.

Source Code 
<p><strong>Short Quotation (Inline):</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Sed elementum, &quot;<q>nisl et aliquam volutpat, orci metus egestas leo, pulvinar varius 
justo tellus at quam.</q>&quot; Aliquam erat volutpat. Duis feugiat est tempor diam.</p>
Long Quotation (Block): Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elementum, nisl et aliquam volutpat, orci metus egestas leo, pulvinar varius justo tellus at quam.
Source Code 
<blockquote class="indent-medium margin-right-medium"><strong>Long Quotation (Block):</strong> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elementum, nisl et aliquam volutpat, 
orci metus egestas leo, pulvinar varius justo tellus at quam.</blockquote>

2. Quotations, Different Natural Human Language

The RCMP crest contains the words "Maintiens le droit".

Source Code 
<p>The RCMP crest contains the words &quot;<q><span lang="fr">Maintiens le droit</span></q>&quot;.</p>

Web Accessibility Considerations

Visual Impairments

  • The use of language attributes in the source code tell screen readers to say those words with the proper pronunciation.