axe devtools 突出显示手风琴上的 aria 扩展错误

Question

我正在 chrome 浏览器上运行 Ax DevTools，以便在 div 上进行可访问性，它基本上是使用数据切换的手风琴。

DevTools 在展开时突出显示了手风琴标题和面板内容的问题

'要解决此问题，您需要修复以下问题： 不允许使用 ARIA 属性：aria-expanded="true"'

Div 关闭时（标题上出现不允许 ARIA 属性的问题：aria-expanded="false"）

<div id="ctl00_panelAdditionalInfo" class="panel-group help-container">
    <div class="panel">
        <div class="panel-heading collapsed" data-toggle="collapse" href="#panel_content" tabindex="0" aria-expanded="false">Additional Information</div>
            <div class="panel-collapse collapse" id="panel_content" aria-expanded="false" style="height: 0px;">
                <div class="panel-body help-content">   
                    <a class="additional-info" href="htpps://url" alt="alt" target="_blank"><u>text</u></a>
                    <a class="additional-info" href="htpps://url" alt="alt" target="_blank"><u>text</u></a>
                    <a class="additional-info" href="htpps://url" alt="alt" target="_blank"><u>text</u></a>
                    <a class="additional-info" href="htpps://url" alt="alt" target="_blank"><u>text</u></a>
                </div>
            </div>
        </div>
    </div>
</div>

展开时的 Div（标题和面板内容上的问题）

<div id="ctl00_panelAdditionalInfo" class="panel-group help-container">
    <div class="panel">
        <div class="panel-heading" data-toggle="collapse" href="#panel_content" tabindex="0" aria-expanded="true">Additional Information</div>
            <div class="panel-collapse collapse in" id="panel_content" aria-expanded="true">
                <div class="panel-body help-content">   
                    <a class="additional-info" href="htpps://url" alt="alt" target="_blank"><u>text</u></a>
                    <a class="additional-info" href="htpps://url" alt="alt" target="_blank"><u>text</u></a>
                    <a class="additional-info" href="htpps://url" alt="alt" target="_blank"><u>text</u></a>
                    <a class="additional-info" href="htpps://url" alt="alt" target="_blank"><u>text</u></a>
                </div>
            </div>
        </div>
    </div>
</div>

我在 stackoverflow 上进行了审查，发现很少有建议添加带有标题按钮的角色。但扩展面板内容的作用是什么？

Answer 1

您不能在任何 HTML 元素上添加 aria-expanded。

1. HTML 元素需要正确的角色：Aria-expanded 可用于角色
2. 用按钮替换 DIV：该按钮的作用是允许 aria-expanded 属性
3. 去检查构建可访问的手风琴的模式：手风琴模式