一个可访问的阅读页面，应该先不用鼠标

从文档结构开始

阅读页应有清晰的 header、nav、main、article 和 footer。文章标题使用一个 h1，正文节标题使用 h2，必要时再嵌套 h3。标题级别表达结构，不是字号选择器。屏幕阅读器用户经常依赖标题导航，跳级或用加粗段落伪装标题会破坏这一入口。

为键盘提供一条近路

重复导航放在 main 之前是合理的，但键盘用户不应每次都按十几次 Tab 才读到正文。一个指向 main 的跳过链接在获得焦点时显示即可。不要去掉浏览器的焦点轮廓；更清晰的替代样式必须始终可见。

<a class="skip" href="#main">跳到正文</a>
<main id="main" tabindex="-1">
  <article><h1>文章标题</h1></article>
</main>

<style>
.skip { position: absolute; top: -100px; }
.skip:focus { top: 8px; left: 8px; padding: 12px; background: white; }
:focus-visible { outline: 3px solid #995032; outline-offset: 4px; }
</style>

不要让代码块撑破页面

技术文章的代码行很长，强行换行可能破坏阅读结构，完全不换行又容易让整个页面横向滚动。给 pre 单独设置 overflow-x: auto、max-width: 100%，同时给 Grid 子元素 min-width: 0。可滚动代码区可以设置 tabindex=0 与描述标签，便于键盘滚动，但不要为每个普通段落添加焦点。

颜色与缩放需要真实检查

正文与背景的 WCAG AA 对比度至少 4.5:1，大号文字至少 3:1。细线和浅灰副标题可能看起来优雅，却不一定能读清。测试 200% 文本缩放和 320 CSS 像素宽度，确保没有截断的标题与被遮挡的导航。用 rem 设置文字大小，并保持用户可以缩放 viewport。

最后做一次只用键盘的验收

从地址栏开始按 Tab，检查跳过链接、主导航、目录、文章链接与页尾 RSS。当前焦点必须可见，顺序必须符合视觉顺序。再关闭 JavaScript，确认正文和导航仍可使用。自动化扫描能发现部分语义问题，但无法判断链接文字是否清楚、阅读顺序是否合理；人工检查不能被一个分数取代。