私のフォームは、アクセス可能なテーブルでレイアウトされていますか？

Question

私は体育提供されるプログラムやスポーツの区分に基づいて大学を検索するためのフォームを作っています。私は、テーブル内のフォームを打ち出してきました。 「すべての部門」のチェックボックスは、そのスポーツのためのすべてのチェックボックスを選択します。

私は、スクリーンリーダーがフォームやテーブルモードの両方を持って知っています。私の現在の設計では、アクセス可能であるか、私は、個々のチェックボックスのラベルを追加して、視覚的なユーザーのためにオフスクリーンにそれらを配置する必要がありますか？これはまた、少なくとも第508要件を満たす必要があります。

のテーブルの現在のコードは次のようになります：

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

私が知りたいことは、スクリーンリーダーは、チェックボックスを使用してテーブルの見出しを関連付けることができているかどうかではありません。

Answer 1

これは、アクセス可能です。私は、HTMLドキュメントにコードをcoppyedとスクリーンリーダーとしてジョーズバージョン10.0を使用して両方のFirefox 3.0とInternet Explorer 7のヘッダをチェックボックスを読み取ることができた。

Answer 2

の<のhref = "http://w3schools.com/tags/att_td_headersを使用することができるかもしれ私はあなたがチェックボックスごとに個別のラベルを必要とするつもりだと思いますが、あなたは nofollowをnoreferrer = "」REL">の.asp headers同じ効果を達成するために、表のセルにを属性

Answer 3

[OK]を "ID" と "ヘッダ" <表に属性を使用して/ A>（セクションまでスクロールし）ます。

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