Chrome Lighthouse嵌套ul可访问性报错：列表未仅包含<li>及脚本支持元素

报错根因 #

该Lighthouse可访问性告警和<li>内嵌套<a>标签无关，是你的嵌套列表写法不符合HTML规范导致的：
HTML规范明确要求，<ul>、<ol>的直接子元素只能是<li>元素，或是<script>、<template>这类脚本支持元素。你提供的代码中，<ol class="continue">直接作为上层<ul>的子元素存在，没有包裹在<li>标签内，就触发了该告警。

修复方案 #

根据你的业务场景二选一即可：

场景1：有序列表是第4条目录的子项 #

将嵌套的<ol>放在对应第4条目录的<li>内部，放在<a>标签之后即可，修改后代码如下：

<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>
            <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>

场景2：有序列表是独立的同级内容 #

直接把<ol class="continue">整体移到上层<ul>的外面，作为同级DOM节点即可，不要放在<ul>的内部。

修改完成后重新运行Lighthouse审计，该告警就会消失。

内容的提问来源于stack exchange，提问作者Aditya Agarwal