Accessible 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?

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 (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:

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. 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 will be an issue. A good alternative to pull quotes may be to simply highlight the section inside the main text.