WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: quotes and the <blockquote> element

for

Number of posts in this thread: 10 (In chronological order)

From: Keith Parks
Date: Wed, Apr 29 2009 10:25AM
Subject: quotes and the <blockquote> element
No previous message | Next message →

Hi folks.

I was on the verge of chiding a colleague over using a complex
combination of html and css to create fancy quotes as background
images behind a short (maybe 2 sentence), stand-alone quote (as
opposed to an inline quote). My complaint being that there would
therefore be no quote marks in the text flow. But I thought I ought to
read up on it first, and I see that I may be off base in my thinking.
(I also discovered the <q> element.)

So, would the Best Practice for stand-alone quotes be to mark it up as
a <blockquote> and then use css to render the onscreen quote marks?

I assume this would be fine for a screen reader, but it seems
problematic for someone visiting the site with css OFF, or someone
using their own css. (Because here in the Calif. university system,
one of the items on our accessibility checklist is to make sure the
page content makes sense with css off.)

What to do?

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications

http://kparks.deviantart.com/gallery
----------------------------------------------------------

(Objects on your screen may be closer than they appear)

From: Dean Hamack
Date: Wed, Apr 29 2009 12:00PM
Subject: Re: quotes and the <blockquote> element
← Previous message | Next message →

Here's a good article about use of the q tag:

http://www.alistapart.com/articles/qtag

Using blockquotes with background images is very common, and I see no
problem with doing it. The amount of people browsing with css off is
even lower than the amount of people browsing with js off. And even If
someone does have css off, they will still see an indented block level
item, and it's meaning should be pretty clear.

> -------- Original Message --------
> Subject: [WebAIM] quotes and the <blockquote> element
> From: Keith Parks < = EMAIL ADDRESS REMOVED = >
> Date: Wed, April 29, 2009 9:20 am
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>
>
> Hi folks.
>
> I was on the verge of chiding a colleague over using a complex
> combination of html and css to create fancy quotes as background
> images behind a short (maybe 2 sentence), stand-alone quote (as
> opposed to an inline quote). My complaint being that there would
> therefore be no quote marks in the text flow. But I thought I ought to
> read up on it first, and I see that I may be off base in my thinking.
> (I also discovered the <q> element.)
>
> So, would the Best Practice for stand-alone quotes be to mark it up as
> a <blockquote> and then use css to render the onscreen quote marks?
>
> I assume this would be fine for a screen reader, but it seems
> problematic for someone visiting the site with css OFF, or someone
> using their own css. (Because here in the Calif. university system,
> one of the items on our accessibility checklist is to make sure the
> page content makes sense with css off.)
>
> What to do?
>
> ******************************
> Keith Parks
> Graphic Designer/Web Designer
> Student Affairs Communications Services
> San Diego State University
> San Diego, CA 92182-7444
> (619) 594-1046
> mailto: = EMAIL ADDRESS REMOVED =
> http://www.sa.sdsu.edu/communications
>
> http://kparks.deviantart.com/gallery
> ----------------------------------------------------------
>
> (Objects on your screen may be closer than they appear)
>
>
>

From: Keith Parks
Date: Thu, Apr 30 2009 9:05AM
Subject: Re: quotes and the <blockquote> element
← Previous message | Next message →

On Apr 29, 2009, at 10:58 AM, = EMAIL ADDRESS REMOVED = wrote:

> Here's a good article about use of the q tag:
>
> http://www.alistapart.com/articles/qtag

Thanks.

> Using blockquotes with background images is very common, and I see no
> problem with doing it. The amount of people browsing with css off is
> even lower than the amount of people browsing with js off. And even If
> someone does have css off, they will still see an indented block level
> item, and it's meaning should be pretty clear.

I guess for me the fact that something is indented isn't a clear
indication that it is a quote.

Also, thinking about the concept of separating content from
presentation, aren't the quote marks part of the content (they are
after all characters in the text), not part of the presentation? And
thus shouldn't be part of the CSS.

And on the practical side, I also know how often people copy text of
all sorts from Web pages, where some of the formatting comes through
and other formatting is lost. So it just seems really strange to strip
out quote marks and substitute *hidden* formatting.

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications

http://kparks.deviantart.com/gallery
----------------------------------------------------------

(Objects on your screen may be closer than they appear)

From: Cliff Tyllick
Date: Thu, Apr 30 2009 9:45AM
Subject: Re: quotes and the <blockquote> element
← Previous message | Next message →

Keith, you bring up good points. I am still mulling where I stand on this.

It seems to me that it's one of many aspects of conventional design that we're going to have to rethink for new technologies and their adaptation.

Here's another one that is almost silly: It's accepted to show the titles of periodicals and books in italics. But if we follow that, should <em></em> be used to create those italics online? And should "Emphasis" be used as the style in Word? Or should we develop a different tag and style that gives the same appearance but says "This is the title of a reference work"? (Perhaps "we" have and I missed it.)

And, in at least some areas, it's accepted to italicize (or bold) a comma or period following an italicized (or bolded) word. It's no big deal either way if the correct style is "Emphasis" or "Strong." But if we come up with a style called "Reference" or "Cited Title," then it might be important to apply that style to only the title itself and not to any trailing punctuation.

As for block quotes, in the past it has been conventional not to put quotation marks before and after them. The indentation and, usually, a reduction in the font size, is supposedly understood to indicate that this passage is a quotation.

Perhaps, for the reasons you mention, we should rethink that convention.

Cliff Tyllick
Web development coordinator
Agency Communications Division
Texas Commission on Environmental Quality
512-239-4516
= EMAIL ADDRESS REMOVED =

>>> Keith Parks < = EMAIL ADDRESS REMOVED = > 4/30/2009 10:04 AM >>>

On Apr 29, 2009, at 10:58 AM, = EMAIL ADDRESS REMOVED = wrote:

> Here's a good article about use of the q tag:
>
> http://www.alistapart.com/articles/qtag

Thanks.

> Using blockquotes with background images is very common, and I see no
> problem with doing it. The amount of people browsing with css off is
> even lower than the amount of people browsing with js off. And even If
> someone does have css off, they will still see an indented block level
> item, and it's meaning should be pretty clear.

I guess for me the fact that something is indented isn't a clear
indication that it is a quote.

Also, thinking about the concept of separating content from
presentation, aren't the quote marks part of the content (they are
after all characters in the text), not part of the presentation? And
thus shouldn't be part of the CSS.

And on the practical side, I also know how often people copy text of
all sorts from Web pages, where some of the formatting comes through
and other formatting is lost. So it just seems really strange to strip
out quote marks and substitute *hidden* formatting.

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications

http://kparks.deviantart.com/gallery
----------------------------------------------------------

(Objects on your screen may be closer than they appear)

From: Jan Heck
Date: Thu, Apr 30 2009 11:25AM
Subject: Re: quotes and the <blockquote> element
← Previous message | Next message →

I usually use the <cite> element for book and periodical titles. At least, I
think that's what it's for...


From: John E. Brandt
Date: Thu, Apr 30 2009 11:55AM
Subject: Re: quotes and the <blockquote> element
← Previous message | Next message →

I did a quick search to refresh my memory on "rarely used HTML tags" and
found these in addition to <cite>:

<dfn>Definition term</dfn>
<code>Computer code text</code>
<samp>Sample computer code text</samp>
<kbd>Keyboard text</kbd>
<var>Variable</var>
<cite>Citation</cite>

Also note that in the reference
http://www.w3schools.com/tags/tag_phrase_elements.asp these are referred to
as "phrase tag" elements, and when <cite> is used, the default browser CSS
renders the content in italics. They also state "None of the major browsers
display the cite attribute correctly" and that the <q> element should be
used in short quotes and <blockquote> should be used in long quotations.

~j

John E. Brandt
Web Design, Development, Consultation
Augusta, Maine USA
www.jebswebs.com
= EMAIL ADDRESS REMOVED =
207-622-7937 

From: Dean Hamack
Date: Thu, Apr 30 2009 12:10PM
Subject: Re: quotes and the <blockquote> element
← Previous message | Next message →

Technically, it's not correct to use cite for titles. The intention is
to show who said something, wrote something, etc. So a more proper use
would be:

<blockquote>I really like this list!</blockquote>
<cite>Dean H.</cite>

Google also uses them for the url of websites in the search results to
show you where the result came from.


> -------- Original Message --------
> Subject: Re: [WebAIM] quotes and the <blockquote> element
> From: "Jan Heck" < = EMAIL ADDRESS REMOVED = >
> Date: Thu, April 30, 2009 10:15 am
> To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
>
>
> I usually use the <cite> element for book and periodical titles. At least, I
> think that's what it's for...
>
>
>

From: Keith Parks
Date: Thu, Apr 30 2009 12:40PM
Subject: Re: quotes and the <blockquote> element
← Previous message | Next message →

On Apr 30, 2009, at 10:54 AM, John E. Brandt wrote:

> [snip...] that the <q> element should be
> used in short quotes and <blockquote> should be used in long
> quotations.
>

It's not really a matter of short versus long, is it, but more of a
question of inline versus stand-alone?

On Apr 30, 2009, at 11:08 AM, = EMAIL ADDRESS REMOVED = wrote:

> <blockquote>I really like this list!</blockquote>
> <cite>Dean H.</cite>

So Dean's example, though short, would be correct?

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications

http://kparks.deviantart.com/gallery
----------------------------------------------------------

Proud member of D/d.U.T.R.T.W.O.C.H.S.
(Designers/developers United To Rid The Web Of "Click Here" Syndrome)

From: Karl Groves
Date: Thu, Apr 30 2009 1:05PM
Subject: Re: quotes and the <blockquote> element
← Previous message | Next message →

> On Apr 30, 2009, at 10:54 AM, John E. Brandt wrote:
>
> > [snip...] that the <q> element should be
> > used in short quotes and <blockquote> should be used in long
> > quotations.
> >
>
> It's not really a matter of short versus long, is it, but more of a
> question of inline versus stand-alone?
>

Per http://www.w3.org/TR/html401/struct/text.html#edef-BLOCKQUOTE
"These two elements designate quoted text. BLOCKQUOTE is for long quotations
(block-level content) and Q is intended for short quotations (inline
content) that don't require paragraph breaks."

> On Apr 30, 2009, at 11:08 AM, = EMAIL ADDRESS REMOVED = wrote:
>
> > <blockquote>I really like this list!</blockquote>
> > <cite>Dean H.</cite>
>
> So Dean's example, though short, would be correct?
>

Yes.
There's also the 'cite' attribute for Blockquotes which can be used to refer
to a URI for a resource.

Karl

From: Peter Weil
Date: Fri, May 01 2009 7:45AM
Subject: Re: quotes and the <blockquote> element
← Previous message | No next message

On Apr 30, 2009, at 12:15 PM, Jan Heck wrote:

> I usually use the <cite> element for book and periodical titles. At
> least, I
> think that's what it's for...

I do this as well. I think the HTML 4.01 spec and examples are broad
(or vague) enough to be interpreted this way:

"CITE:Contains a citation or a reference to other sources."

Examples:
"As <CITE>Harry S. Truman</CITE> said, <Q lang="en-us">The buck stops
here.</Q>"
"More information can be found in <CITE>[ISO-0000]</CITE>."
I'm not sure how useful it really is to use <cite> this way, but I
don't think that there is anything wrong with it. It's certainly
better than using <em>.
I don't know what to do with the Q tag; I've never used it, largely
because IE never supported it (I think IE 8 finally does). I'll
probably stick with using quotation marks in the copy.


--
Peter Weil, Web Developer
University Communications
University of Wisconsin-Madison
Phone: 608-262-6538
Email: = EMAIL ADDRESS REMOVED =