The Goal

Add visual emphasis using a pull quote while avoiding duplicate content for search engines and screen readers.

Author
Name:
Profession: Designer/Developer/Artist
Specialties: Front-end dev.; hand-drawing
Years’ Experience: 15
Employer: Self-employed
Tutorial Details
Experience Level: Noob
Noob: No technical skills required.
Beginner: Basic technical skills and knowledge.
Intermediate: Code literate. Strong technical skills.
Advanced: Code “fluent”. Extensive technical skills.
Über Geek: Need I say more?
Tools: Editor
Completion Time: Less than 15 minutes
Tags: pull quote, data-attribute, accessibility

This is a member-contributed tutorial. If possible, contact the author with questions or comments.

An Accessible Pull Quote

The pull quote is a visual enhancement technique carried over from the print industry where text is “pulled” out of the main flow of the article (i.e., the presented text) and displayed elsewhere on the page. It’s used to add emphasis to an article and is useful for quickly drawing the reader’s attention to noteworthy passages.

It’s typically placed to the right of the content. Why the right side? Many consider it less visually jarring to the reader with regard to content flow. In other words, a better user-experience (UX). While that argument may have merit I think its importance is overstated and I see no reason to follow that convention exclusively.

There are no absolute rules regarding pull quote positioning. The space-time continuum won’t unravel if you place a “pull” on the left or within the main flow. It could even be placed elsewhere on the page, away from the main content. Be creative. The point is, regardless of placement a pull quote is a visual enhancement therefore its main purpose is to stand out.

Aside from placement there are a couple technical points to be aware of when implementing a pull quote on the Web.

What It’s Not

A pull quote is not the same as a quote or blockquote which are used for external references, i.e., for content not already presented. They also have specific HTML tags, q and blockquote, that provide semantic and structural meaning for search engines and screen readers. There is no tag specifically for pull quote (yet). As a purely visual enhancement it has no inherent or implied semantic value which is important to understand.

Accessibility: Don’t Repeat Yourself

Since a pull quote is an excerpt of presented text — meaning it [the text] already exists within the article — that makes it duplicate content which is noteworthy. Take for example screen readers and search engines.

If the pull quote were wrapped in its own p or div the content would be seen twice by a machine, once in the “pull” and again in the main article. There’s no way to indicate to a machine that a particular p or div represents a visual enhancement and is separate from the semantic content surrounding it.

Why is that important?

Even if a sighted person has no idea what a “pull quote” is by definition they can still infer its general purpose on a visual level. But for someone who is visually impaired and uses a screen reader the machine simply sees more text to be “read”. It can’t visually infer meaning, context, or purpose the way a person can, it must be explicitly told what something is with code. For the moment there are no mechanisms to define a pull quote to a machine that I’m aware of.

Some may argue that a few lines of duplicate content, while not ideal, is benign, more annoying than confusing to the reader. I disagree, it’s lazy and it undermines the overall user-experience for the visually impaired. Plus, to a lesser extent it could be argued that search engines don’t like duplicate content, though personally I would be more concerned with the accessibility aspect.

What About ‘aside’?

Some techniques recommend using the HTML 5 aside element which on the surface seems like a reasonable solution. While aside carries considerable semantic meaning — more so than p or div — its intended use doesn’t apply to a pull quote, nor does it solve the duplicate content issue. My guess is that it only seems reasonable because a pull quote is often positioned to the “side” of the main content so therefore it must qualify as an aside element. Right?

Uh, no. Not so much.

So the question remains: How do you create a purely visual enhancement using uh... duplicate content, that doesn’t look like duplicate content to screen readers and search engines or meddle with the structure?

Answer: The data-* attribute.

An Easy Solution

  1. Simply add data-pullquote="" to an opening p tag then place the excerpt text between the dumb "" quotes. That’s it. The remaining paragraph can be created as normal.

  2. The only customization I added is class="pullLeft" which contains the styling and positioning. The whole thing looks like this:

CSS Quick-start

Pull quotes present an opportunity to get creative with styling. Again, there are no “rules” but typically they have larger text, and often a different font compared to the body. You can use background-images, borders, colors... anything, really.

Here’s the CSS I use to position the “pull” right or left as needed along with some basic styling:

.pullRight:before,
.pullLeft:before {
	/*  !Reset metrics.  */
	padding: .6em .4em;
	border: none;

	/*  !Content  */
	content: attr(data-pullquote);

	/*  !Pull out to the right, modular scale based margins.  */
	float: right;
	width: 40%;
	margin: 1.6em 1.4em;

	/*  !Baseline correction  */
	position: relative;
	top: 5px;

	/*  !Typography (30px line-height equals 25% incremental leading)  */
	font-size: 22px;
    color: #000;
    text-shadow: none;
    font-style: italic;
    font-weight: 400;
    line-height: 1.7;
    border-top: 1px solid #79df47;
    border-bottom: 1px solid #79df47;
}
.pullLeft:before {
    float: left;
    margin-left: -4.6em;
}
.pullRight:before {
    margin-right: -4.6em;//  margin-left: 1.4em;
}
/*  !Content  */
    content: attr(data-pullquote);

/*  !Pull out to the right, modular scale based margins.  */
    float: right; width: 40%; margin: 1.6em 1.4em;

/*  !Baseline correction  */
    position: relative; top: 5px;

/*  !Typography (30px line-height equals 25% incremental leading)  */
    font-size: 22px;
    color: #000;
    text-shadow: none;
    font-style: italic;
    font-weight: 400;
    line-height: 1.7;
    border-top: 1px solid #79df4;
    border-bottom: 1px solid #79df4;
}
.pullLeft:before {
    float: left;
    margin-left: -4.6em;
}
.pullRight:before {
    margin-right: -4.6em;
}

That’s it. Until the HTML spec includes a semantic method for identifying the pull quote the data-* attribute will get the job done with minimal hassle.