Заставьте JAWS читать заголовок роли каждый раз перед значением столбца

Question

надеюсь, у тебя все отлично.Итак, для одного из моих недавних проектов мне нужно сделать что-то действительно похожее на страницу apple, созданную для сравнения моделей iPad.(https://www.apple.com/la/ipad/compare/) Интернет должен быть доступен, и, к сожалению, эта часть уже построена, но a11y на самом деле не была принята во внимание, и теперь нам нужно ее реорганизовать. Поэтому я просмотрел веб-сайт Apple и увидел, чтоих расположение как-то похоже на наше. Кроме того, я тестировал с использованием NVDA и думаю, что это то, что мне нужно. Каждый раз, перед чтением значения столбца, NVDA читает заголовок столбца, который установлен для выбранного продукта. Таким образом, пользовательможет знать, какой продукт имеет эту функцию. Затем я протестировал на Jaws и обнаружил, что он не читает заголовки каждый раз перед значением. Это не хорошо, потому что пользователь не может знать продукт, который имеет функцию, которая читается.есть конфигурация, которую нужно активировать, чтобы иметь такое же поведение от NVDA и JAWS? Челюсти важны для клиента.

Спасибо

Answer 1

Если вы используете нативный HTML, тогда ваша работа будет намного проще. Если вы комбинируете таблицу, используя теги

и , у вас есть немного больше работы, но это можно сделать. Так что для простой таблицы, как на сайте Apple, у вас будет что-то вроде этого: <table> <tr> <th scope="col"></th> <th scope="col">iPad Pro</th> <th scope="col">iPad Air</th> <th scope="col">iPad</th> </tr> <tr> <th scope="row">Height</th> <td>11.04 inches</td> <td>9.8 inches</td> <td>9.4 inches</td> </tr> <tr> <th scope="row">Width</th> <td>8.46 inches</td> <td>6.8 inches</td> <td>6.6 inches</td> </tr> ... </table> Обратите внимание, вы можете поместить в , а основные s в , но я сохраняю это простым. Используя нативный HTML, ваша работа выполнена. Таблица содержит заголовки столбцов и строк и . Когда вы перемещаетесь по экранной программе, проходящей через строку, заголовок столбца будет объявлен перед значением ячейки. Если вы перемещаетесь вниз по столбцу, заголовок строки будет объявлен перед значением ячейки. Если вы используете не элементы таблицы, а s и s, вам нужно будет указать roles для всех элементов (и иметь CSS для правильной разметки Таблица). Это было бы что-то вроде: <div role="table"> <div role="row"> <div role="columnheader"></div> <div role="columnheader">iPad Pro</div> <div role="columnheader">iPad Air</div> <div role="columnheader">iPad</div> </div> <div role="row"> <div role="rowheader">Height</div> <div role="cell">11.04 inches</div> <div role="cell">9.8 inches</div> <div role="cell">9.4 inches</div> </div> <div role="row"> <div role="rowheader">Width</div> <div role="cell">8.46 inches</div> <div role="cell">6.8 inches</div> <div role="cell">6.6 inches</div> </div> </div> Вам не нужно делать ничего особенного в программе чтения с экрана, чтобы услышать заголовки строк и столбцов, если вы используете программу чтения с экрана с настройками по умолчанию. JAWS, NVDA и VoiceOver должны уважать их.

Answer 2

Прежде всего вы должны убедиться, что вы используете <th> и, возможно, <thead> правильно.

Согласно Руководству WebAIM по тестированию с JAWS , этот читатель предлагает дополнительные ярлыкиЧтобы прочитать связанные заголовки.

Чтобы перейти к таблице, нажмите клавишу T.Для перемещения между ячейками удерживайте нажатой клавишу Ctrl + Alt и используйте use / ↓ / ← / → для перемещения от ячейки к ячейке.Ctrl + Alt + 5 (на цифровой клавиатуре) будет читать заголовки строк и / или столбцов для текущей ячейки.

Такое поведение является решением дизайнеров продукта, поэтому не следует пытатьсяперезаписать его.

Я бы также рекомендовал привлечь к тестированию реальных пользователей программы чтения с экрана.