无障碍

Lucide 图标默认带有 aria-hidden="true"。在几乎所有情况下，这正是你想要的。

图标应该具备无障碍性吗？

大多数时候，图标纯粹用于装饰或视觉强化。将装饰性图标暴露给辅助技术可能会为屏幕阅读器用户制造不必要的噪音。

关于这方面的更广泛解释，以及如何在应用程序中以无障碍方式使用图标的其他最佳实践，请参阅我们关于无障碍性的详细指南：

无障碍图标在应用程序中使用无障碍图标的最佳实践。

只有当图标本身传达基本含义时，才应使其具备无障碍性。下面的部分解释了如何在 Vue 中做到这一点。

使图标具备无障碍性

要将图标暴露给辅助技术，请通过传递 title 元素作为子元素或将 aria-label 属性传递给图标组件来提供无障碍名称。

这将移除 aria-hidden 属性并使图标对屏幕阅读器可见。

<House>
  <title>This is my house</title>
</House>

// 或

<House aria-label="This is my house" />

选择一个能清晰描述图标含义或其在你应用程序上下文中所代表操作的标签。

无障碍图标按钮

当图标在按钮内部使用时，无障碍标签通常应应用于按钮本身，而不是图标。

<button aria-label="Go to home">
  <House />
</button>

这确保辅助技术描述交互元素，而不是其内部的装饰性图形。