为div设置button角色后包含语义后代元素的语义正确性及lint报错原因咨询

嘿，这个问题其实涉及到ARIA角色模拟的核心规范，我来给你理清楚：

首先，lint报错的原因是ARIA规范对自定义可交互角色的“语义纯净性”有严格要求，具体来说：

• 当你给<div>加上role="button"，你是在告诉屏幕阅读器等辅助技术：“这个元素是一个单一的、完整的可交互按钮控件”。按照ARIA的最佳实践，这类模拟的交互控件，不应该包含有独立语义的子元素——因为这会让辅助技术产生混淆：到底这个元素是一个按钮，还是按钮内部还有另一个可被识别的独立内容？
• <img>属于HTML语义化元素，哪怕它带有alt文本，它本身也会被辅助技术识别为“图像”类型的内容，属于“语义后代”，这就直接违反了自定义role="button"元素的语义纯净要求，所以lint工具会抛出错误。

你可能会问：那为什么原生<button>标签里可以放<img>？这是因为原生<button>是HTML规范定义的原生交互控件，它的语义本身就是“可包含内容的按钮容器”，浏览器和辅助技术已经默认理解这种结构：整个<button>是一个交互控件，内部的文本、图像都是按钮的标签内容，不会被解析为独立的语义元素。但用<div role="button">模拟按钮的情况不同，ARIA对这种“非原生模拟控件”的约束更严格，目的是避免辅助技术解析混乱。

最后给你两个解决这个问题的实用方案：

• 方案1：如果一定要用<div role="button">，把<img>改成CSS背景图，这样HTML结构里只有纯文本的子元素，没有语义化的<img>后代，比如：

  <div role='button' style="background-image: url('./assets/images/icons/arrow_outward.svg'); background-repeat: no-repeat; padding-right: 20px;">
    Read Now
  </div>
  

• 方案2：优先使用原生<button>标签，这是最优解！原生按钮不仅支持内部放文本和<img>，还自带键盘交互（回车、空格触发点击）、焦点管理等可访问性特性，不需要自己额外写JS处理，lint也不会报错。示例代码：

  <button>
    <span>Read Now</span>
    <img src='./assets/images/icons/arrow_outward.svg' alt='arrow-upward-black' />
  </button>
  

内容来源于stack exchange