如何为按钮标签内的图标编写替代文本？

Question

我正在使用反应，我有一个带有删除操作列的表。 我在每一行中显示一个删除按钮，并希望为整个按钮设置 alt 文本，但我不确定如何执行此操作，因为没有 alt 选项。 我尝试了下面的代码，但它不起作用。 我知道我做得不对，所以我需要一些指导。

另外，我正在为我的图标使用 iconify 库。

const renderDelButton = () => {
  return (
    <Link to="/someLink">
      <button className="delete-btn" aria-label="Delete" title="Delete this criteria">
        <Icon icon="gg:trash-empty" inline={true} width={15} height={15} alt="Delete this criteria"/>
      </button>
    </Link>
  )
}

Answer 1

在button元素上使用aria-label就足够了。

您应该从Icon元素中删除alt属性。 如果它不呈现给img元素，那么它无论如何都不是有效的 HTML。

aria-label不仅在可访问名称计算中优先于title属性，而且还享有更好的浏览器支持。