Making quotes semantic to encourage inclusive design

[kirsty-hames]

Representing quotes with CSS styling alone is not identified by a screen reader. The text will read as any other body text on the page regardless how different the visual styling is.

For inclusive design, quote content should be wrapped in either <blockquote> or <q> tags. https://www.w3.org/TR/WCAG20-TECHS/H49.html

<blockquote> should be used for long quotations which may require paragraph breaks.

<q> should be used for shorter quotation.

Currently we don't have any Adapt styling for <blockquote> or <q> but styles are inherited via the browser.

We have the option to reset/set a base style for these or even use the existing .pull-quote-body class? I'd be keen to get thoughts on this.

I would avoid using .pull-quote-title and .pull-quote-body as suggested in text.less for the reasoning above. Quotes should be limited to body text only and not used in titles.

[guywillis]

Fully agree with your points above, @kirsty-hames

The resources section of your w3 link above links through to a page with a bit more detail on styling requirements of both <blockquote> and <q> tags - https://www.w3.org/TR/html4/struct/text.html#h-9.2.2

To summarise

• <blockquote> is for longer quotes. This tag can contain other html tags like <p>, <h2>, <ul>
• <q> is for shorter, inline, quotes. This tag should not contain other html tags but can contain nested q tags

As you rightly mention, we should move towards applying the correct html tags and away from stylised title / body elements. This leads me onto other quote related tags such as <cite>, <figure>, and <figcaption>.

Confusingly, there are two types of cite - an attribute and a html tag.

The cite attribute can be used by blockquotes and q tags to designate "...a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote." - blockquote / q - the trouble with the cite attribute though, is that it is hidden visually from the user.

The cite tag works in much the same way as the attribute and is used to "...describe a reference to a cited creative work, and must include the title of that work." - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite - Whether the <cite> should be used to attribute authors directly is quite contentious with mdn stating "It's worth noting that the W3C specification says that a reference to a creative work, as included within a element, may include the name of the work's author. However, the WHATWG specification for says the opposite: that a person's name must never be included, under any circumstances."

All this leads me to <figure> and <figcaption>. The figure tag allows us to create self-contained content that can contain an attribution to an author in the form of the figcaption tag and could be the solution to creating semantically correct mark up for quoting - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure#quotations

Example:

<figure>
  <q>I am a quote from a person</q>
  <figcaption>Joe Bloggs</figcaption>
</figure>

[guywillis]

It looks like a pull quote has a 'relatively' straight forward implementation as "...a pullquote is a direct repetition of text in the current document. As a result, authors must ensure that the presentational occurrence is hidden from users of assistive technologies (e.g., using the aria-hidden attribute)." reference

As such, I believe the following example is semantically appropriate for all audiences:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus suscipit ex a placerat.</p>
<aside role="doc-pullquote presentation" aria-hidden="true">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</aside>

"doc-pullquote is typically used on blockquote, aside and div elements when the quote is duplicated in a separate element. The addition of an aria-hidden attribute in these cases prevents the content from being read again to users of assistive technologies.

Note: the ARIA 1.1 specification currently advises adding the backup role of presentation until support for none becomes more prevalent. As doc-pullquote inherits from none, the same advice applies for this role." reference

[guywillis]

Further to the above, the pull quote can have a custom class applied to it so that it will inherit some base Vanilla styling

<aside class='aside-pull-quote' role="doc-pullquote presentation" aria-hidden="true">
  ...
</aside>

The custom class ties into colour variables defined in _colors.less and font variables defined in _font-config.less. The aside-pull-quote styles are defined in global.less. The screen shot below showcases the standard display:

[github-actions]

🎉 This issue has been resolved in version 9.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀