![]()
全球15%的人口存在某种形式的残障,但你的React应用可能从未为他们设计过。这不是道德审判,是产品漏洞。
语义化HTML不是"锦上添花",是React组件的地基。当你用div堆砌导航栏时,屏幕阅读器用户听到的只是一串无意义的"div, div, div"。
本文用一组真实代码对比,展示如何把"能跑"的组件改成"谁都能用"的组件。没有框架迁移,没有重构噩梦,只有标签的精准替换。
01|导航栏的"身份危机":div vs nav
这是某电商后台的真实代码片段。开发者用div实现了完整的顶部导航,视觉上毫无问题,直到测试团队打开屏幕阅读器。
「我听到的是'div,链接,div,按钮,div',完全不知道这是导航区域。」一位视障测试员在反馈中写道。
问题出在语义缺失。div对辅助技术而言是透明容器,而nav标签会明确告知"这是一个导航地标"。
改造只需一步:把外层div换成nav,内部链接保持原样。屏幕阅读器用户现在能听到"导航,链接列表,首页",并可通过快捷键直接跳转到该区域。
ARIA角色(Accessible Rich Internet Applications,无障碍富互联网应用角色)是补救方案,但原生语义标签永远是第一选择。nav、main、aside、footer这些HTML5元素,在React中直接可用,零学习成本。
02|按钮的"伪装游戏":为什么onClick不能滥用
React开发者喜欢用div+onClick模拟按钮。样式自由,行为可控,看起来是双赢。
直到你尝试用Tab键聚焦它——失败。用Enter键激活——失败。屏幕阅读器播报——"文本,可点击",而非"按钮"。
键盘导航是无障碍的底线。原生button标签自带焦点管理、键盘事件、角色声明,div需要手动补齐全部功能:
tabIndex="0"让元素可聚焦,onKeyDown捕获Enter/Space,role="button"声明身份,aria-pressed处理状态。四行代码,四个可能遗忘的漏洞。
更隐蔽的问题是事件委托。div模拟的按钮在事件冒泡、表单提交、禁用状态等场景下行为不一致,调试成本远超样式覆盖的工作量。
一个原则:能点的东西,先看是不是button;不是button,再写aria。
03|响应式断点:从"设备优先"到"内容优先"
传统响应式设计以设备为锚点:iPhone 375px,iPad 768px,桌面1024px。这种思路在React组件库时代已经过时。
内容决定断点。侧边栏在320px时折叠,不是因为"手机",而是因为"内容挤爆了"。
CSS容器查询(Container Queries)让组件自主响应父容器宽度,而非视口宽度。一个卡片组件在侧边栏内是垂直布局,在主内容区是水平布局,无需props传递设备类型。
React中配合useRef和ResizeObserver(尺寸变化观察者)可实现容器查询的polyfill。代码量不大,但彻底解耦了组件与设备假设。
图片响应式常被忽视。srcset属性让浏览器根据DPR(Device Pixel Ratio,设备像素比)和视口自动选择分辨率,避免移动端加载4K图浪费流量,或桌面端模糊失真。
04|表单的无障碍陷阱:label不是装饰品
placeholder替代label是高频错误。灰色提示文字在输入后消失,认知负荷用户、记忆障碍用户、屏幕阅读器用户同时陷入困境。
正确做法:label始终可见,通过htmlFor与input的id绑定。视觉上需要极简风格?用sr-only类隐藏,但保留DOM关联。
错误提示需要三重反馈:边框色变(视觉)、图标变化(认知)、aria-live区域播报(听觉)。React中可用useId生成唯一标识,避免服务端渲染的id冲突。
焦点管理是表单的最后防线。提交后错误字段自动聚焦,模态框关闭后焦点返回触发按钮,这些细节决定产品是否"能用"与"好用"。
05|测试:自动化工具能抓多少漏洞
axe-core可以集成到Jest测试流,在CI阶段拦截对比度不足、缺失label、错误ARIA等基础问题。但它测不出"这个流程对自闭症用户是否友好"。
真实用户测试不可替代。招募残障用户参与可用性测试,成本远低于诉讼赔偿或品牌损失。微软、苹果的无障碍团队规模,本质是风险管理的数字换算。
浏览器开发者工具的Lighthouse(性能与质量检测工具)评分是起点,不是终点。90分以上的网站仍可能有致命的键盘陷阱。
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.