Use a quote element to mark up quotations

Introduction¶

This document gives information about the related Acquia Optimize checks:

• Use a quote element to mark up quotations

What¶

Ensure that quotations in the website text are marked up with the appropriate semantic HTML tags. Inline quotes should use <q> tags, while longer, standalone quotations should be enclosed in <blockquote> tags to maintain proper structure and presentation.

Why¶

You must use semantic tags for quotations so that assistive technologies such as screen readers can accurately interpret and present the content. Without the correct tags, quotes may be read without distinction from the surrounding text, which makes it harder for users to understand their significance or origin. This can disrupt the flow of information and obscure the intended meaning, especially for users that rely on auditory feedback or alternative text-based outputs. Proper semantic markup helps to preserve the structural and contextual relationships within the content and allows all users to engage with it as intended.

This check affects the following users with:¶

• Visual impairments: Who rely on screen readers to differentiate and interpret quotes within the content.
• Cognitive impairments: Who benefit from clear content structure and proper emphasis to aid comprehension. 

User story¶

Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy:

"When I read news articles online, it can get really confusing trying to figure out who is saying what if quotes are not marked properly. It is especially frustrating when I am try to understand what politicians or experts actually said versus the journalist’s interpretation. And then there are times when I am helping my kids with homework. When we work on history assignments, it is such a relief when my screen reader clearly identifies the parts that are direct quotes from historical figures. It makes me feel more confident guiding them, and honestly, I learn something new myself too."

Examples¶

This section gives some examples of the issue.

Example: Quote presented as plain text without semantic markup¶

A news website publishes an article on scientific breakthroughs and includes a quote from Marie Curie. However, the quote is presented as plain text within quotation marks, without any semantic markup to indicate it is a quotation.

<p>Marie Curie once said, "Nothing in life is to be feared; it is only to be understood."</p>

While the quotation is visually clear, it lacks semantic structure. Assistive technologies, such as screen readers, treat it as ordinary text, failing to convey that it is a quoted statement. This diminishes the significance and context of the quote for users who rely on these tools.

Example: Quote with correct semantic markup¶

A news website publishes an article on scientific breakthroughs and includes a quote from Marie Curie. The quote is marked up semantically to indicate that it is a quotation.

<p>Marie Curie once said, <q>“Nothing in life is to be feared; it is only to be understood.”</q></p>

Assistive technologies, such as screen readers, recognize and announce the quote as a distinct quotation. This ensures that users who rely on these tools can fully understand its significance and context, which provides an equivalent experience to sighted users.

How¶

How to review it.

The Acquia Optimize platform highlights instances where parts of the text contain characters typically used to mark quotations but are not enclosed in semantic HTML tags for quotes. Specifically, it flags the use of the following characters when they are not semantically coded as quotations: `"`, `“`, `„`, `«`, `❝`, `”`, `»`, `❞`.

Your task is to decide if a piece of text is a quotation that should be marked with semantic code. Follow these steps:

Understand the context:

• Is the text a direct quote? A quotation is when you copy exactly what someone else has said or written. It should be marked as a quote if it’s word-for-word or comes from another source, like a person, book, or article.
• Is the text important because it’s a reference or proof? Is it a famous line from a book or poem? If yes, it should be marked as a quote.

If you can answer "no" to the points above, it is okay that the quotations are not semantically coded, and you can now mark the issue as "reviewed."

Otherwise, you must first apply the correct semantic coding for the quotations before you mark the issue as "reviewed."

For more information, visit the user guide article:
How to review an accessibility issue.

Additional resources¶

WCAG success criteria¶

1.3.1 Info and Relationship