Методология доступности нестандартных табличных данных

Описание проблемы:

Я разрабатываю пользовательский интерфейс для списка встреч с советниками. Список оформлен как таблица со строкой заголовков столбцов и соответствующими данными. Каждая встреча содержит строку данных, а также раздел описания под этой строкой. Каждая карточка встречи также может быть расширена для отображения дополнительных данных. Я не уверен в лучшем методе aria, чтобы сделать эту разметку более доступной.

Снимок экрана пользовательского интерфейса, который я разрабатываю (на самом деле это гифка, демонстрирующая функции расширения)

Цель:

Чтобы программам чтения с экрана было проще перемещаться по списку собраний.

Возможные решения:

  1. Используйте атрибуты aria для создания таблицы для элементов в формате таблицы (https://www.w3.org/TR/wai-aria-practices-1.1/examples/table/table.html) Я не уверен, насколько это будет удобно для навигации, особенно когда дело доходит до перехода к разделу описания или разделу складных деталей ...
  2. Скройте заголовок таблицы от программ чтения с экрана и сделайте обертки собрания элементами li, чтобы они образовывали список. Я бы добавил скрытые метки программы чтения с экрана к каждому непомеченному значению. Меня беспокоит, что вся встреча представляет собой слишком много контента для элемента li, и я не уверен, какой будет навигация для программ чтения с экрана.

Я, конечно, не эксперт по доступности, поэтому надеюсь, что кто-то с большим опытом, чем я, сможет указать мне на лучшую практику / лучшую реализацию для такого случая. Любые предложения будут высоко ценится.


html accessibility web-accessibility wai-aria
person G Coops    schedule 11.02.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Из своего собственного исследования для работы я пришел к следующим указателям:

  • используйте наиболее конкретный и точный тег html и используйте CSS, чтобы стилизовать его так, как вы хотите (нет необходимости делать кнопку из диапазона, стили кнопки по умолчанию могут быть перезаписаны)
  • используйте вариант, насколько это возможно, чтобы уменьшить излишне вложенный html
  • Атрибуты aria хороши, но должны использоваться в крайнем случае.

В случае вашей таблицы я бы сказал, используйте стандартные элементы таблицы html, просто убедитесь, что используете правильные теги, например th, и обязательно включите описание или метку в верхней части таблицы. Программы чтения с экрана должны знать, что делать со столом. Если таблица является наиболее точным описанием того, что вы создаете, используйте это :) Просто убедитесь, что вы используете ее стандартным и предсказуемым образом, и (посмотрите, как часто я это говорю) используйте только CSS для вашего стиля.

Для встреч есть элемент для этого: https://www.google.com/amp/s/www.geeksforgeeks.org/html5-details-tag/amp/ вы можете стилизовать его как хотите, но я думаю, что стрелка выбрана браузер. Но программа чтения с экрана прочитает резюме и предоставит пользователю возможность открыть его. Я думаю, что у вас отличный вариант использования этого элемента.

Я бы не стал скрывать контент вроде заголовков от программ чтения с экрана. Люди, использующие вспомогательные технологии, привыкли к навигации с ними, а заголовки представляют собой информативный контент.

Престижность за рассмотрение доступности в вашем коде :)

person Sydney Y    schedule 12.02.2020

arrow_upward
0
arrow_downward

Таблицы структуры

Я бы рекомендовал держаться подальше от столов, но это мое личное предпочтение. Вы можете сделать это доступным с помощью таблиц, но это окажется более сложным, чем нужно.

Структура списка

Описанная вами структура списка подойдет, но в конечном итоге вы могли передать иерархическую структуру того, что вы здесь делаете, используя только заголовки и абзацы.

Готовые решения

Многие из популярных фреймворков (например, Bootstrap, Material и т. Д.) Уже решили проблему доступных аккордеонов , свернуть элементы, панели расширения или как-нибудь еще, как вы хотите это назвать. Если вы не являетесь сильным JS-разработчиком, я бы рекомендовал начать с готового решения на основе хорошо известного фреймворка, а затем протестировать его с помощью достойная программа чтения с экрана.

Индивидуальные решения

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

W3C дает отличные рекомендации по желаемому поведению доступные элементы аккордеона, а в проекте A11Y есть прекрасная библиотека шаблонов проектирования с полезными примерами кода.

Для разметки ARIA вам необходимо использовать aria-expanded, aria-controls и aria-labelledby соответственно. В зависимости от того, как проходят тесты программы чтения с экрана, вы также можете установить фокус при открытии расширяемого элемента.

person Josh    schedule 12.02.2020