Pregunta

Estoy haciendo un formulario para buscar universidades basado en los programas deportivos ofrecidos y la división del deporte. He presentado el formulario en una mesa. & Quot; todas las divisiones & Quot; casilla de verificación selecciona todas las casillas de verificación para ese deporte.

Sé que los lectores de pantalla tienen formas y tablas. ¿Es accesible mi diseño actual o debo agregar etiquetas para cada casilla de verificación individual y colocarlas fuera de la pantalla para los usuarios visuales? Esto también debe cumplir al menos con los requisitos de la Sección 508.

El código actual para las tablas se ve así:

<table>
        <tr><th scope="col" colspan="2">All Divisions</th>
            <th scope="col">Div I</th>
            <th scope="col">Div II</th>
            <th scope="col">Div III</th>
            <th scope="col">Other</th>
        </tr>
        <tr><th scope="row">Baseball</th>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
        </tr>                    
        <tr><th scope="row">Basketball</th>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
        </tr>
    </table>

Lo que quiero saber es si un lector de pantalla puede asociar o no los encabezados de las tablas con las casillas de verificación.

¿Fue útil?

Solución

Es accesible. Codifiqué el código en un documento html y pude leer las casillas de verificación con encabezados tanto en Firefox 3.0 como en Internet Explorer 7 usando Jaws versión 10.0 como lector de pantalla.

Otros consejos

Creo que necesitará etiquetas individuales para cada una de las casillas de verificación, pero puede poder usar headers atributo en las celdas de la tabla para lograr el mismo efecto.

Ok usando " ID " y " Encabezados " atributos en las tablas (desplácese hacia abajo hasta la sección).

<table>
    <tr><th id="all" colspan="2">All Divisions</th>
        <th id="div1">Div I</th>
        <th id="div2">Div II</th>
        <th id="div3">Div III</th>
        <th id="other">Other</th>
    </tr>
    <tr><td id="baseball">Baseball</td>
        <td headers="baseball all"><input type="checkbox" /></td>
        <td headers="baseball div1"><input type="checkbox" /></td>
        <td headers="baseball div2"><input type="checkbox" /></td>
        <td headers="baseball div3"><input type="checkbox" /></td>
        <td headers="baseball other"><input type="checkbox" /></td>
    </tr>                    
</table>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top