语义
- 动作用
<button type="button">,导航用<a href>。AkButton有href时自动渲染成<a>。 - 表单里的提交按钮显式写
type="submit";默认是button,避免意外提交。
名称
- 有文字的按钮,名称就是文字。
- 只有图标的按钮必须有名称:
AkButton只写icon、不写文字时label必填(漏写开发时控制台会警告),同时输出aria-label与title。CSS 实现里写<button class="ak-btn ak-btn--icon" aria-label="搜索">。 - 按钮里的装饰图标
aria-hidden="true"(AkIcon不传label时自动加)。
状态
| 状态 | 输出 |
|---|---|
| 禁用 | <button disabled>;链接形态用 aria-disabled="true" 并去掉 href(<a> 没有 disabled) |
| 加载中 | aria-busy="true",并不可点(pointer-events: none) |
| 按钮组 | 组上 role="group",一组有意义的动作时加 aria-label(AkButtonGroup 的 label) |
键盘与焦点
Tab聚焦,Enter/Space触发(原生<button>行为)。- 焦点环:
2px solid var(--ak-focus)、外偏 2px,两套主题下对比都足够;不要去掉outline。
对比度与尺寸
- 大号 UI 文字 / 按钮 ≥ 3:1(见可访问性 · 对比度);各变体在两套主题下都满足。
- 触控目标 ≥ 36px(默认高度);
xs/sm只用在密集的桌面表格里。
