Блог

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

Как вы можете видеть, когда я просматриваю каждый заголовок, такой как 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);"
          >
            amp;nbsp;<input type="checkbox" />amp;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.

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

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

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

Это устранит проблему.

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

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

В W3C есть отличная статья о том, как их использовать, с множеством примеров, а вот отличная статья о MDN об <col> и <colspan> .

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

Пара других второстепенных моментов

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

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