Skip to content

Accessibility: the <figure> element, and <table> vs. <dl>

  • The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.

    "Self-contained" in this context does not necessarily mean independent. For example, each sentence in a paragraph is self-contained; an image that is part of a sentence would be inappropriate for figure, but an entire sentence made of images would be fitting.

    The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc.

    [...] The first figcaption element child of the element, if any, represents the caption of the figure element's contents. If there is no child figcaption element, then there is no caption.

    A figure element's contents are part of the surrounding flow. If the purpose of the page is to display the figure, for example a photograph on an image sharing site, the figure and figcaption elements can be used to explicitly provide a caption for that figure. For content that is only tangentially related, or that serves a separate purpose than the surrounding flow, the aside element should be used (and can itself wrap a figure). For example, a pull quote that repeats content from an article would be more appropriate in an aside than in a figure, because it isn't part of the content, it's a repetition of the content for the purposes of enticing readers or highlighting key topics.

  • We can use <figure> with <figcaption> to caption non-image elements, such as description lists (<dl>).
  • [...] when presenting a set of related key-value attributes, what would be more appropriate from a semantic point of view: a table, a definition list or something else?

  • [...] So from a semantic (and quite strict) point of view, definition lists should be used for data that have a key-value relationship, while the tables would be more suitable for data in which the keys and values also have meaning as a list.