嵌套 HTML <ul> 可访问性问题 Lighthouse：“列表不仅包含 `<li>` 元素和脚本支持元素”答案

【问题标题】：Nested HTML <ul> Accessibility issue Lighthouse: "Lists do not contain only `<li>` elements and script supporting elements"嵌套 HTML <ul> 可访问性问题 Lighthouse：“列表不仅包含 `<li>` 元素和脚本支持元素”
【发布时间】：2021-09-09 00:42:18
【问题描述】：

我正在使用 HTML 嵌套列表在我的网站上创建目录。在进行 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>

【问题讨论】：

标签： html wordpress google-chrome html-lists lighthouse

【解决方案1】：

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

我很难学到，只有ul 的直系子级应该是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>

【讨论】：