Какой должна быть «ария-роль» аккордеона?Во время проверки доступности мои аккордеоны читаются как кнопки, которые могут запутать пользователя

Question

У меня есть веб-страница, и мне удалось сохранить в ней немного аккордеоновПоскольку я дал "role"="button" на аккордеонах, мои аккордеоны читаются как «кнопка» во время тестирования доступности.

Какими должны быть значения параметров aria, если я хочу, чтобы мои аккордеоны читались как аккордеоны, а не как кнопки?

Может ли кто-нибудь дать представление об этом?Кроме того, было бы здорово, если бы кто-то мог поделиться стандартами тестирования доступности.

Answer 1

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

Нет роли арии, чтобы описать что-то как аккордеон.

Последняя заметка W3C WAI-ARIA Authoring Practices содержит раздел об аккордеонах , в котором используются кнопки, сопровождаемые полным примером .

Answer 2

Мое предложение:

• Используйте dl элемент с атрибутом role="presentation".
• Используйте dt элемент с role="heading" для заголовков аккордеона.
• Поместите кнопку внутри dt или заголовка, чтобы она была неявно фокусируемой с порядком табуляции
• присвойте кнопке атрибут "aria-extended" и установите его в значение true, если панель аккордеона развернута; в противном случае установите значениеfalse.
• Поместить данные в dd элемент

Здесь вы можете найти больше информации с примером в w3c