Скрытые метки областей в таблице HTML (для доступности программы чтения с экрана)

На моей веб-странице мне нужно создать таблицу со строкой заголовка, которая видна или скрыта в зависимости от конфигурации пользователя. Эта таблица также должна быть полностью доступной (в частности, поскольку таблица может быть очень длинной, я бы хотел, чтобы ярлыки, считывающие заголовки строк / столбцов, работали). У меня есть только ChromeVox для тестирования (я подробно расскажу о поведении других читателей из найденных мной сообщений в блогах).

Мой текущий макет похож на этот:

CSS:

.table-header-show {
}

.table-header-hide {
  display: none;
}

HTML:

<table>
  <!-- ${show} is used to choose the right class the user configuration -->
  <thead class="table-header-${show}">
    <tr>
      <th>Name</th>
      <th>Value 1</th>
      <th>Value 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>Value 1a</td>
      <td>Value 2a</td>
    </tr>
  </tbody>
</table>

Когда заголовок виден, проблем нет. Когда заголовок скрыт, от программы чтения с экрана зависит, будут ли считаны эти метки или нет:

  • Я бы хотел, чтобы строка заголовка пропускалась при использовании обычной навигации * с программой чтения с экрана, но используйте строку заголовка для объявления названий столбцов
  • С ChromeVox первый работает (пропускается при навигации), но второй не работает (скрытая строка не используется для маркировки столбцов)
  • Опять же, с ChromeVox, перемещение скрытия, которое будет объявлено как атрибут astyle, а не как class, заставит работать оба желаемых поведения.
  • Согласно найденному мной сообщению в блоге, программы чтения с экрана иногда игнорируют display: none, чтобы говорить из контента, а иногда и нет - поэтому я не уверен, что могу положиться на такого рода скрытие, чтобы быть надежным для моей цели (скрытие для навигации, использование для маркировки)

Итак, как я могу добиться желаемого поведения с помощью кроссбраузерного ридера?

  • AFAIK, проблема с скрытием за пределами экрана / размером 1 пиксель (как предлагается здесь) заключается в том, что если я сделаю это для строки заголовка, то все заголовки столбцов всегда будут считываться ...

html css html-table accessibility wai-aria
person Barak Itkin    schedule 11.11.2014    source источник
comment
Вы пробовали добавить строку заголовка во время выполнения в JS в document.ready () на основе значения $ {show}   -  person Amer Zafar    schedule 18.11.2014
comment
FWIW, я подозреваю, что offscreen / 1px будет вашим лучшим и самым надежным вариантом здесь: уловка в том, что в противном случае вы просите программу чтения с экрана сделать две противоречивые вещи: игнорировать заголовок при навигации, но чтобы уважайте заголовок при поиске заголовков. Насколько я понимаю, как обычно работают программы чтения с экрана, они либо будут рассматривать это как существующее, либо как отсутствующее, но не оба эти типа. Это означает, что пользователи программы чтения с экрана смогут перемещаться по дополнительной «невидимой» строке, которую зрячие пользователи не видят, но это меньшая проблема (и, возможно, полезный контекст), чем отсутствие ярлыков.   -  person BrendanMcK    schedule 19.11.2014
comment
Дополнительные советы по доступности: в таких таблицах хорошо сделать начальную ячейку в каждой строке также TH - даже если вы стилизуете ее так, чтобы она выглядела как обычный TD: это позволяет пользователю перемещаться вниз по другим столбцам и иметь столбец начального имени зачитывается, когда они перемещаются по строкам. Также поместите scope = col в верхние TH и scope = row в левые TH; некоторые комбинации программы чтения с экрана / браузера без этого будут делать странные вещи.   -  person BrendanMcK    schedule 19.11.2014

Ответы (6)


arrow_upward
3
arrow_downward

Самый надежный вариант - скрыть строки заголовков от программы чтения с экрана, удалив их из DOM (предпочтительно) или с помощью безопасного удаления программы чтения с экрана. Затем вставьте заголовок в каждую применимую ячейку с text-indent: -999em; или аналогичным визуальным сокрытием, сохраняющим доступ к программе чтения с экрана.

Это очень неудовлетворительный ответ, но он должен быть приемлемым с jquery. Примерно: для каждого th сохраните содержимое в массиве, затем выберите каждый td в соответствующем столбце и .prependTo() "th".

Опять же, очень неудовлетворительно и запутанно, но это единственное надежное решение, которое я могу придумать. Удачи.

person fontophilic    schedule 17.11.2014
comment
Я боялся такого ответа, потому что это не совсем правильно; добавление таких меток к каждой ячейке будет означать, что они всегда будут считываться, без возможности их отключения. Вам не нужно слышать имена столбцов в каждой строке, но вы можете проверить их на первых нескольких ... - person Barak Itkin; 19.11.2014
comment
Да, мои единственные другие мысли - это более нестандартные идеи. Могут ли эти данные быть предоставлены вне таблицы? John Doe имеет значение 1a и значение 2a Может быть, вы могли бы объединить каждую запись с несколькими предлогами / связующими глаголами? - person fontophilic; 19.11.2014

arrow_upward
1
arrow_downward

Это может вам помочь.

<table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Value 1</th>
                    <th id="foo">Value 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Doe</td>
                    <td>Value 1a</td>
                    <td id="foo">Value 2a</td>
                </tr>
            </tbody>
        </table>


#foo {
        visibility: collapse
    }

Но о вышеупомянутом коде не все браузеры поддерживают.

Чтобы улучшить то, что у вас есть, вы можете использовать table-layout: fixed в таблице из-за макета таблицы, когда ячейка таблицы не display: none, она автоматически display: table-cell

person Shirish Patel    schedule 11.11.2014
comment
Я не уверен, что понял ваш комментарий (я не хочу сворачивать столбец, я хочу свернуть строку). В любом случае, я попытался поиграть с visibility: collapse (я уменьшил высоту своей строки до 1 пикселя и удалил display: none), но это не сработало - программа чтения с экрана действительно перемещалась по свернутым ячейкам (говоря, что они были пустыми), и, кроме того, она не использовала их как метки столбцов. Но спасибо, что предложили это! - person Barak Itkin; 11.11.2014

arrow_upward
1
arrow_downward

Вместо display: none по голове - попробуйте уйти за пределы экрана, вынув его из потока - что-то вроде:

<table class="hidden-header">
    ...

.hidden-header thead {
    display: absolute;
    left: -9999
}

Я не тестировал это ... но может сработать.

Изменить: Дальнейшее чтение:

Быстрая игра в Google, я рекомендую следующие статьи:

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

person Ruskin    schedule 17.11.2014
comment
Я почти уверен, что это не сработает, так как навигация AFAIK в программах чтения с экрана основана на модели DOM, а не на видимом расположении (это то, что я помню из кода программ с открытым исходным кодом, я даже написал это в конце моей статьи). вопрос). Завтра проверю еще раз на работе, может здесь я ошибаюсь - person Barak Itkin; 17.11.2014

arrow_upward
1
arrow_downward

Меня тоже здесь интересует ответ, и я надеюсь, что понял вопрос. Что делать, если вы используете теги <colgroup> и <col> и присваиваете им aria-label? ChromeVox читает их, и они семантически привязаны к столбцам.

Вот пример в jsfiddle: http://jsfiddle.net/j87x7sn5/4/

В этом коде используются одноуровневые селекторы, чтобы «скрыть» группы colgroups, когда заголовок виден, и «показать» их, когда это не так, чтобы программа чтения с экрана не читала их дважды.

person Barry T. Smith    schedule 20.11.2014

arrow_upward
1
arrow_downward

Не повредит использовать aria-hidden = "false", если вас беспокоит только ChromeVox. Вы можете использовать его предпочтительно в сочетании со скрытым атрибутом HTML5 (см. Пример ниже), но также могут работать и другие методы. См. эту статью конца 2013 г., чтобы узнать о совместимости различных методов. . Если совместимость вызывает беспокойство, то, похоже, лучше всего использовать метод вне экрана.

Вне экрана метод:

<style>
    thead {
        position:absolute;
        left:-9999px
    }
</style>

Скрытый метод:

<table>
  <!-- ${show} is used to choose the right class the user configuration -->
  <thead hidden aria-hidden="false">
    <tr>
      <th>Name</th>
      <th>Value 1</th>
      <th>Value 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>Value 1a</td>
      <td>Value 2a</td>
    </tr>
  </tbody>
</table>
person jazZRo    schedule 20.11.2014

arrow_upward
0
arrow_downward

Вместо Display None использовать непрозрачность 0,

Я попытался найти в Google какой-либо четкий ответ, но не получил четкого ответа, но все же могу предположить, что программа чтения с экрана игнорирует непрозрачность и читает ярлыки таблиц как обычно и не отображается для обычных пользователей.

person Tauseef Ahmed    schedule 20.11.2014