无障碍

🌐 Accessibility

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

🌐 Lucide icons ship with aria-hidden="true" by default. In almost all cases this is exactly what you want.

图标应该可访问吗？

🌐 Should icons be accessible?

大多数情况下，图标纯粹用于装饰或视觉强化。将装饰性图标暴露给辅助技术可能会给屏幕阅读器用户造成不必要的干扰。

🌐 Most of the time, icons are used purely for decoration or visual reinforcement. Exposing decorative icons to assistive technologies can create unnecessary noise for screen reader users.

有关这一点以及在应用中如何无障碍使用图标的其他最佳实践的更详细说明，请参阅我们关于无障碍的详细指南：

🌐 For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility:

无障碍图标Best practices for accessible icons in your application.

只有当一个图标自身传达重要意义时，才应使其可访问。下面的部分将解释如何在 React 中实现这一点。

🌐 Only if an icon conveys essential meaning on its own should it be made accessible. The sections below explain how to do that in React.

使图标可访问

🌐 Making an icon accessible

为了向辅助技术公开图标，请通过将 title 元素作为子元素传递或将 aria-label 属性传递给图标组件来提供可访问名称。

🌐 To expose an icon to assistive technologies, provide an accessible name by passing a title element as a child or passing the aria-label prop to the icon component.

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

🌐 This removes the aria-hidden attribute and makes the icon visible to screen readers.

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

// or

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

选择一个清晰描述图标含义或其在应用中所代表的操作的标签。

🌐 Choose a label that clearly describes the meaning of the icon or the action it represents in the context of your application.

可访问图标按钮

🌐 Accessible icon buttons

当图标被用于按钮内时，可访问标签通常应应用于按钮本身，而不是图标。

🌐 When an icon is used inside a button, the accessible label should usually be applied to the button itself, and not the icon.

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

这确保了辅助技术能够描述交互式元素，而不是其中的装饰性图形。

🌐 This ensures assistive technologies describe the interactive element, rather than the decorative graphic inside it.