Ontbrekende ARIA-ouderrol

Silktide voert controles uit op elementen waarvan de ARIA-rol alleen zinvol is binnen een specifiek soort container, zoals een tabblad dat zich binnen een tabbladbalk moet bevinden, en controleert of de vereiste container aanwezig is.

<!-- Probleem: een tabblad zonder tabbladlijst eromheen -->
<button role="tab">Overzicht</button>

<!-- Oplossing: plaats de tabbladen in hun vereiste container -->
<div role="tablist">
  <button role="tab">Overzicht</button>
</div>

Waarom dit belangrijk is

Itemrollen in worden bepaald door hun context: een tab is het derde van vijf tabbladen, een option is één keuze in een lijst en een row maakt deel uit van een tabel. leiden positie, aantal en navigatiegedrag af van de bovenliggende widget. Zonder die context kan het item verkeerd worden geïdentificeerd, zonder enige context worden aangekondigd of helemaal worden overgeslagen: de auteur heeft maar de helft van een widget toegevoegd en gebruikers krijgen geen van beide helften betrouwbaar aangeboden.

Hoe je dit oplost

Plaats het element in een container met de vereiste rol, bijvoorbeeld door elementen met role="tab" binnen een role="tablist" te plaatsen.
Als de ouder de kinderen in de code niet fysiek kan bevatten, voeg dan aria-owns toe aan de logische ouder om ze over te nemen.
Als het element eigenlijk niet zo'n type item is, verwijder of corrigeer dan de rol.

Veelvoorkomende combinaties: tab heeft tablist nodig; option heeft listbox nodig; menuitem heeft menu of menubar nodig; radio in een ARIA-groep heeft radiogroup nodig; treeitem heeft tree nodig; row heeft grid, table, treegrid of rowgroup nodig; cellen en kopteksten hebben row nodig.

Hoe Silktide dit controleert

Zoek elk element waarvan de ARIA-rol een specifieke ouderrol vereist.
Loop de voorouders ervan langs en volg ook eventuele overname via aria-owns, op zoek naar een element met een vereiste ouderrol.
Rapporteer elementen waarvoor geen dergelijke voorouder wordt gevonden.

Problemen oplossen

De ouderrol staat op een element met een impliciete rol

Native elementen tellen mee: een <option> binnen een <select> heeft geen expliciete rollen nodig, omdat beide impliciet de juiste rollen hebben. Bevindingen verschijnen wanneer een expliciete itemrol wordt gebruikt zonder een kwalificerende ouder, expliciet of impliciet.

Deze controle rapporteert niets, hoewel ik bevindingen verwacht

ARIA-tests kunnen per website worden uitgeschakeld. Controleer de geavanceerde instellingen voor de website.