内容与aria-label值重复时，能否使用aria-label实现CSS样式？

我在<span>标签里添加了aria-label属性，它的值和标签的文本内容完全一致，都是变量$order->status的取值：

<span aria-label="{{ $order->status }}" class="ui-badge">{{ $order->status }}</span>

我知道如果元素文本内容已经满足需求，就不需要使用任何ARIA属性，但这里用aria-label能让CSS写法更简洁清晰，不用新建类或者采用BEM的--flag语法，直接针对不同状态设置样式：

&[aria-label="Pago"] {
  background-color: $green;
}

想问这种情况是否允许使用aria-label？

这种用法不推荐，甚至不符合无障碍设计规范，原因如下：

• ARIA属性的核心定位是为屏幕阅读器等无障碍工具提供语义补充，本质是服务于无障碍访问，并非用来做CSS选择器的工具。
• 当aria-label与元素可见文本完全一致时，属于冗余内容，屏幕阅读器可能会重复朗读这段文本，反而给视障用户造成干扰，破坏无障碍体验。
• 要实现通过状态值编写CSS的需求，正确的做法是使用专门的自定义数据属性，比如data-status：

  <span data-status="{{ $order->status }}" class="ui-badge">{{ $order->status }}</span>
  

  对应的CSS写法：

  &[data-status="Pago"] {
    background-color: $green;
  }
  

  数据属性就是为存储自定义状态或信息设计的，既不会对无障碍功能产生负面影响，也能达到你想要的简洁CSS写法。

内容的提问来源于stack exchange，提问作者Bernardo Benini Fantin