Standarder · ARIA

Roll Sammansatt widget

tablist

Markerar en behållare som flikremsans list i ett flikgränssnitt. Innehåller role="tab"-barn. Flikar och tabpaneler är ett ARIA-exklusivt mönster — det finns inget inbyggt HTML-fliklist-element.

När ska du använda det

Runt raden (eller kolumnen) av role="tab"-element i ett flikgränssnitt. Tablistan MÅSTE ha ett tillgängligt namn via aria-label eller aria-labelledby — utan det kan en skärmläsaranvändare som hör “tab list” inte avgöra vilken fliklist på sidan det gäller.

Vertikala flikremsaner kräver aria-orientation="vertical". Standardvärdet är horisontellt, så utelämna attributet för horisontella flikar.

Om dina “flikar” i verkligheten navigerar till andra URL:er, använd <nav> med <a>-länkar i stället — mönstret med URL-ändring vid klick passar inte tablist-semantiken.

Tangentbords- och fokuskontrakt

Enligt APG:s flikmönster:

  • Tab flyttar fokus in i fliklistan och till den valda fliken; ytterligare ett Tab-tryck flyttar UT (vanligtvis in i den aktiva tabpanelen).
  • Vänster-/höger­pilar flyttar fokus mellan flikar (upp/ned för vertikala tablistor). Omslagning är valfri men konventionell.
  • Home / End hoppar till den första / sista fliken.
  • Aktivering: i automatiskt läge flyttar piltangenterna fokus OCH väljer. I manuellt läge (rekommenderas när aktivering är kostsam) väljer Space eller Enter den fokuserade fliken.

Tablistan hanterar inte fokus själv — fokus hamnar på fliken, inte på tablistbehållaren.

Vanliga fel

  • Tablist utan tillgängligt namn. Flera tablistor på en sida blir omöjliga att skilja åt.
  • Alla flikar har tabindex="0". Mönstret är ett enda tabbstopp; bara den valda fliken har tabindex="0".
  • aria-orientation="vertical" saknas på en vertikal tablist — skärmläsaren instruerar användare att använda vänster/höger när layouten kräver upp/ned.
  • role="tablist" omsluter länkar (<a href="#section">) i stället för knappar. Ankare scrollar sidan och förstör bakåtknappen.
  • Tabpanel dolt via display: none OCH hidden-attribut när ett räcker.

Exempel

<div role="tablist" aria-label="Project sections" aria-orientation="horizontal">
  <button role="tab" id="t-overview" aria-selected="true"  aria-controls="p-overview" tabindex="0">Overview</button>
  <button role="tab" id="t-files"    aria-selected="false" aria-controls="p-files"    tabindex="-1">Files</button>
  <button role="tab" id="t-team"     aria-selected="false" aria-controls="p-team"     tabindex="-1">Team</button>
</div>