SuperAPI AI 工具集

cometchat-a11y

设计与创作

查看项目

更新于 10-15 20:14

技能介绍

用途:在 CometChat 应用中做无障碍审查与修复,适用于 WCAG、Section 508、ADA、EN 301 549 等合规场景,或处理键盘、屏幕阅读器投诉。公共部门、教育、医疗与大型企业采购常要求此项。

主要能力:CometChat UI Kit 组件按 WCAG 2.1 Level AA 设计目标构建,内置键盘操作与焦点处理,Web 端自带 ARIA 角色与名称(会话/用户列表呈现为带标签的 listbox 并管理 roving focus),不要覆盖或剥离。文档自身提示完全合规仍需人工测试,AA 是设计目标而非认证保证。本技能负责 Kit 无法控制的宿主侧规范。

使用方式(宿主侧检查清单): 键盘:所有路径可用键盘到达与操作(打开会话、输入、发送、打开话题、关闭);不要困住焦点,面板/对话框关闭后合理返回焦点;不要移除焦点轮廓。 屏幕阅读器:聊天容器需有尺寸且带可访问名称;自己添加的按钮要有标签,不能只有图标;验证新消息的 live-region 行为,不要用 aria-hidden 屏蔽。 对比度:自定义主题时文本对比度保持 4.5:1、大文本/UI 为 3:1,明暗两套主题都要检查。 减弱动效:遵循 prefers-reduced-motion(Web)或系统减弱动效设置(原生)。 缩放:200% 缩放与大号动态字体下仍可用。 RTL:适配从右到左语言,可与 cometchat-i18n 配合。 触控目标:自定义控件满足最小触控尺寸。 通话场景:清晰提示并说明摄像头/麦克风请求原因,为自加的静音、挂断、摄像头控件提供标签,如来电界面需被播报且可键盘/辅助技术操作。

测试:Web 端用 axe/Lighthouse 扫描聊天页面,修复对比度、缺失名称与 ARIA 误用;自动化只能发现约三分之一问题,需手动 Tab 走查、用 VoiceOver/NVDA/TalkBack 操作、放大到 200%、切换减弱动效与暗色。修复自己接线中的问题;若确为组件缺口,对照组件文档核实并报告,不要直接改 Kit 内部。

常见陷阱:全局 CSS 卸掉 .cometchat 内的焦点环或对比度;仅有图标且无名称的自定义按钮;容器无标签、折叠或不可达;动画忽略减弱动效;只在一个主题下检查对比度;误以为自动化工具足够。

限制:具体命令、安装方式与平台细节资料暂未提供。