Rols ARIA amb fills obligatoris

Què són els fills obligatoris d’un rol ARIA?

Quan afegeixes un rol ARIA a un element, l’especificació WAI-ARIA defineix quins rols han de tenir els seus fills directes. Si no els tens, el lector de pantalla no pot transmetre correctament el context a l’usuari.

El criteri WCAG 1.3.1 exigeix que la informació, l’estructura i les relacions transmeses visualment també estiguin disponibles per a la tecnologia d’assistència. Un rol ARIA sense els fills esperats trenca aquesta relació.

Per què és important?

Imagina’t que el lector de pantalla anuncia «llista» però després no pot identificar cap element de la llista. L’usuari sap que hi ha una llista però no quants elements té ni on es troba dins d’ella.

Els rols ARIA estableixen una jerarquia semàntica. Un element amb role="list" necessita fills amb role="listitem". Un role="tablist" necessita fills amb role="tab". Sense aquests fills esperats, la relació semàntica queda trencada i la tecnologia d’assistència no pot fer la seva feina.

Com corregir-ho

La solució més senzilla és usar HTML semàntic natiu sempre que sigui possible. Els elements HTML natius ja incorporen els rols implícits correctes sense cap atribut ARIA addicional:

<!-- ✅ HTML semàntic natiu — no cal cap rol ARIA -->
<ul>
  <li>Primer element</li>
  <li>Segon element</li>
</ul>

Si has d’usar ARIA personalitzat, assegura’t que tots els fills directes tinguin el rol obligatori corresponent:

<!-- ✅ Fills amb el rol requerit -->
<div role="list">
  <div role="listitem">Primer element</div>
  <div role="listitem">Segon element</div>
</div>

Els rols pare i els seus fills obligatoris més habituals:

Errors habituals

L’error més freqüent en webs WordPress amb Elementor: el Loop Container afegeix automàticament role="list" al contenidor, però els elements fills generats no tenen role="listitem":

<!-- ❌ Generat per Elementor Loop Container -->
<div class="elementor-loop-container elementor-grid" role="list">
  <div class="elementor-post">...</div>
</div>

Per corregir-ho, afegeix role="listitem" als elements fills via JavaScript o, si el constructor ho permet, des de la configuració de l’element. Si el role="list" no aporta valor semàntic real, pots eliminar-lo completament.

Un altre error habitual: eliminar el rol pare sense revisar si és necessari per a l’accessibilitat. Si tens un component de pestanyes (role="tablist"), no pots simplement treure el rol: has d’assegurar-te que els fills també estan correctament etiquetats.