Avoid using both caption and summary with duplicate text
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Use `<caption>` for table naming — do not duplicate it in `summary`.
Why this matters and how to fix it
Why this matters
Screen readers announce the table caption and may also announce the summary. If both contain the same text, the user hears the same information twice. This increases cognitive load and makes the table harder to understand. Modern HTML no longer requires the summary attribute — descriptive captions are preferred.
How to fix this issue
Use a single clear and concise `<caption>` to describe the table's purpose. Remove the `summary` attribute entirely. If additional context is needed, place it before the table in a paragraph or use `aria-describedby`.
Developer guidance
Do not rely on `summary` for screen reader-only text. Use `<caption>` for naming the table and ensure that complex tables have header associations using `scope` or `headers`/`id` attributes.
Code examples
Incorrect Implementation
<table summary="Quarterly earnings table"><caption>Quarterly earnings table</caption><tr><th scope="col">Q1</th><td>$10k</td></tr></table>Correct Implementation
<table><caption>Quarterly earnings</caption><tr><th scope="col">Q1</th><td>$10k</td></tr></table>Real-World Examples
Before
<table summary="User list"><caption>User list</caption>…</table>After
<p>This table lists system users and their roles.</p>
<table aria-describedby="userTableDesc">
<caption>Users</caption>
<p id="userTableDesc">Includes only active accounts.</p>
</table>CSS Example (Guidance)
/* Optional styling for table captions */
table caption {
caption-side: top;
font-weight: bold;
text-align: left;
margin-bottom: 0.5rem;
color: #111;
font-size: 0.95rem;
}Manual testing
- 1. Inspect the table for a `<caption>` element and any `summary` attribute.
- 2. If both exist, verify they do not contain identical or near-identical text.
- 3. Remove the `summary` attribute unless supporting a legacy assistive technology requirement.
- 4. Confirm that the `<caption>` accurately describes the table’s purpose.
- 5. Test with a screen reader (NVDA/VoiceOver) to ensure announcements are concise and not duplicated.
Trusted by organizations across Europe working toward WCAG and EAA conformance