博客
文章无障碍3 分钟阅读

模态对话框的审查,从打开之前就开始

关闭状态、焦点移动、错误恢复和返回路径都很重要。只看对话框打开时的截图,无法覆盖完整交互。

作者 设计审查团队

从触发操作开始检查

以重命名已保存项目的对话框为例。用键盘找到触发控件并激活它。检查控件标签是否说明了操作,对话框是否有能说明用途的无障碍名称。面板即使视觉上很清楚,缺少这些关联时仍可能难以理解。

初始焦点应适合对话框内容。简短的重命名对话框可以把焦点放在输入框;内容较长的对话框可能需要先让用户了解阅读上下文。不要假定每种设计都应该把焦点放在第一个按钮上。

检查对话框内的焦点移动

模态对话框打开时,背景内容不应继续接受交互。用键盘向前和向后移动焦点,并确认焦点始终留在对话框内,不会跑到被遮住的页面中。

截图无法证明这些行为正确。应检查实际交互,包括是否有清楚的关闭方式。实现时参考 W3C 的对话框模式,并结合整个页面的上下文评估相关无障碍要求。

尝试提交无效内容

提交一个空的项目名称。用户能否找到错误说明,并回到相关输入框,同时保留其他有效内容?错误信息应说明需要如何修正;仅仅显示红色边框并不能提供这种指引。

对于具有破坏性的操作,要结合上下文检查操作标签。“删除项目”比“确认”表达得更清楚。文案、焦点选择和取消路径都应帮助用户审慎决策,而不能只依赖警示颜色。

返回到合理的位置

关闭重命名对话框后,焦点通常应返回打开它的控件。如果操作删除了该控件或整个项目,就应选择一个合理位置,让用户能继续操作。把焦点送回页面开头,可能会让刚完成的操作变得令人迷失。

记录检查过的完整流程:打开、导航、提交无效内容、恢复、完成并返回。这样得到的是具体的交互发现,而不是仅凭默认外观正确就笼统断言对话框无障碍。

参考资料与延伸阅读

继续学习

使用 Design Audit 探索您的网站

提交 URL,让下一次审阅变成有针对性的行动计划。