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