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