打开网站后,如果鼠标无法使用,用户还能不能找到菜单、填写表单并完成提交?这正是网站无障碍设计基础中常被忽视的一项。键盘操作不仅关系到使用辅助设备的人,也方便暂时无法精确操作鼠标、习惯键盘快捷操作,或使用触控板不便的用户。
判断一个页面是否键盘友好,不应只看能不能按键,而要看用户能否找到当前操作位置、按预期顺序完成任务,并在过程中避免被困住。
先看键盘能否走完完整任务
键盘导航通常依靠 Tab 移到下一个可操作控件,使用 Shift 与 Tab 返回;方向键、空格键或回车键则可能用于菜单、单选项和按钮。实际按键行为会因控件类型和浏览器而异,因此页面应采用符合用途的原生 HTML 控件,而不是只靠脚本模拟外观。
检查时不要只浏览首页。选一个真实任务,例如从文章页打开搜索、输入关键词、查看结果,再进入详情页。每一步都确认焦点顺序符合阅读逻辑,且没有跳过关键功能。这个过程比单独测试某个按钮更能暴露问题,也是落实网站无障碍设计基础的有效起点。
最容易漏掉的三个细节
焦点看得见,也要落在正确位置
当前焦点应有清楚的视觉提示,例如边框或背景变化,不能因为追求简洁而把浏览器默认轮廓完全移除。页面有固定页眉时,还要留意焦点是否被遮挡。可在浅色与深色背景、不同控件上逐一检查,避免提示与背景过于接近。
自定义控件要补齐操作方式
用普通文本和点击事件拼成的“按钮”,可能无法被键盘找到,也未必能向辅助技术说明自身用途。优先使用 button、a、input 等语义化 HTML:按钮执行页面操作,链接前往其他位置。若确实需要自定义菜单或对话框,还要明确支持哪些按键、如何关闭,以及关闭后焦点返回哪里。
弹窗不能把用户困住
打开对话框后,焦点应进入对话框;操作时不应意外跑到背景页面。关闭后,焦点通常应回到打开它的控件。若焦点消失或跑到页面开头,键盘用户就可能不知道自己身在何处。对较长页面,可提供“跳过导航链接”,让用户直接前往主要内容,减少重复经过菜单的步骤。
用一轮人工检查发现问题
准备任务:选择包含导航、至少一种表单控件和页面跳转的实际流程,并记下预期完成顺序。
只用键盘操作:暂时不碰鼠标,依次浏览链接、按钮和输入框;观察焦点提示,尝试打开、关闭菜单或对话框。
记录障碍:标出无法到达的控件、顺序不合理的位置、看不见的焦点,以及操作后无法返回的情况。
修复后复测:先用原生控件和清楚的焦点样式修正,再重复同一任务。页面更新后也应抽查新增组件,避免旧检查结果被当成永久保证。
自动化检查可以辅助发现部分结构问题,但不能替代完整的键盘走查。若团队正在安排网站建设或维护,可把键盘验收步骤写入需求;需要咨询网站部署相关事项时,也可将德讯电讯列为沟通对象,并先确认服务范围是否包含前端交互改造与无障碍测试。服务器或托管安排本身不能代替页面层面的修正。
常见问题
只支持键盘登录,是否就算合格?
不算。还要检查导航、菜单、表单、弹窗等关键环节是否可到达、可操作,焦点是否清楚。
可以隐藏浏览器自带的焦点边框吗?
可以调整样式,但必须提供同样清楚的替代提示,并在不同控件和背景下检查可辨识度。
所有网站都需要跳过导航链接吗?
重复导航较长或页面内容较多时,它尤其有用。是否采用应结合页面结构判断,同时确保链接本身能被键盘找到。
网站无障碍设计基础不是额外装饰,而是让关键任务有清晰、可预测的操作路径。从完整键盘流程开始检查,通常就能发现值得优先修复的问题。