WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: quotes and css

for

From: Beattie, Allan
Date: Sep 27, 2017 1:27AM

Hi Sarah

I would always advocate asking yourself what the thing is, rather than what it should look like, and find the markup to suit. That you have it "marked up as a quotation in the code" is the preferable route, in my opinion.

If the quote is inline within a paragraph, the <q> tag is what you want.
https://www.w3schools.com/Tags/tag_q.asp

By default the <q> tag has quotes, and they can be styled using CSS.

However, if it's a pullquote, it sounds like you want it to stand on its own, relative to the surrounding content.

In this case, I would recommend a <blockquote>, optionally wrapped in the HTML5 <aside> tag.
https://www.w3schools.com/TAGS/tag_blockquote.asp
https://www.w3schools.com/TAGS/tag_aside.asp

NVDA + Firefox announces this as "Complimentary landmark, blockquote".

By default a <blockquote> has no quotes, but these can be added and styled using CSS.

I suspect the reason the <q> tag has quotes but <blockquote> doesn't is that <q> is used inline, and therefore needs to be distinguished from the surrounding text as a quote. Conversely, the default styling of a <blockquote> makes it a block element, separate from surrounding content, and slightly indented.

Using the <blockquote> tag additionally provides an opportunity to use the <cite> tag to identify the source of the quote, though I'm aware there's been some debate around when to use it.

The following article on the HTML5 Doctor website by Steve Faulkner is a good primer on quotes and suchlike: http://html5doctor.com/cite-and-blockquote-reloaded/

If the developer's question is more broadly about whether presentational elements should be in markup or CSS, I would almost always say the latter: you'll thank yourself later :)

If you'd like a working example, find one here: https://www.abdn.ac.uk/news/11141/

Good luck :)

Allan

--
Allan A Beattie
Senior Web Developer

IT Services | University of Aberdeen
e: <EMAIL REMOVED> | t: +44 (0)1224 27 4486

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Sarah Ferguson
Sent: Tuesday 26 September 2017 22:31
To: WebAIM Discussion List
Subject: [WebAIM] quotes and css

I posted this already, but didn't get any replies. Just in case it was missed, here is the replay.


I have a question from our developer that I could not answer. Any thoughts?

- Quotes:

We have a large, stylized quotation mark to signal a pull quote on some pages. At the moment we have it marked up as a quotation in the code. Our developer asks, "
would it be equally acceptable to include the curly quote (&#8220;) in the HTML and style that with CSS?"

Thanks,


Sarah
The University of Aberdeen is a charity registered in Scotland, No SC013683.
Tha Oilthigh Obar Dheathain na charthannas clàraichte ann an Alba, Ãir. SC013683.