3
<table>に複数の<tbody>セクションがあり、テーブルに含まれている<th>タグをそれぞれ読み取っています。彼らはNVDAのスクリーンリーダーは、次のような出力を出力している理由、それは意味がありません、私には、とても様々番目とTDタグに割り当てられた固有のIDとヘッダの属性があります。テーブル内に複数の<tbody>タグ付きアクセシビリティ
[row# tbody 1, column header 1 name]
[<th> tbody 2, column header 1 name]
[<th> tbody 3, column header 1 name]
Current tbody 4, column header 1 name
[output of column1 data]
[output of column2 data]
[output of column3 data]
[output of column4 data]
HTMLは次のように構成されています、here is the Pen also showing this issue
caption{
text-align:left;
display: table-caption;
clip: rect(1px, 1px, 1px, 1px);
height:1px;
overflow:hidden;
position: absolute;
top: auto;
width: 1px;
}
.left{
text-align:left;
}
.right{
text-align:right;
}
.hierarchy1{
font-size:1.25em;
font-weight:bold;
}
.hierarchy2{
backgound-color:#ededed;
padding: 9px 10px 7px 8px;
border-top: 1px solid #ccc;
font-weight: bold;
}
.hierarchy3{
}
tr{
height:45px;
display:table-row;
}
table
{
width: 100%;
border-collapse: collapse;
}<table>
<caption class="offScreen">Balance Sheet Table</caption>
<tbody>
<tr class="hierarchy0 bold">
<th class="left" scope="col" id="date-cell-0-1">Assets (Millions)</th>
<th class="right greyBL" scope="col" id="date-cell-1-1">9/30/2012</th>
<th class="right greyBL" scope="col" id="date-cell-2-1">9/30/2013</th>
<th class="right greyBL" scope="col" id="date-cell-3-1">9/30/2014</th>
<th class="right greyBL" scope="col" id="date-cell-4-1">9/30/2015</th>
</tr>
<tr class="hierarchy5">
<td class="left" headers="date-cell-0-1">Cash</td>
<td class="right" headers="date-cell-1-1">--</td>
<td class="right" headers="date-cell-2-1">--</td>
<td class="right" headers="date-cell-3-1">10,232.00</td>
<td class="right" headers="date-cell-4-1">--</td>
</tr>
<tr class="hierarchy4">
<td class="left" headers="date-cell-0-1">Cash Equivalents</td>
<td class="right" headers="date-cell-1-1">10,746.00</td>
<td class="right" headers="date-cell-2-1">14,259.00</td>
<td class="right" headers="date-cell-3-1">13,844.00</td>
<td class="right" headers="date-cell-4-1">21,120.00</td>
</tr>
</tbody>
<tbody>
<tr class="hierarchy0 bold">
<th class="left" scope="col" id="date-cell-0-2">Liability And Shareholder Equity (Millions)</th>
<th class="right greyBL" scope="col" id="date-cell-1-2">9/30/2012</th>
<th class="right greyBL" scope="col" id="date-cell-2-2">9/30/2013</th>
<th class="right greyBL" scope="col" id="date-cell-3-2">9/30/2014</th>
<th class="right greyBL" scope="col" id="date-cell-4-2">9/30/2015</th>
</tr>
<tr class="hierarchy5">
<td class="left" headers="date-cell-0-2">Accounts Payable</td>
<td class="right" headers="date-cell-1-2">21,175.00</td>
<td class="right" headers="date-cell-2-2">22,367.00</td>
<td class="right" headers="date-cell-3-2">30,196.00</td>
<td class="right" headers="date-cell-4-2">35,490.00</td>
</tr>
<tr class="hierarchy4">
<td class="left" headers="date-cell-0-2">Income Tax Payable</td>
<td class="right" headers="date-cell-1-2">--</td>
<td class="right" headers="date-cell-2-2">--</td>
<td class="right" headers="date-cell-3-2">--</td>
<td class="right" headers="date-cell-4-2">--</td>
</tr>
</tbody>
<tbody>
<tr class="hierarchy0 bold">
<th class="left" scope="col" id="date-cell-0-3">Supplemental (Millions)</th>
<th class="right greyBL" scope="col" id="date-cell-1-3">9/30/2012</th>
<th class="right greyBL" scope="col" id="date-cell-2-3">9/30/2013</th>
<th class="right greyBL" scope="col" id="date-cell-3-3">9/30/2014</th>
<th class="right greyBL" scope="col" id="date-cell-4-3">9/30/2015</th>
</tr>
<tr class="hierarchy1">
<td class="right" headers="date-cell-0-3">Total Capitalization</td>
<td class="right" headers="date-cell-1-3">111,210.00</td>
<td class="right" headers="date-cell-2-3">140,509.00</td>
<td class="right" headers="date-cell-3-3">140,534.00</td>
<td class="right" headers="date-cell-4-3">172,818.00</td>
</tr>
<tr class="hierarchy1">
<td class="left" headers="date-cell-0-3">Capital Lease Obligations</td>
<td class="right" headers="date-cell-1-3">--</td>
<td class="right" headers="date-cell-2-3">--</td>
<td class="right" headers="date-cell-3-3">--</td>
<td class="right" headers="date-cell-4-3">--</td>
</tr>
<tr class="hierarchy1">
<td class="left" headers="date-cell-0-3">Preferred Stock Equity</td>
<td class="right" headers="date-cell-1-3">--</td>
<td class="right" headers="date-cell-2-3">--</td>
<td class="right" headers="date-cell-3-3">--</td>
<td class="right" headers="date-cell-4-3">--</td>
</tr>
</tbody>このHTML構造とアクセシビリティへの洞察力を持っている場合、それははるかに高く評価されるだろう。
は、タイプミスのように見えるのです「日付** - **セル」を持っています。等号をダッシュに変更します。 （私はエラーがどこにあるか大胆にしようとしていましたが、うまくいきませんでした） – BSMP
これは質問のタイプミスです。それは問題に関連していません –
ライブサンプルがありますか？ NVDAがやろうとしていることをしているように聞こえますが、あなたのセルに実際にそのコンテンツが含まれていれば、それは上に表示されている内容をかなり混乱させる可能性があります。私はこのCodePenのテーブルを持っています（http://codepen.io/aardrian/pen/ONaewv）あなたが期待どおりに読むかどうか試してみることができます（注：これはクライアントのデモのためのものではなく、「
」はありません） 。また、 'id'属性はNVDAのために何もしません。 – aardrian答えて
コメントは、この問題がChromeのw/NVDAに関連していることを発見しました。 NVDAを搭載したFirefoxは期待通りに動作します。
NVDAを使用してクロスブラウザを動作させるために、私は1つ1つずつ複数のテーブルを構築し、ヘッダーとid属性を削除しました。あなたのIDは、最初の `th`タグに「日付** = **セル」を持っている、しかし、あなたは、ヘッダー属性を設定したとき、あなたは：ここではNVDA
と example of it working cross browser（クロム、Firefoxの）出典
2016-05-25 15:38:53
関連する問題