Adrian tests how blockquotes, marked up in a variety of ways, are announced in different screen readers.
He concludes that his personal choice is as follows:
<main>
<!-- other content -->
<blockquote>
<p>A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.</p>
<footer>— <cite>Douglas Adams, <a href="https://en.wikipedia.org/wiki/Mostly_Harmless">Mostly Harmless</a></cite></footer>
</blockquote>
<!-- other content -->
</main>
He avoids the cite
attribute completely because it creates noise in JAWS, and recommends against using figure
with figcaption
because it results in unnecessarily verbose and duplicate announcements.
In his chosen approach the footer
is used mainly as a sensible styling hook, since in the context of a main
(as opposed to as a direct child of body
) it is not regarded a landmark and is strictly presentational. The cite
element has semantic intent – it’s the element for marking up the title of a cited creative work – even if those semantics are not always exposed to users.
So there’s an action for my team at work, because our blockquote component currently uses figure
and figcaption
. Perhaps at the time of build we took advice from one of the MDN or W3C pages which Adrian has now shown weren’t ideal.