从可访问性角度，<nav>嵌套<ul><li>与直接放链接哪种写法更优？

两种写法均符合HTML规范，核心差异主要在可访问性、扩展性和通用兼容性三个维度：

可访问性差异 #

这是两种写法最核心的区别：

• 嵌套<ul>/<li>的写法：<ul>默认自带列表语义，屏幕阅读器会自动播报导航区域内的列表总项数，比如「导航区域，列表，共3项」，视障用户可以快速获知导航的规模，也可以通过屏幕阅读器的列表跳转快捷键，直接在多个导航项之间切换，操作效率更高。
• 直接在<nav>内放<a>的写法：缺失了列表语义，屏幕阅读器只会识别到导航区域，不会播报导航项的总数，视障用户无法快速知道当前导航有多少个可选项，导航跳转的效率会明显降低。如果要补上这部分语义，需要手动给<nav>加role="list"属性，给每个<a>加role="listitem"属性，反而会额外增加代码量。

扩展性差异 #

• 嵌套<ul>/<li>的写法后续拓展性更强：如果后续需要给某个导航项加二级下拉菜单，直接在对应<li>内部嵌套子级<ul>即可，结构层级清晰，不需要改动外层的原有结构。
• 直接放<a>的写法拓展成本更高：如果要加下拉菜单，需要额外嵌套<div>等容器来承载子菜单，结构会变得混乱，反而违背了你最初想简化代码的初衷。

通用兼容性差异 #

• 嵌套<ul>/<li>是行业通用的导航结构约定，后续接手维护的其他开发者、搜索引擎爬虫、各类辅助阅读设备都可以快速识别结构含义，不存在理解成本。
• 直接放<a>的写法虽然语法合法，但不符合通用约定，后续维护的开发者可能会对结构产生疑惑，部分老旧的辅助设备也可能无法正确识别多个导航项之间的关联关系。

适用场景建议 #

如果是极简的、确定不会后续拓展的小型导航（比如页脚只有2-3个链接的辅助导航），可以使用直接嵌套<a>的写法，否则更推荐使用传统的<nav>+<ul>+<li>写法，综合收益更高。

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