---
title: Accessible pull quotes
date: 2018-03-25
tags: [code, html, a11y]
description: Pull quotes are small excerpts from a text that are repeated on the side of that text. They are often used with interviews or longer articles to draw in attention. The issues start if the readers do not understand that the thing they are reading is a pull quotes.
---

Pull quotes are small excerpts from a text that are repeated on the side of
that text. They are often used with interviews or longer articles to draw in
attention.

The issues start if the readers do not understand that the thing they are
reading is a pull quotes. I often end up confused because the sentence I just
read had already appeared some paragraphs up.

So it is very important to clearly identify pull quotes as what they are.
Unfortunately, HTML does not have an element for that. So how should pull
quotes be marked up?

![Condensed image of an article using pull quotes](article_with_pullquotes.jpg)

There are two likely candidates.

Contender 1 is the `<blockquote>` element. This one is the obvious choice: It
is a quote that actually gets special styling by default. However, [the spec
does not
agree](https://www.w3.org/TR/html5/grouping-content.html#the-blockquote-element)
(emphasis mine):

> The blockquote element represents content that is quoted **from another
> source**

It is also important to note that block quotes are meant to be read in the flow
of the article while pull quotes are only meant to be read while scanning the
page.

Contender 2 is the `<aside>` element. This one is the obvious choice because
[pull-quotes are explicitly mentioned in the
spec](https://www.w3.org/TR/html5/sections.html#the-aside-element):

> The element can be used for typographical effects like **pull quotes** or
> sidebars, for advertising, for groups of nav elements, and for other content
> that is considered separate from the main content of the nearest ancestor
> sectioning content.

Unfortunately, `<aside>` does not come with default styling. So the pull quote
will look like regular text when using something like the browser's reader
mode.

Pull quotes are not the only issue. The image at the top of this article shows
a [randomly selected
article](http://nautil.us/issue/38/noise/this-is-your-brain-on-silence-rp).  It
is interesting and beautiful to look at. It also contains one block linking to a
related article, two decorative illustration, and three pull quotes. All these
elements are interesting. But they are also interrupting the flow of reading.

I think it is best to keep this kind of content outside of your main text. If
you absolutely have to scatter it, you should use the `<aside>` element and
apply clear visual styling.  Still,
[personalization](https://blog.ce9e.org/posts/2017-12-18-personalization/)
will be an issue. A good alternative to pull quotes may be to simply highlight
the section inside the main text.