JAWS несколько раз читает aria-label для таблицы с role = "img" в MS Edge на Win10 - PullRequest
Новая
       23

JAWS несколько раз читает aria-label для таблицы с role = "img" в MS Edge на Win10

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

У меня есть элемент table, который содержит гистограмму HTML, и я хочу, чтобы программы чтения с экрана читали его текстовое описание, поэтому я использую этот подход: 

 <table role="img" aria-label="table description">

В Voiceover onMac, он читает метку и пропускает остальное содержимое таблицы.Однако в JAWS с MS Edge в Windows 10 он читает «описание графической таблицы» для каждого td в таблице, а также во вложенных таблицах.Вот упрощенный пример: 

    <table role="img" aria-label="table description">
        <tr>
            <td>
                row 1
            </td>
        </tr>
        <tr>
            <td>
                row 2
            </td>
        </tr>
    </table>

Эта проблема не возникает с IE 11 на том же компьютере Windows;он читает «описание графической таблицы» только один раз .

Я также пытался добавить aria-hidden="true", tabindex="-1" и role="presentation" к элементам td и tr втаблица, но ничего из этого не помогло.

Я делаю это неправильно?Есть ли лучший способ добиться этого?Мне интересно, если это ошибка в JAWS ...

1 Ответ

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

Переход от раздела комментариев к разделу ответов, потому что это может быть решением (и это слишком долго, чтобы вставить комментарий).

фактический <table>имеет несколько вложенных таблиц

Ах, это может быть частью проблемы.Если вы используете <table role="presentation">, статус «представления» передает только дочерние элементы таблицы (<thead>, <tbody>, <tfoot>, <tr>, <th>, <td>), но останавливает , если попадает во вложенную таблицу.Вложенная таблица также потребует role="presentation".

Если вы примените ту же логику к использованию role="img", вложенная таблица не будет рассматриваться как изображениеи фактически вызовет недействительный html, потому что <img> не может иметь дочерних элементов DOM.role="img" на внешней таблице сделает всю таблицу изображением, поэтому все вложенные элементы <thead>, <tbody>, <tfoot>, <tr>, <th>, <td> будут игнорироваться, но как только появится вложенный <table>, у вас возникнут проблемы.

Я не уверен, что следующее будет правильным: 

<table role="img" aria-label="chart description">
  <!-- other table stuff -->

  <!-- nested table -->
  <table role="presentation">
  </table>
</table>

Внешняя таблица будет изображением, а внутреннюю таблицу следует игнорировать, но у вас все равно будет элемент (внутренняя таблица) внутриобраз.Вам нужно будет запустить его через html-анализатор .

В дополнение к role="presentation" на внутренней таблице, вы также можете добавить aria-hidden="true", чтобы скрыть таблицу от программ чтения с экрана.в противном случае пользователь программы чтения с экрана может перемещаться по всем текстовым элементам (если они есть) внутри таблицы «презентация».

...