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

原文作者Vimala把妈妈的周日餐画成了一片香蕉叶，然后让这片叶子同时充当落地页的导航。点击叶子上的菜，页面滚到对应的course；滚动页面，导航跟着你按上菜顺序走。ghee最先，perugu最后，服务器的顺序就是页面结构的顺序。

一、先定序，再谈设计

大多数落地页都是从零编一套信息架构，这道菜天然就带架构：在香蕉叶上，摆盘顺序本身就是信息。neyyi必须在任何东西之前上，perugu永远收尾。这个"协议"比CSS grid早三十年，作者要做的是别把它搞坏。

落地页就是在原有的CSS Art作品上加了 data-section 和一小段脚本：点一下盘子，显示泰卢固语的菜名，然后平滑滚动到那个course并转移焦点。艺术和页面共享同一套视觉语言，因为它们本来就是同一份代码。

二、焦点管理才是a11y的日常

读屏用户跟着进食顺序走，不是"也能用"，而是服务方式一致：

• h1一个，h2八个，按上菜顺序排。只读标题就等于吃完整顿饭
• 每个泰卢固语标题都带 lang="te"，不然读屏器会按英语音标念出泰卢固语——作者原话：我妈不会原谅那个发音
• 叶子导航跳转后，焦点必须移到目标course（tabindex="-1"）。只把视障用户滚过去、键盘用户留在原地，那不叫导航
• IntersectionObserver加 aria-current 暴露"你吃到哪了"，不是光画个高亮
• scroll-margin-top 防止sticky header吞掉刚跳转过去的标题

动手试了一下加上这行就能省掉不少tabindex的头痛：

[data-section] {
  scroll-margin-top: 6rem;
}

三、动画也尊重用户

prefers-reduced-motion 同一个媒体查询里关掉平滑滚动和ghee倾倒动画。平静就该是彻底的平静。

最狠的是砍功能。没有菜单卡、没有预约表单、没有画廊、没有modal。作者说得很直白：modal是键盘体验通常死掉的地方。一个虚构的订位表单有什么资格挡在用户和食物之间？

看完最大的收获不是CSS技巧，是这个顺序：先把无障碍决策做了，再做视觉决策。多数项目是反过来——视觉定稿，最后拿a11y当审计跑一遍，改起来全是补丁。这次她让a11y决定heading结构、决定滚动行为、决定砍掉什么。

一顿饭被吃掉了，页面也读懂了。