html网站地图是纯语义化导航页，仅用组织内容，链接须为根相对路径并排除敏感路径，超30链接需用折叠，文本自解释，加title属性、自然tab顺序及:focus-visible焦点样式，底部建议加纯文本url列表。
HTML网站地图页面必须是纯语义化导航页，不是XML
HTML版sitemap.html和sitemap.xml完全无关——前者是给人看的辅助导航页，后者是给爬虫读的机器文件。把<url></url>或xmlns塞进HTML里，浏览器会直接忽略或报错，屏幕阅读器也读不出结构。真正可访问的HTML站点地图，只用<h2></h2>、<ul></ul>、<li>、<a></a>这些原生标签组织内容。
链接必须用根相对路径且过滤敏感路径
所有<a href="..."></a>里的URL要以/开头（如/about/），不能用./products/widget.html或绝对URL。否则屏幕阅读器可能误读为“点此跳转到当前目录下的某个文件”，语义混乱。更重要的是，必须手动排除非公开路径：
-
/admin/、/api/、/test-这类路径别放进去 - 登录后才可见的页面（如
/dashboard/）也不该出现在公开sitemap.html中 - 如果前端无法控制权限，至少别主动暴露——可访问性不等于暴露全部路由
结构层级要清晰，超过30个链接必须折叠
一次性堆出上百个<a></a>链接，对键盘用户和屏幕阅读器都是灾难。真实场景下，建议：
- 一级分类用
<h2></h2>，每个分类下用<ul></ul>包裹链接列表 - 链接数超30个时，用
<details><summary>产品中心</summary><ul>...</ul></details>收起子项 - 避免嵌套过深：最多两级
<ul></ul>（即分类 → 子页），再深就破坏线性阅读流 - 每个
<a></a>的文本要自解释，比如写“联系我们（邮箱与电话）”而不是“点击这里”
无障碍细节：alt不用加，但title和焦点管理不能少
HTML站点地图里没有图片，所以alt属性完全不相关。但以下三点容易被忽略：
- 每个
<a></a>加上title属性，补充简短上下文（如title="查看最新发布的公司新闻"），鼠标悬停和部分屏幕阅读器会读出 - 确保
tabindex自然顺序：从上到下、从左到右，别用tabindex="1"强行干预 - 用
:focus-visibleCSS 显式定义焦点样式（比如加outline: 2px solid #0066cc），否则键盘用户根本不知道当前聚焦在哪
最常被跳过的其实是“提供纯文本等效链接列表”这个兜底方案——哪怕你做了完美语义结构，也建议在页面底部加一段<pre class="brush:php;toolbar:false;"></pre>，把所有URL按行平铺出来。这不是冗余，是对老旧辅助技术的真实兼容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
