Missing ARIA parent role
Silktide checks elements whose ARIA role only makes sense inside a specific kind of container, such as a tab that must sit inside a tab strip, and verifies that the required container is present.
<!-- Problem: a tab with no tablist around it -->
<button role="tab">Overview</button>
<!-- Fix: wrap the tabs in their required container -->
<div role="tablist">
<button role="tab">Overview</button>
</div>
Why this matters
Item roles in are defined by their context:
a tab is the third of five tabs, an option is one choice in a list, a
row is part of a table.
derive position, count, and navigation behaviour from the parent widget.
Without it, the item may be misidentified, announced without any context,
or skipped entirely - the author added half of a widget, and users get
neither half reliably.
How to fix it
- Wrap the element in a container with the required role - for example,
put
role="tab"elements inside arole="tablist". - If the parent cannot physically wrap the children in the code, add
aria-ownson the logical parent to adopt them. - If the element is not really that kind of item, remove or correct its role.
Common pairings: tab needs tablist; option needs listbox;
menuitem needs menu or menubar; radio in an ARIA group needs
radiogroup; treeitem needs tree; row needs grid, table,
treegrid, or rowgroup; cells and headers need row.
How Silktide tests this
- Find every element whose ARIA role requires a specific parent role.
- Walk up its ancestors, also following any
aria-ownsadoption, looking for an element with a required parent role. - Report elements where no such ancestor is found.
Troubleshooting
The parent role is on an element with an implicit role
Native elements count: an <option> inside a <select> needs no explicit
roles, because both carry the right roles implicitly. Findings appear when
an explicit item role is used without any qualifying parent, explicit or
implicit.
This check reports nothing even though I expect findings
ARIA testing can be turned off per website. Check the advanced settings for the website.