WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: quotes and css

for

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

From: Sarah Ferguson
Date: Tue, Sep 26 2017 3:30PM
Subject: quotes and css
No previous message | Next message →

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 (“) in the
HTML and style that with CSS?"

Thanks,


Sarah

From: Beattie, Allan
Date: Wed, Sep 27 2017 1:27AM
Subject: Re: quotes and css
← Previous message | Next message →

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 ADDRESS REMOVED = | t: +44 (0)1224 27 4486

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS 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.

From: Detlev (testkreis)
Date: Wed, Sep 27 2017 1:48AM
Subject: Re: quotes and css
← Previous message | Next message →

I think if it is a block quote you should mark it up with blockquote element

Von meinem iPad gesendet

> Am 26.09.2017 um 23:30 schrieb Sarah Ferguson < = EMAIL ADDRESS REMOVED = >:
>
> 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
> > > >

From: Karl Brown
Date: Wed, Sep 27 2017 2:48AM
Subject: Re: quotes and css
← Previous message | Next message →

If you're using semantic mark-up there's no reason the unicode character
couldn't form part of the CSS instead; the meaning is to indicate that it's
a quote, which the semantics should be handling. The quote mark is a
presentational/stylistic choice and shouldn't really form part of the
mark-up, as Allan said.

On Wed, Sep 27, 2017 at 8:48 AM, Detlev (testkreis) <
= EMAIL ADDRESS REMOVED = > wrote:

> I think if it is a block quote you should mark it up with blockquote
> element
>
> Von meinem iPad gesendet
>
> > Am 26.09.2017 um 23:30 schrieb Sarah Ferguson < = EMAIL ADDRESS REMOVED = >:
> >
> > 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
> > > > > > > > > > > > >



--
Karl Brown
Twitter: @kbdevelops
Skype: kbdevelopment

Professional Certificate Web Accessibility Compliance (Distinction),
University of South Australia, 2015

From: Sarah Ferguson
Date: Wed, Sep 27 2017 9:31AM
Subject: Re: quotes and css
← Previous message | No next message

thanks everyone, I will pass this all on to the developer

Sarah Ferguson
Web Accessibility Specialist
Department of Digital Communications
Brandeis University *|* 781.736.4259
www.brandeis.edu/web-accessibility


On Wed, Sep 27, 2017 at 4:48 AM, Karl Brown < = EMAIL ADDRESS REMOVED = > wrote:

> If you're using semantic mark-up there's no reason the unicode character
> couldn't form part of the CSS instead; the meaning is to indicate that it's
> a quote, which the semantics should be handling. The quote mark is a
> presentational/stylistic choice and shouldn't really form part of the
> mark-up, as Allan said.
>
> On Wed, Sep 27, 2017 at 8:48 AM, Detlev (testkreis) <
> = EMAIL ADDRESS REMOVED = > wrote:
>
> > I think if it is a block quote you should mark it up with blockquote
> > element
> >
> > Von meinem iPad gesendet
> >
> > > Am 26.09.2017 um 23:30 schrieb Sarah Ferguson < = EMAIL ADDRESS REMOVED = >:
> > >
> > > 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
> > > > > > > > > > > > > > > > > > > > > >
>
>
>
> --
> Karl Brown
> Twitter: @kbdevelops
> Skype: kbdevelopment
>
> Professional Certificate Web Accessibility Compliance (Distinction),
> University of South Australia, 2015
> > > > >