TEXTO PAGINA: 22
NORMAS LEGALES El Peruano Lima, viernes 11 de diciembre de 2009 407644 siempre tengan sentido y que los usuarios puedan navegar por el sitio siguiendo los vínculos de las páginas primarias, las páginas alternativas o ambas. Antes de enviar a una página alternativa, reconsidere el diseño de la página original; haciéndola accesible es probable que la mejore para todos los usuarios. 9.1 Proporcione mapas de imagen controlados por el cliente en lugar de por el servidor, excepto donde las zonas sensibles no puedan ser defi nidas con una forma geométrica. [Prioridad 1] Tablas 5.1 En las tablas de datos, identifi que los encabezamientos de fi la y columna. [Prioridad 1] 5.2 Para las tablas de datos que tienen dos o más niveles lógicos de encabezamientos de fi la o columna, utilice marcadores para asociar las celdas de encabezamiento y las celdas de datos. [Prioridad 1] • Identifi que grupos estructurales de fi las (THEAD para encabezamientos de tabla que se repiten, TFOOT para pies de tabla que se repiten y TBODY para otros grupos de fi la) y grupos de columnas (COLGROUP y COL). • Etiquete los elementos de tabla con los atributos "scope", "headers", y "axis " de forma que los futuros navegadores y ayudas técnicas sean capaces de seleccionar datos de una tabla fi ltrando por categorías. • No utilice PRE para crear una disposición tabular de texto (utilice el elemento TABLE de forma que las ayudas técnicas puedan reconocer que es una tabla). • Para información sobre los encabezamientos de tabla, consulte el algoritmo encabezamiento de tablas y el debate sobre la Recomendación HTML 4.01 ([HTML4] , sección 11.4.3). Ejemplo Este ejemplo muestra cómo asociar celdas de datos (creadas con TD) con sus correspondientes encabezamientos a través del atributo “headers”. El atributo “headers” especifi ca una lista de celdas de encabezamiento (etiquetas de fi la y columna) asociadas con la celda de datos actual. Esto requiere que cada encabezamiento de celda tenga un atributo “id” que lo identifi que. <table border=”1” summary=”Esta tabla esquematiza el nombre de usuario, edad y correo electrónico correspondiente a cada usuario registrado.”> <caption>Datos de usuarios</caption> <tr> <th id=”header1”>Nombre</th> <th id=”header2”>Edad</th> <th id=”header3”>Correo electrónico</th> </tr> <tr> <td headers=”header1”>Manuel Quispe</td> <td headers=”header2”>25</TD> <td headers=”header3”>mquispet@inictel.edu.pe </td> </tr> <tr> <td headers=”header1”>César Córdova</td> <td headers=”header2”>30</td> <td headers=”header3”>ccordovaf@inictel.edu.pe</td> </tr> </table> Un sintetizador de voz podría leer esta tabla como sigue: Título: Datos de usuarios Resumen: Esta tabla esquematiza el nombre de usuario, edad y correo electrónico correspondiente a cada usuario registrado. Nombre: Manuel Quispe, Edad: 30, Correo electrónico: mquispet@inictel.edu.pe Nombre: César Córdova, Edad: 25, Correo electrónico: ccordovaf@inictel.edu.pe Ejemplo: El siguiente ejemplo asocia las mismas celdas de encabezamiento (TH) y datos (TD) como antes, pero esta vez utiliza el atributo “scope” en lugar de “headers”. “Scope” debe tener uno de los siguientes valores: “row”, “col”, “rowgroup” o “colgroup”. “Scope” especifi ca la batería de celdas de datos que han de asociarse con la celda de encabezamiento correspondiente. Este método es particularmente útil para tablas simples. Debería tenerse en cuenta que la versión hablada de esta tabla podría ser idéntica a la del ejemplo anterior. La elección entre los atributos “headers” y “scope” depende de la complejidad de la tabla. No afecta al resultado en la medida en que en la etiqueta haya quedado clara la relación entre el encabezamiento y las celdas de datos. <table border=”1” summary=” Esta tabla esquematiza el nombre de usuario, edad y correo electrónico correspondiente a cada usuario registrado.”> <caption>Datos de usuarios</caption> <tr> <th scope=”col”>Nombre</th> <th scope=”col”>Edad</th> <th scope=”col”>Correo electrónico</th> </tr> <tr> <td>Manuel Quispe</td> <td>25</TD> <td>mquispet@inictel.edu.pe </td> </tr> <tr> <td>César córdova</td> <td>30</td> <td>ccordovaf@inictel.edu.pe</td> </tr> </table> Ejemplo: El siguiente ejemplo muestra cómo crear categorías en una tabla usando el atributo “axis”. <TABLE border=”1”> <CAPTION>Liquidación de gastos de viaje</CAPTION> <TR> <TH></TH> <TH id=”header2” axis=”gastos”>Comidas</TH> <TH id=”header3” axis=”gastos”>Hotel</TH> <TH id=”header4” axis=”gastos”>Transportes</TH> <TD>subtotales</TD> </TR> <TR> <TH id=”header6” axis=”lugar”>San Jose</TH> <TH></TH> <TH></TH> <TH></TH> <TD></TD> </TR> <TR> <TD id=”header7” axis=”fecha”>25-ago-97</TD> <TD headers=”header6 header7 header2”>37,74</TD> <TD headers=”header6 header7 header3”>112,00</TD> <TD headers=”header6 header7 header4”>45,00</TD> <TD></TD> </TR> <TR> <TD id=”header8” axis=”fecha”>26-ago-97</TD> <TD headers=”header6 header8 header2”>27,28</TD> <TD headers=”header6 header8 header3”>112,00</TD> <TD headers=”header6 header8 header4”>45,00</TD> <TD></TD> </TR> <TR> <TD>subtotales</TD> <TD>65,02</TD> <TD>224,00</TD> <TD>90,00</TD> <TD>379,02</TD>