9.4 Crear un orden lógico de tabulación a través de los enlaces, controles de formulario y objetos

Prioridad 3

Para agregar un orden de tabulación, debemos seguir este procedimiento:

1. Seleccione el elemento al que le va a agregar (o modificar) un atributo tabindex con el botón primario del ratón.
2. Haga clic en el botón Show Code and Design Views .
3. O haga clic en el menú View y seleccione Code and Design del mismo.
4. Habiendo seleccionado previamente el elemento, aparecerá de un color resaltado la línea del código HTML donde se encuentra, por ejemplo:

   <table width="80%" border="1" align="center">
     <caption align="bottom">
     Ejemplos de orden de tabulaci&oacute;n mediante &quot;
   tabindex&quot;
   </caption>
     <tr>
       <th scope="col">Orden: 1-2-3-4</th>
       <th scope="col">Orden: 1-3-2-4</th>
     </tr>
     <tr>
       <td align="center" valign="middle">
         <a href="links-0.html">1</a> - 
         <a href="links-0.html">2</a><br>
         <a href="links-0.html">3</a> -
         <a href="links-0.html">4</a>
       </td>
       <td align="center" valign="middle">
         <a href="links-0.html">1</a> - 
         <a href="links-0.html">2</a><br>
         <a href="links-0.html">3</a> -
         <a href="links-0.html">4</a> 
       </td> 
   </tr>
   </table>

5. Ahora deberá agregar el atributo tabindex de la siguiente manera:

   <table width="80%" border="1" align="center">
     <caption align="bottom">
     Ejemplos de orden de tabulaci&oacute;n mediante &quot;
   tabindex&quot;
   </caption>
     <tr>
       <th scope="col">Orden: 1-2-3-4</th>
       <th scope="col">Orden: 1-3-2-4</th>
     </tr>
     <tr>
       <td align="center" valign="middle">
         <a href="links-0.html" tabindex="1">1</a> - 
         <a href="links-0.html" tabindex="2">2</a><br>
         <a href="links-0.html" tabindex="3">3</a> -
         <a href="links-0.html" tabindex="4">4</a>
       </td>
       <td align="center" valign="middle">
         <a href="links-0.html" tabindex="5">1</a> - 
         <a href="links-0.html" tabindex="7">3</a><br>
         <a href="links-0.html" tabindex="6">2</a> -
         <a href="links-0.html" tabindex="8">4</a> 
       </td> 
   </tr>
   </table>

6. Para otros elementos, tales como <A>, <AREA>, <BUTTON>, <INPUT>, <OBJECT>, <SELECT> y <TEXTAREA> se debe proceder de una forma similar.

Volver a ejemplos del punto 9.4