The <template> Element
As defined in the HTML Living Standard, the <template> element holds HTML content that is not rendered when the page loads, but can be instantiated later via JavaScript.
<template id="row-template">
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</template>Templates are highly efficient for creating repetitive UI elements without cluttering the initial DOM.
View HTML Living Standard: The template elementAccessibility Impact: The "Invisible" Content
Because content inside a <template> is not part of the document until it is cloned, it is completely invisible to screen readers and search engines.
WCAG Requirement: Predictable Navigation
Success Criterion 3.2.3 (Level AA): Consistent Navigation.
When you use a template to inject new content into the page, you must ensure that the new content follows the same structural and navigational patterns as the rest of the site. If a template injects a new form or a set of controls, you must manage the focus so the user knows where the new content has appeared.
Understand SC 3.2.3: Consistent NavigationBest Practices for Accessible Templates
- Focus Management: After cloning a template and appending it to the DOM, move the focus to the first interactive element in the new content.
- ARIA Live Regions: If a template is used to add a notification or a status update, append the cloned content to an
region. - Semantic Integrity: Ensure the content inside the template is fully semantic. A template of a table row must still use
<tr>and<td>to maintain the table's accessibility tree.
A11y Tip: Template vs. Hidden
Unlike display: none;, which hides an element but keeps it in the DOM, the <template> tag is truly inert. This is better for performance and ensures that screen readers don't accidentally find "hidden" content that isn't yet ready for interaction.