里放会导致屏幕阅读器读不出列表，因为只允许直接嵌套，其他标签会被浏览器静默移出，使变为空列表、丢失语义和样式，屏幕阅读器仅播报“列表，0项”。

为什么

里放
会让屏幕阅读器“读不出列表”

因为

的语义是“无序列表”，浏览器和辅助技术只认它直接包裹
• ——<div>不是合法子元素，解析器会把它踢出<ul>，变成同级节点。结果就是<ul>空着，屏幕阅读器扫到它时只说“列表，0项”，后面那个<code><div class="item">被当成普通段落读，完全丢失列表上下文。<ul><li> <code><ul></ul>必须且只能直接包含<li>，其他任何标签（包括<div>、<code><section></section>、<span></span>）都会触发静默移出
• 移出后的<div>失去所有列表相关默认样式（项目符号、缩进、垂直间距），也拿不到<code>ul li这类选择器的样式
• 语音朗读时，不会播报“第1项”“第2项”，也不会在切换列表项时提供导航提示（如“向下箭头进入下一项”）

如何用W3C Validator快速定位非法列表嵌套

别靠肉眼数标签，W3C校验器能精准指出哪一行违反了内容模型。粘贴HTML片段到validator.w3.org，选“Validate by Input”，它会直接报错：Element div not allowed as child of element ul。

• 优先修第一条错误——后续很多Warning（比如End tag ul seen, but there were open elements）往往是连锁反应
• 如果用了框架（Vue/React），右键页面 → “查看网页源代码”，复制那段静态HTML来校验，别校验JS生成的动态DOM
• 校验前删掉内联<script></script>和<style></style>块，避免干扰结构判断

替换方案：保留语义又支持复杂子结构的写法

想在列表项里塞容器、按钮或图标？不用<div>硬塞，改用语义合规的组合。例如把<code><div class="item">换成<code><li class="item">，再用<div>包内部内容。<pre class="brush:php;toolbar:false;">&lt;!-- ❌ 错误 --&gt; </pre> <ul> <div class="item"> <p>标题</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <button>操作</button> </div> </ul> <p><!-- ✅ 正确 --> </p> <ul> <li class="item"> <div> <p>标题</p> <button>操作</button> </div> </li> </ul> <ul><li> <code><li>是flow content容器，允许嵌套任意块级或行内元素，包括<div>、<code><p></p>、<button></button>

• 这样既保持ul > li的语义链，屏幕阅读器能正确播报“列表，2项”，每项也能读出完整内容
• CSS仍可用ul li.item精确控制，不依赖脆弱的ul + div.item兄弟选择器

验证修复是否生效的三个实操动作

改完别急着提交，用这三步确认屏幕阅读器真能读对：

• 打开Chrome DevTools → Elements面板，确认<ul></ul>下面只有<li>节点，没有灰色/半透明的孤立<div><li>执行<code>document.querySelectorAll('ul > *')，返回结果应全是<li>，不能有<div>或<code><span></span>
• 用NVDA或VoiceOver开启朗读模式，听是否播报“列表，共X项”，然后逐项移动光标时是否提示“第Y项”

真正难的不是写对标签，而是意识到：你写的<ul><div>和屏幕阅读器实际拿到的DOM，从来就不是同一个东西。修复嵌套不是为了“让页面看起来正常”，而是为了让结构本身可被机器准确理解。</div></ul>