适老化规范

胶膳师的顾客里有很多长辈，子女也常常把手机递给父母看。以下是底线，所有界面必须满足，组件库默认已经满足。

五项硬指标

项目	要求	令牌
正文字号	不小于 16px（小程序 32rpx）	--jss-font-size-body
辅助说明字号	不小于 14px，不允许更小	--jss-font-size-caption
价格字号	不小于 20px，常用 22px	--jss-font-size-price
点击区域	不小于 44 × 44px	--jss-touch-target
文字对比度	正文不低于 4.5 : 1，24px 以上大字不低于 3 : 1	构建时自动检查

写法要求

• 一屏只讲一件事，按钮文字写清动作：「预约考察」而不是「提交」。
• 表单输入框字号 16px 以上（低于 16px 时 iPhone 会自动放大页面）。
• 错误提示写在输入框正下方，用「叉号图标 + 文字」，不只是把边框变红。
• 不用纯图标按钮；必须用时加文字或 aria-label。
• 不用细体字，不用浅灰字写正文。
• 金汤金不作文字色；金色底上的字用深酱棕。
• 动效时长不超过 400ms，不做闪烁和自动轮播过快的效果。

开发自检

在浏览器控制台运行：

import { auditA11y } from '@jiaoshanshi/ui'
auditA11y(document.body)  // 列出字号过小、点击区域过小、对比度不足的元素

试一试：检查下面这块区域

长辈模式（建议）

页面可以提供「大字模式」开关，打开后在根元素加 data-elder，把正文切到 18px、价格切到 28px：

[data-elder] {
  --jss-font-size-body: 18px;
  --jss-font-size-caption: 16px;
  --jss-font-size-price: 28px;
}