Índice del Curso Página de inicio del manual Tabla de contenidos de las directrices Tabla de contenidos de los puntos de verificación Tabla de contenidos de los ejemplos Tabla de contenidos de procedimiento de aplicación Manual de aplicación de las WCAG 1.0 PreviaContenidosCambiar estilo

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 Imagen del 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 Volver a ejemplos del punto 9.4

Autores

43 de 70 Previa

Copyright © sidar 1997-2002. Este Curso de Diseño Accesible ha sido desarrollado por la Fundación sidar.