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

Question

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

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

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

Цель:

Для упрощения чтения с экрана читателями списка встреч

Потенциальные решения:

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

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

Answer 1

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

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

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

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

Вне полки Решения

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

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

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

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

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

Answer 2

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

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

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

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

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

Благодарность за рассмотрение доступности в вашем коде:)