From testimonials to sentences highlighted in a blog post for more visual interest, most websites we build include quotes.
Typically, quotes on websites are styled in a unique way to make them visually stand out from the body content. Adding unique CSS styles to quotes makes it apparent to sighted users that they’re encountering a quote and its citation. However, CSS styles are not surfaced for screen reader users, so it’s vital that quotes are marked up as such with proper HTML tags.
Blockquote HTML Tags
When coding a blockquote, you can make it accessible for screen readers by using the <blockquote> HTML tag and a <cite> tag to indicate the citation.
Here’s an example of a blockquote on the WordPress Accessibility Day website.
This is the HTML code for that quote, which was created using the WordPress core blockquote block:
<h2>From a Past Sponsor</h2>
<blockquote class="wp-block-quote">
<p>“We were thrilled to be a sponsor of the very first WordPress Accessibility Day. As a web design and development company, it’s important to us to support the effort to help anyone who wants to learn about website accessibility best practices for WordPress websites. There were so many top-notch presentations the first time around, and we can’t wait to learn all we can again during this year’s event.”</p>
<cite>Ron Zasadzinski, CodeGeek</cite>
</blockquote>
If you’re using the block editor and the default block quote block, this semantic HTML is taken care of for you. If you’re using a different block library or page builder, you’ll want to inspect any quotes on the front end of the website to ensure they are marked up correctly.
Screen Reader Support for Blockquote Tags
Screen readers don’t fully support announcing a blockquote tag when they encounter it. Currently, only NVDA and JAWS announce blockquotes to users.
In NVDA, users hear: “Block quote. [quote text here] [citation here]. Out of block quote.”
In JAWS, users hear: “Block quote. [quote text here] [citation here]. Block quote end.”
Other screen readers, including VoiceOver, Narrator, Orca, and TalkBack, ignore the <blockquote> tag entirely and do not announce it.
If you want to see examples, Adrian Roselli has a great post that walks through different variations of <blockquote> usage and how various screen readers announce them.
Why Use the Blockquote Tag
If not all screen readers announce the presence of a blockquote tag, you may wonder if you need to use it.
Yes, you should use it. Here’s why:
In WebAIM’s most recent screen reader usage survey, 84.4% of people said they used JAWS or NVDA as their primary screen reader. This means that most screen reader users who visit a site you build will get the context of the text in a block quote and when it ends.
This is helpful information that gives users a better understanding of the content on your website. So, even if all screen readers don’t announce it (yet), it’s still important to use the correct tag for the ones that do.
Quotes Are Not Headings
I’d be remiss in discussing the correct HTML code for block quotes if I didn’t call back to the Accessibility Weekly post on heading order with this reminder:
Quotes – no matter how big they might be in the design – are not headings.
This is a frequent mistake we see when auditing websites: instead of coding quotes in blockquote tags (or within blockquote tags), the quote is wrapped in a heading tag (H2, H3, etc.). Typically, developers do this because they want the quote to adopt the styles for that level heading.
It is incorrect to tag something as a heading just because it needs to match the style of a heading. Instead, apply those styles to the blockquote tag and/or the cite tag or utilize a class.
Quotes should always be wrapped in a <p> tag within a <blockquote> tag, even if they need to be very large.
Additional Resources
Join the Conversation!
There's a dedicated thread on this post inside of The Admin Bar community. Join in on the conversation, ask questions, and learn more!
Group Thread
Amber Hinds
Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.
Through her work at Equalize Digital, Amber is striving to create a world where all people have equal access to information and tools on the internet, regardless of ability. Since 2010, she has led teams building websites and web applications for nonprofits, K-12 and higher education institutions, government agencies, and businesses of all sizes. Through this journey, she learned about the importance of making websites accessible to everyone, and it has been her passion to bring awareness to accessibility and make website accessibility easier, ever since.
