superlist
superlist copied to clipboard
Proposal: Super Lists should support List Titles with <figcaption>
I've been thinking about List Titles
, and how semantically there is no real way currently to add one. You just add a heading or something above the list, but it's not directly connected to the list itself.
While doing research on the topic, I came across this StackOverflow comment that suggests using <figure>
and <figcaption>
for this purpose:
Example from the comment itself:
<figure>
<figcaption>Fruit</figcaption>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
</figure>
The Mozilla Developer Docs reference about <figure>
says the following (emphasis mine):
- Usually a
<figure>
is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow.- Being a sectioning root, the outline of the content of the
<figure>
element is excluded from the main outline of the document.- A caption can be associated with the
<figure>
element by inserting a<figcaption>
inside it (as the first or the last child). The first<figcaption>
element found in the figure is presented as the figure's caption.
And we know from the definition <figcaption>
that it "represents a caption or legend describing the rest of the contents of its parent <figure>
element."
So, this leads me to think that:
- if a list doesn't have a title, then it doesn't necessarily need to be wrapped in
<figure>
- if a list does have a title, it should be wrapped in
<figure>
and include a<figcaption>
so it can be interpreted as a section correctly – this bodes well for accessibility as well as semantic accuracy.
This is a relatively easy refactor to do, but now that the plugin is live, it must be done in such a way as to not break any existing Super Lists in use.