Web Governance
Is quote element used to mark up quotations?
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.
You must use semantic tags for quotations so that assistive technologies (glossary term, activate to view definition) 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 (glossary term, activate to view definition)-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.
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."
This section gives some examples of the issue.
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.
Web Governance<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.
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.
This section provides instructions on how to identify, review, and fix the issue.
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: `"`, `“`, `„`, `«`, `❝`, `”`, `»`, `❞`.
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.
This section provides some examples of ways to fix this issue.
For the correct semantic HTML:
<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><blockquote> for longer quotes that stand alone. Example: <blockquote><p>In the middle of difficulty lies opportunity.</p></blockquote>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>If this content did not answer your questions, try searching or contacting our support team for further assistance.
If this content did not answer your questions, try searching or contacting our support team for further assistance.