Почему при навигации по заголовку с помощью программы чтения с экрана всегда читаются верхние кнопки заголовка?

Моя проблема в том, что я пытаюсь сделать некоторые таблицы более доступными, но я столкнулся с действительно странной проблемой: я пробовал несколько решений, но безрезультатно. У меня есть эта таблица с этого скриншота:

Таблица с проблемами

Как видите, когда я просматриваю каждый заголовок, такой как CSLO, Дата начала и т. Д., Он читает заголовок сверху. Поэтому каждый раз, когда я фокусируюсь с помощью табуляции или стрелок на любом имени заголовка, он также будет читать две кнопки сверху.

Я попытался сделать кнопки отдельными, используя разные роли, выбрав классы и т. Д., Но я действительно не указал, почему он всегда запускает кнопки, даже если они не сфокусированы.

Код для этого выглядит так:

<table
  class="table table-bordered table-hover component-editable slolisting dataTable ui-sortable"
  data-editable-id="slo-list-237"
  id="DataTables_Table_0"
  style="display: table"
>
  <thead>
    <tr class="header_action" role="row">
      <th rowspan="1" colspan="1">
        <div class="btn-group checkall-actions">
          <label
            class="btn btn-default component-editable-checkall"
            onclick="component.editable.select_all_rows(event, this);"
          >
            &nbsp;<input type="checkbox" />&nbsp;
          </label>
        </div>
      </th>
      <th colspan="7" rowspan="1">
        <div
          class="btn-group unfocus-actions"
          style="display: inline-block"
        >
          <button
            class="btn btn-primary"
            onclick="creating_init(event, this);"
          >
            Add CSLO
          </button>

          <button
            class="btn btn-default"
            onclick="showModalSyncCSLO('MATH100 - Mathematics for General Education','237');"
          >
            CSLO Synchronization
          </button>
        </div>
      </th>
    </tr>

    <tr class="header_title" role="row">
      <th
        rowspan="2"
        style="width: 60px"
        class="sorting_disabled component-editable-multi-selector-row"
        role="columnheader"
        colspan="1"
      ></th>
      <th
        rowspan="2"
        style="width: 40em"
        class="sorting_disabled"
        role="columnheader"
        colspan="1"
      >
        CSLO
      </th>
      <th
        rowspan="2"
        class="sorting_disabled"
        role="columnheader"
        colspan="1"
      >
        Start Date
      </th>
      <th
        rowspan="2"
        class="sorting_disabled"
        role="columnheader"
        colspan="1"
      >
        End Date
      </th>
      <th colspan="2" class="slo" rowspan="1">
        SLO Performance
      </th>
    </tr>
    <tr class="header_title" role="row">
      <th
        class="slo sorting_disabled"
        role="columnheader"
        rowspan="1"
        colspan="1"
      >
        Expected
      </th>
      <th
        class="slo sorting_disabled"
        role="columnheader"
        rowspan="1"
        colspan="1"
      >
        Fall 2020
      </th>
    </tr>
  </thead>

Забавно то, что это происходит только с некоторыми программами чтения с экрана, такими как NVDA в Chrome.


accessibility wcag2.0 screen-readers nvda
person JustAJavaUser    schedule 23.11.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

При навигации по таблице программа чтения с экрана автоматически считывает столбец и (если применимо) заголовок строки.

Поскольку вы разместили две кнопки в этих строках, они будут считываться каждый раз. Это также связано с тем, что все они установлены как <th> элементы.

Вы можете переместить эти кнопки за пределы таблицы и переместить флажок, чтобы выбрать столбцы на одну строку ниже (в ту же строку, что и CSLO, дата начала и т. Д.).

Это решит проблему.

Или вы можете использовать <col> и <colgroup>

Вы также можете захотеть определить свои столбцы с помощью элементов <col> и <colgroup>. Это помогает программам чтения с экрана правильно связывать многострочные заголовки.

Существует отличная статья о том, как их использовать от W3C с большим количеством примеры и вот отличная статья о MDN о <col> и <colspan> < / а>.

Тем не менее, вы все равно можете получить объявление о кнопках (вместо этого вы можете поместить их в <td>, хотя технически это не очень хорошая практика, это должно остановить проблему с объявлением и не повлиять на удобство использования ... вам придется протестировать в программе чтения с экрана, хотя, чтобы быть конечно, как никогда не пробовал!)

Пара других мелких замечаний

Нет необходимости в role="row" и role="columnheader" в вашей текущей таблице, <tr> и <th> уже имеют эти роли по умолчанию, если вы поддерживаете IE8 +.

Вы можете удалить rowspan="1" и colspan="1" - ячейки по умолчанию имеют размер 1 строка на 1 столбец, поэтому это ненужная информация (ничего общего с доступностью, она просто облегчит чтение вашей разметки). Вам нужно только добавить rowspan и colspan, когда вы переопределяете диапазон.

person Graham Ritchie    schedule 23.11.2020
comment
Спасибо, Грэм, да, эта таблица уже была создана, я пытался сделать ее более доступной, поэтому есть атрибуты и дизайн, которые могут быть не самыми лучшими. Я попробую ваши решения, спасибо. - person JustAJavaUser; 23.11.2020