Summary Name
Critical - WCAG Level A
What the issue is:
The accessibility issue arises when <summary> elements in a <details> tag lack discernible text. A <summary> element is meant to provide a summary or title for the content that is revealed when the <details> element is expanded. If the text is not discernible, users relying on assistive technologies, such as screen readers, may not understand the purpose of the expandable content.
Why it matters:
For users with visual impairments who use screen readers, having discernible text in summary elements is crucial. Without it, they may not receive any information about what the expandable content contains, leading to confusion and a poor user experience. Additionally, keyboard users rely on clear labels to navigate through interactive elements effectively.
How to fix it:
Identify
<summary>elements: Locate all<summary>tags within your HTML documents.Ensure discernible text: Make sure each
<summary>element contains clear and descriptive text that conveys the purpose of the expandable content. Avoid using vague terms like "click here" or "details".Test with assistive technologies: Use screen readers to verify that the text is announced correctly and provides context to users.
Best practices:
Use concise yet descriptive text in the
<summary>element. For example, instead of "More info", use "More information about our services".Consider the context of the content that will be revealed and ensure the summary accurately reflects that.
Maintain consistency in naming conventions across similar summary elements to enhance predictability for users.
Common mistakes:
Using empty
<summary>elements or<summary>elements with only icons or images without accompanying text.Including overly generic labels that do not provide sufficient context for the content that follows.
Forgetting to check the accessibility of the expanded content itself, as it should also be accessible and well-structured.