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

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

0 голосов
/ 26 февраля 2019

Можно ли как-нибудь скрыть заголовок таблицы, не нарушая того, как программы чтения с экрана интерпретируют остальную часть таблицы?Скрытие <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>

Ответы [ 2 ]

0 голосов
/ 26 апреля 2019

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

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

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

0 голосов
/ 27 февраля 2019

A Несколько несоответствий

<th> Требуется <tr> в качестве родителя, чтобы быть действительным

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

Три метода

Отказ от ответственности: не проверено - Предостережение 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>
...