无障碍不是加分项
视障用户靠读屏软件听界面,运动障碍用户靠焦点逐格导航,老年用户需要更大的字。无障碍做得好,应用不只是对特殊人群友好,而是对所有人都更易用。
好的无障碍,本质是把信息讲清楚、把操作做明白。
这篇把鸿蒙无障碍与适老化的要点过一遍。
内容描述与语义
每个可交互元素都要有可读的描述。图标按钮不写文字,读屏软件就不知道它是干嘛的。给它加无障碍标签,让读屏能念出来。
Image($r('app.media.icon'))
.accessibilityText('返回上一页')
一个图标按钮,从此有了能被念出来的名字。
焦点管理与键盘导航
不能触屏操作的用户靠焦点逐格移动。焦点顺序要符合视觉逻辑,别跳来跳去。每个可交互元素都要能被聚焦、有明显的焦点高亮。
无障碍速查
- 描述每个图标按钮有可读标签。
- 焦点顺序合理、高亮明显。
- 字号随系统缩放不溢出。
- 对比文字与背景足够清晰。
大字体与缩放
用户把系统字体调大,你的界面就得跟着撑开,不能把字截断或重叠。用自适应布局别写死尺寸,字体走相对单位。
对比度与色彩
浅灰字配白底,正常人看着都费劲,色弱用户更看不清。文字与背景对比度要够,别只靠颜色区分状态——错误提示除了红色再加个图标或文字。
适老化:更大更清晰
适老化是无障碍的延伸:更大的点击热区、更少的步骤、更直白的文案。把复杂操作拆简单,把常用功能放大到首屏。
- 点击热区别太小。
- 文案直白不堆术语。
- 关键操作一步到位。
实战:给一个图标按钮加无障碍
一个纯图标返回按钮,加上描述与焦点。
Image($r('app.media.back'))
.accessibilityText('返回')
.focusable(true)
.onClick(() => router.back())
读屏软件念出「返回」,焦点能框到它。无障碍做到这份上,应用才算真正对所有人开放。