[Accessibility_sig] Pull Quotes

James Craig james at cookiecrook.com
Fri Apr 13 12:50:43 CDT 2007


Burying real content in the stylesheet is unacceptable. I would
disagree with using the content property for this purpose, unless you
pulled the the generated text from the actual markup. For example:

<p>During a press conference, the President said, <q
cite="http://www.slate.com/id/76886/">fool me once, shame on—shame on
you. Fool me—<em class="pullquote" title="you can't get fooled
again.">you can't get fooled again.</em></q></p>

.pullquote:after{
  content:attr(title);
  float:right;
  font-size:2em;
  width:20%;
  margin:1em 0 1em 1em;
}

This example is ignoring the problem that :after pseudo-elements don't
alway render accurately, even on UAs that understand the content
property.

However, I disagree that the duplicate text of a pullquote is a
problem. The magazine editor used that quotation to denote emphasis on
particular bit of text to draw in the eye. In that respect, leaving
out the duplication does not give the same level of importance to the
quoted phrase. Perhaps you could use it as some sort of paragraph
header, leading into the paragraph with the quotation.

<h4 class="pullquote">You can't get fooled again.</h4>
<p>During a press conference, the President said, <q
cite="http://www.slate.com/id/76886/">fool me once, shame on—shame on
you. Fool me—you can't get fooled again.</q></p>

.pullquote{
  float:right;
  font-size:2em;
  width:20%;
  margin:1em 0 1em 1em;
}

That's my two cents,
James



On 4/13/07, Moore, Michael <Michael.Moore at dars.state.tx.us> wrote:
> Friday Brain Teaser:
>
> Some recent discussions about redundant text and what to do about it got
> me thinking of pull quotes.  You know those things that magazine editors
> and marketing folks love to use to highlight a few lines of an article
> and spark your interest.
>
> When I wear my web standards advocate hat the method of marking up these
> elements seems obvious.  Enclose them in a block quote then style them
> nicely to stand out where the paragraph that they have been pulled from
> wraps nicely around them.
>
> However putting my accessibility hat back on, I see some major issues
> with leaving the pull quote within the document flow.
> 1. When the screen reader reads the pull quote it is likely to detract
> from understanding the content. This is true whether the content is read
> immediately prior to, or after the paragraph from which it was pulled.
> 2. When style sheets are turned off the pull quote will be included
> within, or immediately before or after the paragraph causing a similar
> issue.
> 3. Because Aural style sheets are well supported, if at all using
> speak:none or volume:silent does not resolve the issue.
>
> I am considering advocating for the use of the css content property to
> render pull quotes.  On the surface, the advantages to this approach
> are:
> 1. Screen readers ignore the content property.
> 2. If style sheets are disabled the pull quotes are just gone.
>
> This solution is certainly far from ideal, especially considering the
> challenges of cross browser support for the content property.
>
> What do you folks think?  If you like the content property solution how
> would you implement it?
>
> Mike Moore
> Accessibility Specialist
> Department of Assistive and Rehabilitative Services (DARS)
> (512) 424-4159
>
> _______________________________________________
> Accessibility_sig mailing list
> Accessibility_sig at knowbility.org
> http://knowbility.org/mailman/listinfo/accessibility_sig_knowbility.org
>



More information about the Accessibility_sig mailing list