Доступность с несколькими тегами ‹tbody› в таблице

У меня есть несколько разделов <tbody> в моем <table>, и он читает каждый тег <th>, содержащийся в таблице. У них есть уникальные атрибуты id и header, назначенные различным тегам th и td, поэтому мне непонятно, почему программа чтения с экрана NVDA выводит следующий вывод:

[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 выглядит следующим образом: вот Pen также показывает эту проблему

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 и доступности, мы будем очень признательны.


html accessibility nvda
person Ben Petersen    schedule 24.05.2016    source источник
comment
Похоже на опечатку: в ваших идентификаторах есть дата**=**ячейка для первого тега th, но когда вы устанавливаете атрибут заголовков, у вас есть дата**-**ячейка. Измените знак равенства на тире. (Я пытался выделить жирным шрифтом, где ошибка, но это не сработало.)   -  person BSMP    schedule 24.05.2016
comment
Да, это была опечатка в вопросе. Это не связано с проблемой   -  person Ben Petersen    schedule 24.05.2016
comment
У вас есть живой пример? Похоже, что NVDA делает то, что должна делать, но если ваши ячейки действительно содержат содержимое, которое я вижу выше, это может быть довольно запутанным. У меня есть таблица в этом CodePen, вы можете попробовать проверить, читается ли она так, как вы ожидаете (примечание , без <tbody>, так как это было для демо-версии клиента). Также обратите внимание, что здесь атрибут id ничего не делает для NVDA.   -  person aardrian    schedule 24.05.2016
comment
Похоже, NVDA делает то, что должна делать @aardrian - Почему предполагается читать все заголовки, а не только один в атрибуте headers? Я бы ожидал того же, что и OP, и что он будет читать только [текст из заголовка] [текст из ячейки].   -  person BSMP    schedule 24.05.2016
comment
Опять же, возможно, я запутался, учитывая текст в ваших примерах (я сделал CodePen и вставил его для проверки). У вас есть живой пример? Кроме того, я не был ясен в своем комментарии. Возможно, не стоит полагаться на атрибут headers. Кроме того, посмотрите на эту матрицу поддержки чтения с экрана/браузера и посмотри, куда ты упадешь.   -  person aardrian    schedule 24.05.2016
comment
Я обновил вопрос со ссылкой на CodePen   -  person Ben Petersen    schedule 24.05.2016
comment
У вас есть дублирующиеся идентификаторы в первом столбце, так что это поднимает некоторые объявления. Пропустите это через валидатор, чтобы найти дубликаты, и убедитесь, что идентификаторы соответствуют вашим требованиям. Убедитесь, что вы используете клавиши со стрелками для перехода к ячейке за ячейкой, чтобы вы могли слышать, что говорит каждая. Вы также видите, что самый верхний <th> всегда произносится, независимо от вашего атрибута заголовков. Вам следует рассмотреть возможность удаления headers=, если вы не переопределяете что-то.   -  person aardrian    schedule 25.05.2016
comment
Я сделал CodePen из этого: s.codepen.io/aardrian/debug/zBOYmN Вы также не сказали, какой браузер / ОС вы используете с NVDA. Учтите, что NVDA лучше всего работает с Firefox.   -  person aardrian    schedule 25.05.2016

Ответы (1)


arrow_upward
1
arrow_downward

Из комментариев я обнаружил, что эта проблема связана с Chrome с NVDA. Firefox с NVDA работает как положено.

Для кроссбраузерной работы с NVDA я создал несколько таблиц, по одной для каждого th, и удалил заголовки и атрибуты id, потому что это имеет больше семантического смысла. Вот пример работы в кроссбраузерном режиме (Chrome, Firefox) с NVDA.

<table>
  <caption class="offScreen">Balance Sheet Table</caption>
  <tbody>
  <tr class="hierarchy0 bold">
    <th class="left" scope="col">Assets (Millions)</th>
    <th class="right greyBL" scope="col">9/30/2012</th>
    <th class="right greyBL" scope="col">9/30/2013</th>
    <th class="right greyBL" scope="col">9/30/2014</th>
    <th class="right greyBL" scope="col">9/30/2015</th>
  </tr>
  <tr class="hierarchy5">
    <td class="left">Cash</td>
    <td class="right">--</td>
    <td class="right">--</td>
    <td class="right">10,232.00</td>
    <td class="right">--</td>
  </tr>
  <tr class="hierarchy4">
    <td class="left">Cash Equivalents</td>
    <td class="right">10,746.00</td>
    <td class="right">14,259.00</td>
    <td class="right">13,844.00</td>
    <td class="right">21,120.00</td>
  </tr>
  </tbody>
</table>
<table>
 <tbody>
  <tr class="hierarchy0 bold">
    <th class="left" scope="col">Liability And Shareholder Equity (Millions)</th>
    <th class="right greyBL" scope="col">9/30/2012</th>
    <th class="right greyBL" scope="col">9/30/2013</th>
    <th class="right greyBL" scope="col">9/30/2014</th>
    <th class="right greyBL" scope="col">9/30/2015</th>
  </tr>
  <tr class="hierarchy5">
    <td class="left">Accounts Payable</td>
    <td class="right">21,175.00</td>
    <td class="right">22,367.00</td>
    <td class="right">30,196.00</td>
    <td class="right">35,490.00</td>
  </tr>
  <tr class="hierarchy4">
    <td class="left">Income Tax Payable</td>
    <td class="right">--</td>
    <td class="right">--</td>
    <td class="right">--</td>
    <td class="right">--</td>
  </tr>
  </tbody>
 </table>
 <table>
  <tbody>
  <tr class="hierarchy0 bold">
    <th class="left" scope="col">Supplemental (Millions)</th>
    <th class="right greyBL" scope="col">9/30/2012</th>
    <th class="right greyBL" scope="col">9/30/2013</th>
    <th class="right greyBL" scope="col">9/30/2014</th>
    <th class="right greyBL" scope="col">9/30/2015</th>
  </tr>
  <tr class="hierarchy1">
    <td class="right">Total Capitalization</td>
    <td class="right">111,210.00</td>
    <td class="right">140,509.00</td>
    <td class="right">140,534.00</td>
    <td class="right">172,818.00</td>
  </tr>
  <tr class="hierarchy1">
    <td class="left">Capital Lease Obligations</td>
    <td class="right">--</td>
    <td class="right">--</td>
    <td class="right">--</td>
    <td class="right">--</td>
  </tr>
  <tr class="hierarchy1">
    <td class="left">Preferred Stock Equity</td>
    <td class="right">--</td>
    <td class="right">--</td>
    <td class="right">--</td>
    <td class="right">--</td>
  </tr>
  </tbody>
person Ben Petersen    schedule 25.05.2016