Free scan

Fix "ARIA role missing its required children" in HTML

Why it's a problem

Some roles are containers that only make sense with their children: a tablist holds tabs, a listbox holds options, a menu holds menuitems. Without them, the screen reader announces an empty container or gives neither the number of items nor the position of each.

How to fix it — HTML

Give the direct children the role the container expects, or remove the container's role if it does not match the real widget. Watch for wrapper <div>s a framework inserts between parent and children: mark them role="none".

Avoid
<div role="tablist">
  <button>Mensuel</button>
  <button>Annuel</button>
</div>
Correct
<div role="tablist" aria-label="Période de facturation">
  <button role="tab" aria-selected="true" aria-controls="p-mois" id="t-mois">Mensuel</button>
  <button role="tab" aria-selected="false" aria-controls="p-an" id="t-an" tabindex="-1">Annuel</button>
</div>

Check your site in 30 seconds

Conformly detects this kind of issue across all your pages, continuously, and alerts you on every regression.

Free scan

Other fixes