一张香蕉叶上十六道菜，全用CSS画的

<article>
<h2>如何利用CSS Art构建具备无障碍能力的单页导航？</h2>
<p>在实现一个以CSS绘画为核心的落地页时，最容易犯的错误是将其视为纯粹的视觉作品，而忽略了它作为页面的结构属性。我分析了一个将香蕉叶摆盘转化为导航的案例，其核心逻辑是将视觉上的“上菜顺序”直接映射为 DOM 的线性顺序，从而确保读屏软件的遍历逻辑与��觉逻辑一致。</p>

<p>在开发此类页面时，我总结的实操流程是：<strong>先定义无障碍（a11y）决策，再进行视觉实现</strong>。如果先定视觉后补无障碍，最终代码往往充斥着为了兼容而写的补丁。</p>

<h2>如何处理滚动导航中的焦点丢失与偏移问题？</h2>
<p>在实现点击导航跳转到特定区域（Course）时，简单的 <code>window.scrollTo</code> 或 <code>href="#id"</code> 并不足以支撑完整的键盘交互。如果用户通过 Tab 键导航，滚动后焦点仍停留在原导航栏，会导致用户在视觉上到达了目标位置，但在逻辑上仍处于页面顶部。</p>

<p>我的实操方案是给目标区域添加 <code>tabindex="-1"</code>，并在跳转后强制转移焦点：</p>
<pre><code>&lt;section id="course-1" tabindex="-1"&gt;
&lt;h2&gt;Ghee&lt;/h2&gt;
&lt;/section&gt;</code></pre>

<p>此外，为了解决 Sticky Header（吸顶导航）遮挡目标标题的问题，不要在 JS 中计算偏移量，直接在 CSS 中使用 <code>scroll-margin-top</code>。这能有效避免标题被遮挡，且无需编写复杂的计算逻辑：</p>
<pre><code>/ 假设 Header 高度为 6rem /
[data-section] {
scroll-margin-top: 6rem;
}</code></pre>

<h2>如何确保多语言内容的读屏发音正确���</h2>
<p>在处理非英语内容（如泰卢固语）时，如果仅依赖浏览器的默认语言，读屏器会尝试用英语音标去朗读，导致发音完全错误。在实操中，必须为每个非英语标题明确标注 <code>lang</code> 属性，否则无障碍体验将大打折扣：</p>
<pre><code>&lt;h2 lang="te"&gt;నెయ్యి (Ghee)&lt;/h2&gt;</code></pre>

<h2>如何实现与滚动位置同步的导航状态？</h2>
<p>为了让用户知道当前“吃到哪了”，我建议使用 <code>IntersectionObserver</code> 监听目标区域。当区域进入视口时，动态更新导航项的 <code>aria-current="page"</code> 属性。这比单纯地给导航项加一个 <code>.active</code> 类名要专业得多，因为后者仅对视觉用户可见，而前者能直接告知读屏用户当前位置。</p>

<h2>如何通过媒体查询优化动画体验？</h2>
<p>对于复杂的 CSS 动画（如倾倒液体效果或平滑滚动），必须考虑对运动敏感的用户。我通常会在 CSS 中加入 <code>prefers-reduced-motion</code> 查询，彻底关闭不必要的过渡效果，避免引起用户不适：</p>
<pre><code>@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto !important;
}
.animation-element {
animation: none !important;
transition: none !important;
}
}</code></pre>

<h2>在精简功能时应砍掉哪些干扰项？</h2>
<p>为了保证纯粹的交互体验，我建议在此类艺术驱动的页面中剔除复杂的 Modal（模态框）。Modal 是键盘焦点管理最容易出错的地方（容易出现焦点逃逸）。如果功能可以通过简单的页面内锚点跳转实现，就不要使用弹出层。将页面结构简化为 <code>h1</code>（1个）和 <code>h2</code>（按顺序排列），让用户通过阅读标题就能感知全貌，而不是在复杂的 UI 组件中迷路。</p>
</article>