Code du Travail Numérique项目中清除按钮的无障碍优化实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_07787/article/details/148271292

Code du Travail Numérique项目中清除按钮的无障碍优化实践

code-du-travail-numerique Code du Travail Numérique 项目地址: https://gitcode.com/gh_mirrors/co/code-du-travail-numerique

在Code du Travail Numérique项目的"查找集体协议"功能模块中，开发团队发现了一个关于清除选择按钮的无障碍访问问题。这个按钮在CSS禁用情况下会完全消失，导致功能不可用，违反了网页内容无障碍指南(RGAA)的要求。

问题分析

清除选择按钮最初是通过CSS伪元素(::after)生成的，按钮文本仅通过title属性提供。这种实现方式存在两个主要缺陷：

当浏览器禁用CSS时，按钮会完全消失，用户无法找到清除功能
屏幕阅读器用户可能无法正确识别按钮的用途，因为title属性的支持性不一致

解决方案评估

团队考虑了两种主要解决方案：

文本+视觉隐藏方案：在按钮元素中添加实际文本内容，同时使用"sr-only"类确保文本仅对屏幕阅读器可见，不影响视觉设计
图标+替代文本方案：使用img或svg元素实现图标，并为其提供适当的alt文本描述

经过评估，团队选择了第一种方案，因为：

实现更简单，不需要额外资源
对屏幕阅读器的支持更可靠
维护成本更低

技术实现细节

最终实现采用了以下HTML结构：

<button type="button" class="clear-selection">
  <span class="sr-only">清除选择</span>
</button>

配合CSS样式：

.clear-selection {
  /* 原有按钮样式 */
}

.clear-selection::after {
  content: "×"; /* 视觉上的清除图标 */
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}