Some HTML containers have no special meaning, and that is perfectly fine. The generic role describes that kind of container to accessibility systems; it is usually assigned implicitly by the browser.
What this role means
A semantics-free container role exposed by some browsers.
You should not add role="generic" yourself. Choose a regular <div> or <span> for a neutral wrapper, or a meaningful element when the content has a specific job.
Ordinary HTML is enough
<div class="layout-wrapper">
<p>Plain text in a container.</p>
</div>Read the example
The wrapper groups content for layout without claiming it is a button, heading or navigation area. The paragraph inside keeps its own meaning.
Do not explicitly assign role="generic"; plain div and span already serve as neutral wrappers.
When to use it
Use neutral wrappers for layout and CSS hooks. Never use a generic container when the reader needs a real heading, list, navigation or interactive control.
In an accessibility inspector, compare the accessible role and name with the visible content. The important goal is that both keyboard users and screen-reader users can understand the page.
Try it yourself
Put the example on a practice page and inspect it using your browser accessibility panel. If it includes interactive controls, reach them with Tab and check whether they work without a mouse. Explain whether the semantics come from native HTML or an explicit ARIA role.
Common Beginner Mistakes
- Writing
role="generic"manually on a wrapper. - Do not explicitly assign role="generic"; plain div and span already serve as neutral wrappers.
- Confusing the role announced by a screen reader with the behavior that the browser implements.
Key Takeaways
genericis related to a semantics-free container role exposed by some browsers.- Do not explicitly assign role="generic"; plain div and span already serve as neutral wrappers.
- Native HTML is the first choice; ARIA should clarify meaning, not replace working HTML.