Il mio modulo è disposto in una tabella accessibile?

Question

Sto realizzando un modulo per la ricerca di college basati sui programmi atletici offerti e sulla divisione dello sport. Ho presentato il modulo in un tavolo. Il & Quot; tutte le divisioni & Quot; la casella di controllo seleziona tutte le caselle di controllo per quello sport.

So che gli screen reader hanno sia la forma che la modalità tabelle. Il mio progetto attuale è accessibile o devo aggiungere etichette per ogni singola casella di controllo e posizionarle fuori schermo per gli utenti visivi? Ciò deve inoltre soddisfare almeno i requisiti della Sezione 508.

Il codice corrente per le tabelle è simile al seguente:

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

Quello che voglio sapere è se uno screen reader è in grado di associare le intestazioni della tabella alle caselle di controllo.

Answer 1

È accessibile. Ho codificato il codice in un documento HTML e sono stato in grado di leggere le caselle di controllo con le intestazioni sia in Firefox 3.0 che in Internet Explorer 7 usando Jaws versione 10.0 come screen reader.

Answer 2

Penso che avrai bisogno di etichette individuali per ciascuna delle caselle di controllo, ma potresti essere in grado di utilizzare headers attributo sulle celle della tabella per ottenere lo stesso effetto.

Answer 3

Ok utilizzando il " ID " e " Headers " attributi nelle tabelle (scorrere fino alla sezione).

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