Pergunta

Estou fazendo um formulário para procurar faculdades com base em programas atléticos oferecidos e na divisão do esporte. Eu coloquei o formulário em uma mesa. A caixa de seleção "All Divisions" seleciona todas as caixas de seleção para esse esporte.

Eu sei que os leitores de tela têm o modo de formulários e tabelas. Meu design atual é acessível ou devo adicionar rótulos para cada caixa de seleção individual e posicioná-los fora da tela para usuários visuais? Isso também precisa atender a pelo menos requisitos da Seção 508.

O código atual para as tabelas se parece com o seguinte:

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

O que eu quero saber é se um leitor de tela pode ou não associar os títulos da tabela às caixas de seleção.

Foi útil?

Solução

É acessível. Eu copiei o código em um documento HTML e pude ler as caixas de seleção com cabeçalhos no Firefox 3.0 e no Internet Explorer 7 usando o JAWS versão 10.0 como leitor de tela.

Outras dicas

I think you're going to need individual labels for each of the checkboxes, but you may be able to use the headers attribute on the table cells to accomplish the same effect.

Ok using the "ID" and "Headers" attributes in tables (scroll down to 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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top