Introduction

This document provides information about the Acquia Web Governance accessibility check:

• Is quote element used 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.

Who

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

This section provides instructions on how to identify, review, and fix the issue.

How to identify it

The Acquia Web Governance 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: `"`, `“`, `„`, `«`, `❝`, `”`, `»`, `❞`.

How to review it

You must correctly determine 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 How to review an accessibility issue.

How to fix it

This section provides some examples of ways to fix this issue.

For the correct semantic HTML:

• Use <q> for short quotes within a sentence.  Example: <p>The author wrote, <q>To be, or not to be, that is the question.</q></p>
• Use <blockquote> for longer quotes that stand alone. Example: <blockquote><p>In the middle of difficulty lies opportunity.</p></blockquote>
• If the quote comes from a specific place, like a book or website, add the cite attribute to show the source. Example: <blockquote cite="https://example.com/source"><p>The only limit to our realization of tomorrow is our doubts of today.</p></blockquote>

Additional resources

WCAG success criteria

1.3.1 Info and Relationship

Is quote element used to mark up quotations?

Introduction

This document provides information about the Acquia Web Governance accessibility check:

• Is quote element used 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.

Who

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.

copy

<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.

copy

<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

This section provides instructions on how to identify, review, and fix the issue.

How to identify it

The Acquia Web Governance 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: `"`, `“`, `„`, `«`, `❝`, `”`, `»`, `❞`.

How to review it

You must correctly determine 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 How to review an accessibility issue.

How to fix it

This section provides some examples of ways to fix this issue.

For the correct semantic HTML:

• Use <q> for short quotes within a sentence.  Example: <p>The author wrote, <q>To be, or not to be, that is the question.</q></p>
• Use <blockquote> for longer quotes that stand alone. Example: <blockquote><p>In the middle of difficulty lies opportunity.</p></blockquote>
• If the quote comes from a specific place, like a book or website, add the cite attribute to show the source. Example: <blockquote cite="https://example.com/source"><p>The only limit to our realization of tomorrow is our doubts of today.</p></blockquote>

Additional resources

WCAG success criteria

1.3.1 Info and Relationship