Blockquote example does not need figure/figcaption
aardrian opened this issue · 10 comments
MDN URL
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
What specific section or headline is this issue about?
Try it
What information was incorrect, unhelpful, or incomplete?
The "Try it" section wraps the blockquote text in a figure with a figure caption, but does not explain why the figure is used nor explain the impact on screen reader announcements.
The code:
<figure>
<blockquote cite="https://www.huxley.net/bnw/four.html">
<p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
</blockquote>
<figcaption>—Aldous Huxley, <cite>Brave New World</cite></figcaption>
</figure>
What did you expect to see?
Either:
- no
<figure>element, or - an explanation why it is used in this section but not in the "Examples" section later in the page.
Do you have any supporting links, references, or citations?
Fire up a screen reader and navigate it.
This is the output navigating with the virtual cursor in NVDA/Firefox:
↓
em dash Aldous Huxley, Brave New World, figure, block quote, left quote Words can be like X dash rays, if you use them properly em dash they’ll go through anything. You read and you’re pierced. right quote
↓
out of block quote, caption, em dash Aldous Huxley, Brave New World
The <figure> causes an announcement of the figure, which is fine but adds unnecessary noise. The <figcaption> causes announcement of the text it contains at the start of the content, prior to announcing the presence of the figure or blockquote Then the contents of the <figcaption> are announced again as the user moves the virtual cursor through the DOM.
As a user, it is unclear why I am hearing this information twice (other than the code chosen). As a developer, there is no guidance on what this code will output.
This is the output navigating with the virtual cursor in JAWS/Chrome:
↓
block quote cited from https://www.huxley.net/bnw/four.html
↓
has details, left quote Words can be like X dash rays, if you use them properly em dash they’ll go through anything. You read and you’re pierced. right quote
block quote end
↓
has details, em dash Aldous Huxley, Brave New World
Here, the "has details" announcement is a function of the <figcaption>.
Do you have anything more you want to share?
I cannot edit this example in GitHub because it comes in from an embed with no immediately apparent documentation on where to find it:
{{EmbedInteractiveExample("pages/tabbed/blockquote.html","tabbed-standard")}}
MDN metadata
Page report details
- Folder:
en-us/web/html/element/blockquote - MDN URL: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
- GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/html/element/blockquote/index.md
- Last commit: mdn/content@e04d8d2
- Document last modified: 2023-06-13T08:10:47.000Z
Ah, so I can edit https://github.com/mdn/interactive-examples/blob/main/live-examples/html-examples/text-content/blockquote.html.
I'll just go do that.
It looks like this is your first issue. Welcome! 👋 One of the project maintainers will be with you as soon as possible. We appreciate your patience. To safeguard the health of the project, please take a moment to read our code of conduct.
Another example of wrapping a blockquote in a figure element exists at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure#quotations.
Should this be removed?
That one is in content (repo) directly, and apparently it is there from the start (migration), so hard to find who authored it. But as for OP snippet, maybe we could ask @mikoMK for pointers? Maybe there is some argument that could potentially overweight current NVDA/Firefox flaw (?)
My guess is it might have been taken directly from the HTML specs where this ("fancy") figure > blockquote + figcaption example is currently present as well.
I don't want to complicate it and I agree that MDN should rather promote real-world best practices than ideal but actually flawed techniques, so if original ("fancy") code is flawed in any fairly recent user agent, it is a good thing to correct it ("dumb it down") for sake of broadest support.
But maybe (maybe?) if the original "fancy" structure is otherwise working and widely agreed upon and the problem in question is a problem of concrete product (NVDA/Firefox), it should be mentioned in docs and linked to relevant product bugreports? (Or we should both dumb it down AND mention reasoning why it diverges from the specs / ideal structure?)
Moreover, current docs for [<footer>] tells that semantically it complements sectioning content which is defined as:
(It is basically quoted from the whatwg DOM specs.) There is no <blockquote> listed as the sectioning content, so as I understand it from specs perspective putting <footer> into <blockquote> is somewhat problematic. (Yet, again, real-world, not specs, is what really matters, so take it just as a remark.)
Should this be removed?
IMO no, since that shows assorted ways to use <figcaption> even if meh.
Maybe there is some argument that could potentially overweight current NVDA/Firefox flaw (?)
What NVDA/Firefox flaw?
(It is basically quoted from the whatwg DOM specs.) There is no
<blockquote>listed as the sectioning content, so as I understand it from specs perspective putting<footer>into<blockquote>is somewhat problematic. (Yet, again, real-world, not specs, is what really matters, so take it just as a remark.)
Not problematic. Just not exposed as a landmark.
What NVDA/Firefox flaw?
The "unnecessary noise" produced by reading the figcaption twice, as you described:
↓em dash Aldous Huxley, Brave New World, figure, block quote, left quote Words can be like X dash rays, if you use them properly em dash they’ll go through anything. You read and you’re pierced. right quote
↓out of block quote, caption, em dash Aldous Huxley, Brave New World
What NVDA/Firefox flaw?
The "unnecessary noise" produced by reading the figcaption twice, as you described:
Ah. I don't consider that a bug.
just some historical context: the example in the docs is b/c of the example in whatwg
If it satisfies anyone's curiosity, I wrote about different announcements of 7 patterns across 6 screen readers (so far):
https://adrianroselli.com/2023/07/blockquotes-in-screen-readers.html
It includes the pattern I replaced, which was the most verbose by far across NVDA, JAWS, and macOS VoiceOver. Still not a bug, IMO, just unnecessary code.