You may see composite while reading an accessibility specification. It is an abstract ARIA role: a category used to organize the role system, not a label that should be added to your website.
What this role means
An abstract family of widgets containing navigable children.
Abstract roles explain relationships between real roles. A browser cannot turn role="composite" into a useful accessible control, so the specification tells authors not to use it directly.
Use a real HTML element instead
<fieldset>
<legend>Pick a level</legend>
<label><input type="radio" name="level" value="easy"> Easy</label>
</fieldset>Read the example
The snippet deliberately shows an actual HTML element or more specific widget, not the abstract role. That is the important lesson: choose markup that has a real purpose and behavior.
Never assign role="composite"; choose an actual interactive pattern such as radiogroup.
When to use it
When you find composite in a role hierarchy, ask which concrete role describes your interface. For example, an ordinary action is normally a <button>, and a page navigation area is a <nav>.
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
- Copying
role="composite"from a specification into a production webpage. - Never assign role="composite"; choose an actual interactive pattern such as radiogroup.
- Confusing the role announced by a screen reader with the behavior that the browser implements.
Key Takeaways
compositeis related to an abstract family of widgets containing navigable children.- Never assign role="composite"; choose an actual interactive pattern such as radiogroup.
- Native HTML is the first choice; ARIA should clarify meaning, not replace working HTML.