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
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
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.