Как доступным образом скрыть элемент заголовка таблицы?

Можно ли как-нибудь скрыть заголовок таблицы, не нарушая интерпретацию экрана другими участниками таблицы? Сокрытие <caption> обычно рекомендуемые стили для скрытия элемента визуально нарушают поведение VoiceOver, заставляя его пропускать последнюю строку в таблице при линейном считывании с помощью нажатия клавиши "следующий". (Можно принудительно ввести VoiceOver в последнюю строку, явно перемещаясь по столбцу, но для этого требуется, чтобы пользователь знал, как это сделать.)

Я признаю, что это может быть ошибкой в ​​самом VoiceOver, но при наличии чистого обходного пути это было бы идеально, так как WCAG требует доступности с фактически доступной вспомогательной технологией.

Вот минималистский пример для демонстрации:

Обновление: приведенные ниже правила стиля - это стандартные правила, используемые в платформе Magento для визуального скрытия элементов, оставляя их доступными для программ чтения с экрана. Ключевое правило, вызывающее поведение VoiceOver, - это position: absolute ; однако, если это просто удаляется, это влияет на поток компоновки.

caption {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
<table>
  <caption>Table of Fruits</caption>
  <thead>
    <tr>
      <th>Fruit</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Pear</td>
      <td>Green</td>
    </tr>
  </tbody>
</table>

<p>Voiceover will jump straight from "Red" in prior table to this paragraph, skipping the last row.</p>

Источник

5 ответов

Ну... я вижу, что вы используете caption тег только для доступности, что означает, что вы не хотите показывать это визуально; Я предлагаю просто не использовать его, а вместо этого использовать aria-label в вашем table тег, который сделает его доступным для программ чтения с экрана.

<table aria-label="Table of fruits"> ... </table>

Прочтите первый абзац этой страницы, чтобы получить представление о aria-label использование.

Источник

Несколько расхождений

<th> потребности <tr> как родитель должен быть действительным

У кода OP (оригинального текста) не было <tr> в <thead> что может быть причиной, почему последний <tr> пропускается. Неверный HTML имеет тенденцию сбивать с толку такие приложения, как VoiceOver.

Три Метода

Отказ от ответственности: не проверено - Caveat Emptor

Следующая демка имеет три <table>s с идентичной разметкой HTML, правилами CSS и текстовым содержимым. каждый <caption> имеет другой .class которые используют определенный метод сокрытия контента:

  1. .clipped - при условии, что для содержимого отсечения требуется длина: clip: rect(0, 0, 0, 0); выглядит сомнительно Некоторые другие свойства и значения выглядят как специальные, поэтому попробуйте заменить caption {...} набор правил с:

    .clipped {
  position: absolute !important;
  height: 1px; 
  width: 1px; 
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

  2. .transparent - это просто назначение прозрачного цвета тексту. Высота все еще там (что требует VoiceOver), но она может быть скорректирована при необходимости. opacity: 0 также вариант, но есть определенные ситуации, в которых opacity: 0 считается таким же, как visibility: hidden (который VoiceOver игнорирует).

    .transparent {
  color: rgba(0, 0, 0, 0);
}

  3. .collapsed - сворачивает содержимое элемента, но сохраняет его высоту, чтобы VoiceOver мог его распознать.

    .collapsed {
  visibility: collapse;
}

демонстрация 

table {
  border: 1px solid #000;
  table-layout: fixed;
  border-collapse: collapse;
  min-width: 200px;
}

th,
td {
  width: 50%;
  border: 1px solid #000;
}

.clipped {
  position: absolute !important;
  height: 1px; 
  width: 1px; 
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.transparent {
  color: rgba(0, 0, 0, 0);
}

.collapsed {
  visibility: collapse;
}
<table>
  <caption class='clipped'>CAPTION</caption>
  <thead><tr><th>TH</th><th>TH</th></tr></thead>
  <tbody><tr><td>TD</td><td>TD</td></tr>
  <tr><td>TD</td><td>TD</td></tr></tbody>
</table>

<table>
  <caption class='transparent'>CAPTION</caption>
  <thead><tr><th>TH</th><th>TH</th></tr></thead>
  <tbody><tr><td>TD</td><td>TD</td></tr>
  <tr><td>TD</td><td>TD</td></tr></tbody>
</table>

<table>
  <caption class='collapsed'>CAPTION</caption>
  <thead><tr><th>TH</th><th>TH</th></tr></thead>
  <tbody><tr><td>TD</td><td>TD</td></tr>
  <tr><td>TD</td><td>TD</td></tr></tbody>
</table>

<p>The <abbr title="Original Post"><b>OP</b></abbr> code didn't have a <code>&lt;tr&gt;</code> in the <code>&lt;thead&gt;</code> which could be the reason why the last <code>&lt;tr&gt;</code> is being skipped.</p>

Источник

Вы не хотите скрывать визуально.

Немного поздно для вечеринки, но я чувствую побуждение подчеркнуть важность того , чтобы не относиться к пользователям с ограниченными возможностями по-разному.Это просто означает предпочтение готовых решений, которые обычно работают для всех пользователей. Старайтесь не изобретать велосипед и не усложнять решения, предназначенные только для чтения с экрана, просто оставьте все как есть и предоставьте одинаковый контент всем пользователям. В данном конкретном случае я бы сделал его видимым для всех или ни для кого. Почему бы не показать всем пользователям? Если содержимое таблицы настолько сложное, что его необходимо описать для программы чтения с экрана, вы можете спросить себя, не пора ли оптимизировать фактическое содержимое для всех пользователей или описать его для всех пользователей, а не только для программ чтения с экрана. Потому что когда вы делаете что-то доступным только для чтения с экрана, то, скорее всего, вы делаете это недоступным для многих других пользователей. Следовательно, вы не сделали его доступным.

Хуже всего здесь предположение, что какое-то решение потребуется только пользователям программ чтения с экрана. Но нет пользователей экранных ридеров. Никогда не следует делать такие предположения о пользователях. Доступность — это не программы для чтения с экрана. Есть так много других ограничений, вариантов использования и вспомогательных технологий. Многие пользователи средств чтения с экрана хотят поделиться контентом, и если они «увидят» (или услышат) что-то, к чему их друг не может получить доступ, это будет выглядеть странно. Имейте также в виду, что многие пользователи программ чтения с экрана не являются слепыми. Они могут использовать масштабирование, а также могут сбить с толку тот факт, что программа чтения с экрана читает содержимое, которого на странице не существует.

Да, всегда есть некоторые исключения, такие как «пропустить ссылки» и тому подобное, но все такие практики являются общими и знакомы пользователям. Обычно они хорошо продуманы для всех групп пользователей. Следовательно, «пропустить ссылки» станут видимыми при фокусировке и т. Д.

Источник

Поскольку position: absolute; является причиной проблемы, прагматичное решение - пропустить его и использовать margin-top: -1px;вместо. Протестировано и подтверждено в Chrome + озвучка.

.clipped {
  position: absolute !important;
  height: 1px; 
  width: 1px; 
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
Источник

Я немного опоздал к этому обсуждению, но есть решение, о котором еще не упоминалось.

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

Если вы используете элемент заголовка или атрибут aria-label, они переопределяют атрибут сводки. Так что просто используйте резюме само по себе.

      <table summary="Table of Fruits">
Источник
Другие вопросы по тегам