嵌套 HTML <ul> 可访问性问题 Lighthouse："Lists do not contain only `<li>` elements and script supporting elements"

Question

我正在使用 HTML 嵌套列表在我的网站上创建 Table 内容。在进行 Chrome Lighthouse 审核时，我发现辅助功能存在问题。

它说“列表不只包含 <li> 元素和脚本支持元素”

我的列表包含另一个列表（嵌套）所以这是问题的原因？

我的每个列表项也都有 <a>，我该如何使用我的代码来解决 chrome 警告。

<div class="TOCContainer Collapsable">
    <ul class="parent start">
        <li><a class="TOCLink" href="#1">Why do Big Companies Die?</a></li>
        <li><a class="TOCLink" href="#2">How did Apple become the Most Innovative Company in the world?</a></li>
        <li><a class="TOCLink" href="#3">What Made Apple So innovative?</a></li>
        <li><a class="TOCLink" href="#4">Is Apple still innovating in 2021?</a></li>
        <ol class="continue">
            <li><a class="TOC-link" href="#5">The Slow Improvement in Existing Products</a></li>                
            <li><a class="TOCLink" href="#6">Lack of Industry Disrupting New Products</a></li>
            <li><a class="TOCLink" href="#7">The perception of Apple Being only concerned of Profits</a></li>
        </ol>
        <li><a href="#8">The Silver Lining</a></li><li><a class="TOCLink" href="#9">Conclusion</a></li>
    </ul>
</div>

Answer 1

所以，我找到了自己问题的答案。

我很难学到的，只有 ul 的直接 child 应该是 li

li 中可以有 html 个标签。

所以问题是嵌套HTML。 <ol> 嵌套在 <ul> 中，这是不允许的

相反，<ol> 应该包裹在 <li> 中以使其工作

所以大体上应该是这样的。

<ul>
    <li>
        <ol></ol>
    </li>
</ul>

基本上是把ol放在li里面了

现在问题的正确代码如下所示：

<div class="TOCContainer Collapsable">
    <ul class="parent start">
        <li><a class="TOCLink" href="#1">Why do Big Companies Die?</a></li>
        <li><a class="TOCLink" href="#2">How did Apple become the Most Innovative Company in the world?</a></li>
        <li><a class="TOCLink" href="#3">What Made Apple So innovative?</a></li>
        <li><a class="TOCLink" href="#4">Is Apple still innovating in 2021?</a></li>
        <li>
            <ol class="continue">
                <li><a class="TOC-link" href="#5">The Slow Improvement in Existing Products</a></li>                
                <li><a class="TOCLink" href="#6">Lack of Industry Disrupting New Products</a></li>
                <li><a class="TOCLink" href="#7">The perception of Apple Being only concerned of Profits</a></li>
            </ol>
        </li>
        <li><a href="#8">The Silver Lining</a></li><li><a class="TOCLink" href="#9">Conclusion</a></li>
    </ul>
</div>

嵌套 HTML <ul> 可访问性问题 Lighthouse："Lists do not contain only `<li>` elements and script supporting elements"

Nested HTML <ul> Accessibility issue Lighthouse: "Lists do not contain only `<li>` elements and script supporting elements"

html

wordpress

google-chrome

html-lists

lighthouse