Het tabindex attribuut

Het attribuut tabindex bepaalt de volgorde waarin elementen focus krijgen bij navigatie tussen elementen met de Tab-toets.

Door op deze toets te drukken, kunnen sommige elementen op de pagina geactiveerd worden (links en elementen van formulieren). Actieve elementen krijgen invoerfocus.

Voor invoervelden van het type input en textarea uit zich focus doordat de cursor in het veld knippert en er tekst ingevoerd kan worden. Voor links en andere elementen is dit een markering op een bepaalde manier (onderstreping, een stippellijntje eromheen, etc., afhankelijk van de browser).

Als een element op het moment van focus verkrijgen niet zichtbaar was op de pagina (vanwege scrollen), dan zal de pagina naar dat element scrollen.

Als voor elementen het attribuut tabindex niet is ingesteld of de waarde 0 heeft, dan zal navigatie met de Tab-toets plaatsvinden in de volgorde van de elementen in de HTML-code.

Als er op de pagina elementen zijn waaraan tabindex is toegewezen, dan zal de navigatie eerst via deze elementen verlopen, beginnend bij de kleinste waarde van het attribuut tabindex (de kleinste waarde kan 1 zijn) en zo verder in oplopende volgorde van de attribuutwaarden. Wanneer dergelijke elementen op zijn, gaat de navigatie verder met de elementen waaraan geen tabindex is toegewezen of die de waarde 0 hebben.

De waarde van het attribuut zijn gehele getallen van 1 tot oneindig. Als sommige nummers ontbreken - er gebeurt niets ergs (bijvoorbeeld, als nummer 2 ontbreekt, dan krijgt eerst het element met tabindex, gelijk aan 1 focus, en daarna het element met tabindex, gelijk aan 3).

Als er op het moment van indrukken van de Tab-toets een element in focus is op de pagina (focus kon verkregen zijn niet alleen door op Tab te drukken, maar ook door met de muis op het element te klikken of door het attribuut autofocus), dan zal de volgende indrukking van de Tab-toets ertoe leiden dat het element dat in de volgorde na het element dat in focus staat, focus krijgt (bijvoorbeeld, als momenteel het element met tabindex 3 in focus is, dan krijgt daarna het element met tabindex 4 focus).

Als aan een invoerveld het attribuut disabled is toegekend, dan wordt het genegeerd bij navigatie met de Tab-toets, zelfs als aan dit veld het attribuut tabindex is toegekend.

Het attribuut tabindex is van toepassing op de tags a, input, textarea, button, select, area.

Voorbeeld

Laten we aan de inputvelden het attribuut tabindex toekennen. Druk opeenvolgend op de Tab-toets en u ziet hoe de invoerfocus van het eerste inputveld naar het vierde gaat, en daarna via de links vanaf het begin van de pagina verder gaat (aangezien er geen elementen meer met een ingesteld attribuut tabindex zijn):

:

Zie ook