Making Accessible Websites for the United Nations

Textual Content

Quotations

WAI Definition (Checkpoint 3.7)

Mark up quotations. Do not use quotation markup for formatting effects such as indentation.

Explanation

Use the <q>or <blockquote> tags to mark up quotations.

If you want to achieve indentation effects, use margins or padding in CSS.

Rationale

Some screen readers identify text that has been correctly marked as a quotation differently, which gives people who use these technologies important information about the context of the text.

Technique

Short quotations of 10 words or less should use the <q> tag for markup. Long quotations of 11 words or more should use the <blockquote> tag.

Example

<blockquote>I feel honoured and very humbled when I think of all our founding fathers wise enough and courageous enough to save this world from the scourge of war who have negotiated, drafted and finally signed the Charter of the United Nations, which has shaped the future of the whole international community.</blockquote>
<p>Secretary-General Ban Ki-moon in remarks at San Francisco War Memorial, 26 July 2007</p>

To indent a paragraph without using the <blockquote> tag, use the following combination of CSS and HTML code:

CSS
p.indent {margin-left:2em;}
HTML
<p class="indent">This paragraph will have a left indent.</p>

Validation

Test

Using the Firefox Web Developer's Toolbar (plugin):
Go to Outline > Outline block elements.

Note

Make sure the option "Show element name when outlining" is checked (in the Outline menu).

Success Criteria

The <blockquote> and <q> tags are to be used for quotations only.