Lucide 中文网

Appearance

深入的无障碍性 ​

🌐 Accessibility in depth

图标是用来表示某物意义的图片，而不使用文字。它们非常有用，因为它们可以快速提供信息。

🌐 Icons are pictures that show what something means without using words. They can be very helpful because they can quickly give information.

然而，并非每个人都能轻易理解它们。在使用图标时，非常重要的是要考虑以下可访问性方面。

🌐 However, not everyone can understand them easily. When using icons it is very important to consider the following aspects of accessibility.

INFO

默认情况下，我们使用 aria-hidden="true" 将图标从屏幕阅读器中隐藏。你可以按照以下指南自行使它们可访问。

提供可见标签 ​

🌐 Provide visible labels

图标是提升感知力的有效工具，但不能替代文本。

🌐 Icons are a helpful tool to improve perception, but they aren't a replacement for text.

在大多数情况下，提供图标功能的文本表示可能也是一个好主意。

🌐 In most cases, it is probably a good idea to also provide a textual representation of your icon's function.

In short: Don’t rely on communicating the function of elements by icons alone. Do also provide a written description of the your interactive elements. For example: write out "On this page" on your on-page navigation element.Don't rely on communicating thefunction of elements by icons alone.Do also provide a written descriptionof your interacive elements.

对比度 ​

🌐 Contrast

确保图标与其背景之间有足够的对比度，以便低视力或色觉障碍的人能够看见。

🌐 Ensure there's enough contrast between the icon and its background so that it's visible to people with low vision or color vision deficiencies.

我们建议遵循 WCAG 2.1 SC 1.4.3。

🌐 We recommend following WCAG 2.1 SC 1.4.3.

In short: use a contrast ratio of at least 4.5:1Don't use low contrast. Do use a contrast ratio of at least 4.5:1.

颜色使用 ​

🌐 Use of color

避免仅依靠颜色来传达图标的含义，因为一些用户可能有色盲。相反，可以使用额外的视觉提示，如形状、阴影或文字。

🌐 Avoid relying solely on color to convey meaning in icons, as some users may have color blindness. Instead, use additional visual cues like shape, shading or text.

For example: Don’t mark state with color, mark it with distinct visuals.

交互性 ​

🌐 Interactivity

确保互动图标可以通过键盘导航访问，并在激活时提供清晰的反馈。

🌐 Ensure that interactive icons are accessible via keyboard navigation and provide clear feedback when activated.

在大多数情况下，只需将它们封装在图标按钮中即可轻松实现。

🌐 In most cases this is easily done by wrapping them in icon buttons.

最小目标尺寸 ​

🌐 Minimum target size

小目标可能很难点击或触摸，如果你的图标是可交互的，我们建议它的最小目标尺寸应为44×44像素。

🌐 Small targets can be difficult to click or touch, if your icon is interactive, we recommend that it should have a minimum target size of 44×44 pixels.

Example of using target size correctly

在实际操作中，这并不一定意味着图标本身应该如此大，只是它的交互封装元素。

🌐 In practice, this doesn't necessarily mean that the icon itself should be this large, only its interactive wrapper element.

意义 ​

🌐 Meaningfulness

图标应以普遍可理解的方式表示概念或操作。避免使用抽象的、模糊的或特定文化的符号，这些可能会使某些用户感到困惑。

🌐 Icons should represent concepts or actions in a universally understandable way. Avoid using abstract or ambiguous, or culture-specific symbols that might confuse some users.

For example: Use universally understandable symbols and don't base your choice of icon on puns.

一致性 ​

🌐 Consistency

在整个界面中保持图标设计和使用的一致性，以帮助用户更容易学习和理解其含义。

🌐 Maintain consistency in icon design and usage across your interface to help users learn and understand their meanings more easily.

For example: Don’t use the same icon for multiple distinct purposes or meanings. Don’t use different icons for the same purpose or function.

文本替代项 ​

🌐 Text Alternatives

你可能需要为图标提供文本标签或替代文本描述，尤其是用于视觉障碍人士的屏幕阅读器。

🌐 You may have to provide text labels or alternative text descriptions for icons, especially for screen readers used by people with visual impairments.

然而：描述应仅提供给非纯装饰性的独立图标，因为为非功能性元素提供可访问名称只会在使用屏幕阅读器时增加干扰。

🌐 However: descriptions should only be provided to standalone icons that aren't purely decorative, as providing accessible names to non-functional elements only increases clutter when using screen readers.

独立图标 ​

🌐 On standalone icons

图标通常很难单独存在而没有语义上有意义的封装元素。在大多数情况下，它们将成为徽章、按钮（包括图标按钮）、导航项或其他交互式 UI 元素的一部分。

🌐 Icons are usually very unlikely to stand on their own with no semantically meaningful wrapper element. In most cases they will be part of a badge, button (including icon buttons), navigation item or other interactive UI element.

WARNING

如果你的一些图标是独立存在的，并且它们具有非装饰性功能，请确保为它们提供适当的可访问标签。

In short: provide accessible label for semantic icons, but not for decorative icons.

一般来说，尽量避免使用没有交互性的功能性图标，我们建议：

🌐 In general try to avoid using functional icons with no interactivity, we recommend that:

  1. 你可以在它们旁边添加可见的描述，或者
  2. 将它们放在徽章、标签或按钮上，并至少为它们添加一个工具提示。

在任何此类情况下，建议只为这些交互元素（徽章、按钮、导航项等）提供可访问名称，而不是为图标本身提供。

🌐 In any such case, it is preferred that the accessible name be provided for these interactive elements (badges, buttons, nav items etc.) only, not the icons themselves.

按钮 ​

🌐 On buttons

当图标用于按钮时，不要为其提供可访问标签，因为屏幕阅读器会读取该标签，从而导致文本毫无意义。

🌐 Do not provide an accessible label to icons when used on a button, as this label will be read out by screen readers, leading to nonsensical text.

Don't provide accessible labels todecorative icons.Do omit aria-label on decorative icons.
代码示例
tsx
// Don't do this
<button>
  <Plus aria-label="Plus icon"/>
  Add document
</button>

// Do this, just leave it
<button>
  <Plus/>
  Add document
</button>

图标按钮 ​

🌐 On icon buttons

图标按钮是指除了图标本身之外不包含任何可见文本的按钮（例如对话框的关闭按钮）。

🌐 Icon buttons are buttons that do not contain any visible text apart from the icon itself (think of the close button of a dialog for example).

如前所述，你应在图标按钮本身上提供可访问标签，而不是在包含的图标上提供。

🌐 As previously stated, you should provide your accessible label on the icon button itself, not the contained icon.

Don't provide accessible labels foricons on icon buttons.
代码示例
tsx
// Don't do this
<button class="btn-icon">
  <House/>
</button>

// Don't do this either
<button class="btn-icon">
  <House aria-label="Home icon"/>
</button>

// This works but might not be the best solution, see below
<button aria-label="Go to home" class="btn-icon">
  <House/>
</button>

// Do this instead
<button class="btn-icon">
  <House/>
  <span class="visually-hidden">Go to home</span>
</button>

aria-label 的说明 ​

🌐 A note on aria-label

虽然你可以通过 aria-label 属性为你的元素提供可访问的标签，但我们通常建议避免这样做，而是建议你尽可能使用所选择的 CSS 框架的“视觉隐藏”工具。你可以阅读更多关于为什么 aria-label 可能不是最佳解决方案的信息。

🌐 Although you could provide accessible labels to your elements via the aria-label attribute, we generally recommend avoiding this and instead suggest that you use your chosen CSS framework's " visually hidden" utility whenever possible. You can read more about why aria-label might not be the best solution.

示例 - Radix UI ​

🌐 Example - Radix UI

使用 Radix UI 内置的可访问图标工具组件。

🌐 Use Radix UI's built-in accessible icon utility component.

tsx
import { ArrowRightIcon } from 'lucide-react';
import { AccessibleIcon } from '@radix-ui/react-accessible-icon';

<AccessibleIcon label="Next item">
  <ArrowRightIcon />
</AccessibleIcon>

示例 - 引导程序 ​

🌐 Example - Bootstrap

html

<div>
  <i data-lucide="phone" aria-hidden="true"></i>
  <span class="visually-hidden">Phone number</span>
</div>

示例 - Tailwind CSS ​

🌐 Example - Tailwind CSS

html

<div>
  <i data-lucide="phone" aria-hidden="true"></i>
  <span class="sr-only">Phone number</span>
</div>

如果你不确定，你可以考虑了解更多关于如何隐藏内容的信息。

🌐 If you're not sure, you may consider learning more about how to hide content.

更多资源 ​

🌐 Further resources

我们还建议你查看以下有关可访问性的资源：

🌐 We also recommend checking out the following resources about accessibility: