The <var> Element
As defined in the HTML Living Standard, the <var> element represents a variable. This could be an actual variable in a mathematical expression or programming context, an identifier deemed to be a variable, or a term used as a placeholder in prose.
Mathematical: If n is the number of audit errors, then n + 1 is the next goal.
Programming: Let userPreference be the value of the 'reduced motion' setting.
<p>The value of <var>x</var> must be greater than zero.</p>
View HTML Living Standard: The var element
Usage vs. Code
It is important to distinguish between <var> and <code>:
<code>: Represents an entire fragment of computer code (e.g.,const x = 10;).<var>: Represents a single instance of a variable or placeholder within that code or within a sentence.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
While most screen readers currently render <var> as standard text (or with a slight pause depending on settings), using the semantic tag allows for the relationship between the variable and the prose to be programmatically available. This enables specialized browsers or user stylesheets to highlight variables—a relationship that sighted users perceive via the default italics.
Best Practices
- Italics Reset: Browsers italicize
<var>by default. If your design system uses italics for other purposes (like emphasis), ensure the<var>element is styled distinctly using CSS to avoid visual confusion. - Mathematical Clarity: For complex math,
<var>is a good starting point, but for heavy mathematical documentation, consider using MathML or accessible LaTeX-based rendering tools. - Prose Placeholders: You can use
<var>as a placeholder in a template. For example: "To start, type:git clone <var>repository-url</var>".
A11y Tip: Logical Identification
If the specific identity of the variable is critical for a task (like entering a command), do not rely on italics alone. Sighted users may miss the slight tilt, and non-sighted users may not hear the difference. Supplement the instruction with clear text: "Replace the placeholder <var>id</var> with your actual user number."