Mon formulaire est-il disposé dans un tableau accessible?

Question

Je crée un formulaire pour rechercher des collèges en fonction des programmes sportifs proposés et de la division du sport. J'ai posé la forme sur une table. Les & Toutes les divisions & Quot; case à cocher sélectionne toutes les cases à cocher pour ce sport.

Je sais que les lecteurs d’écran ont à la fois des formulaires et des tableaux. Ma conception actuelle est-elle accessible ou dois-je ajouter des étiquettes pour chaque case à cocher et les positionner hors écran pour les utilisateurs visuels? Cela doit également satisfaire au moins aux exigences de la section 508.

Le code actuel des tables ressemble à ceci:

<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>

Ce que je veux savoir, c'est si un lecteur d'écran est capable d'associer les en-têtes de tableau aux cases à cocher.

Answer 1

Il est accessible. J'ai copié le code dans un document html et j'ai pu lire les cases à cocher avec les en-têtes dans Firefox 3.0 et Internet Explorer 7 en utilisant Jaws version 10.0 comme lecteur d'écran.

Answer 2

Je pense que vous aurez besoin d'étiquettes individuelles pour chacune des cases à cocher, mais vous pourrez pouvoir utiliser le headers attribut sur les cellules du tableau pour obtenir le même effet.

Answer 3

Ok, en utilisant l'ID & "; ID &"; et " en-têtes " Attributs dans les tableaux (faites défiler jusqu'à la section).

<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>