Скрытые метки арии в таблице 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, перемещение скрытия, которое будет объявлено как атрибут style, а не class, приведет к тому, что оба желаемых поведения будут работать.
Согласно сообщению в блоге, я обнаружил, что устройства для чтения с экрана когда-то игнорируют display: none, чтобы высказывать свое мнение, а иногда они не - поэтому я не уверен, что могу полагаться на такое сокрытие, чтобы быть надежным для своей цели (скрыть для навигации, использовать для маркировки).

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

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

Ответ 1

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

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

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

Ответ 2

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

<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 в таблице из-за таблицы-макета, если table-cell не является display: none, он будет автоматически display: table-cell

Ответ 3

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

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

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

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

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

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

http://webaim.org/techniques/css/invisiblecontent/
http://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
http://alistapart.com/article/now-you-see-me (хотя имеет javascript, а не только css)
http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ (много ссылок, Крис много исследовал)

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

Ответ 4

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

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

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

Ответ 5

Не будет больно использовать 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>

Ответ 6

Вместо отображения Нет, если использовать непрозрачность 0,

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