Legend

In web accessibility, a legend is visible text that identifies grouped content. HTML offers three tags depending on context: <caption> for tables, <figcaption> for figures, and <legend> for field groups in a form.

A screen reader arrives at a table with 47 rows. Without a title, the user doesn't know if it contains train schedules, financial results, or a shopping list. A legend solves this problem in one line.

A legend is visible text that names a block of grouped content. It serves the same role as a chapter title in a book: to orient the reader before they decide whether to read further.

#Three tags, one role

HTML offers three elements for this concept, each suited to a specific context.

<caption> identifies a data table. Placed as the first child of <table>, it is announced by screen readers before navigating cells. It is the only reliable way to give a table a programmatic name.

<figcaption> accompanies a <figure> (image, chart, code excerpt). It provides the accessible name of the figure and can contain rich text, links, or references.

<legend> describes a group of fields in a form. As the first child of <fieldset>, it is read before each control in the group by assistive technologies. When a user reaches a radio button, they hear the legend first, then the button's label.

<table>
  <caption>Monday class schedule</caption>
  <!-- rows and cells -->
</table>
 
<figure>
  <img src="schema.png" alt="System architecture">
  <figcaption>Figure 1: overview of components</figcaption>
</figure>
 
<fieldset>
  <legend>Delivery address</legend>
  <!-- form fields -->
</fieldset>

#The pitfalls everyone makes

Confusing alt and <figcaption>. alt replaces the image for assistive technologies. <figcaption> is visible to everyone and provides editorial context. The two serve distinct roles: an image in a <figure> needs both.

Table in a <figure>: only one title. When a <table> is nested in a <figure>, use <figcaption> and not <caption>. The two coexist poorly: some screen readers announce the title twice.

<fieldset> without <legend>. A group of radio buttons without a legend loses all its context. The user hears "Yes" or "No" without knowing what question they're answering.

#In summary

Table: <caption>. Figure: <figcaption>. Form: <legend>. Three tags, one function. If your content is grouped, it deserves a legend.