Registreren

[Zunflappie]

Een goed gebruik is een tabindex toewijzen aan links, formuliervelden en andere klikbare (focusbare) elementen op je website.

Echter, je wilt niet alle delen even belangrijkmaken. Iemand die "tab" gebruikt om door de elementen te bladeren (soms handig als je geen muis hebt of op een laptop zit) wil niet 400 elementen afgaan tot het juiste element is gefocused.

Daarom het volgende (jQuery)-script.

Code: Alles selecteren

/* Tabindexen regelen */
var tabindex = 9;
$("body a:not(.notabindex), input:not(.notabindex").each
   (
   function(index)
      {
      /* voeg tabindex toe en verhoog teller */
      $(this).attr('tabindex', tabindex);
      tabindex++;   
      }
   );

Mijn menu heeft 8 tabbladen, die ik handmatig zo opgeef:

Code: Alles selecteren

<div id="menu">
   <span class="braille_only">Hierna komt het menu. Kies de pagina welke u wilt.</span>
   <a id="menu_o" tabindex="1" accesskey="o" href="/overzicht/"><em>O</em>verzicht</a>
   ...
</div>

Allereerst een <span> voor braille-lezers (dat men weet wat er komt).
Daarna de <a> met daarin een tabindex, beginnend bij 1 en oplopend tot 8.
Tevens een accesskey (alt + shift + "o" bijvoorbeeld, afhankelijk van je browser) voor toetsenbordgestuurd browsen. Die geef ik netjes weer in een <em>-element.

Nu het menu tabindex 1 tot en met 8 heeft opgeslokt gaan we alle <a>- én <input>-elementen een tabindex geven.
Sommige linkjes wil ik geen tabindex geven (bijvoorbeeld in de footer of een #top-link of waar een link en plaatje beide naar hetzelfde verwijzen) en die kan ik uitschakelen door ze een class="notabindex" mee te geven.

Voorbeeld
Een website die dit volledig gebruikt is http://hervormdegemeentebovenhardinxveld.nl