和标签映射为删除(deletion)无障碍角色,标签映射为插入(insertion)角色。视觉用户能看到这些内容被划掉或加下划线,但屏幕阅读器对这些变更的播报支持并不一致。
根据W3C的可访问性API映射规范(Accessibility API Mappings),这些标签在程序层面被映射为特定的无障碍角色,浏览器将其暴露给操作系统的无障碍树。这些映射指示浏览器的无障碍引擎如何向辅助技术暴露语义。然而,屏幕阅读器的支持程度并不一致。
![]()
为弥补支持不足,应添加视觉隐藏文本(例如使用.sr-only类),为信息变化提供更多上下文。例如:
The meeting is on previous date:Mondaynew date: Wednesday.
通过将视觉隐藏文本设计为自然的上下文描述词(如"previous date:"和"new date:"),输出在所有辅助技术中将更加连贯和有意义。建议避免使用"deletion"和"insertion"这类冗余标签。
你可以使用标准CSS的text-decoration属性,自定义、和标签的视觉呈现,以匹配你的设计系统,同时定义一个工具类来隐藏屏幕阅读器的上下文标签。
为删除线和删除内容设置样式:
/* 单独定制 */s, del {text-decoration-line: line-through;text-decoration-color: #e06c75; /* 更改线条颜色 */text-decoration-style: wavy; /* double, dashed, wavy, solid */text-decoration-thickness: 1.5px; /* 更改线条粗细 *//* 或使用简写语法 */s, del {text-decoration: line-through #e06c75 wavy 1
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
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.