Lucide 中文网

Appearance

无障碍 ​

¥Accessibility

图标是无需文字即可表达含义的图片。它们非常有用，因为它们可以快速提供信息。

¥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.

提供可见标签 ​

¥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.

对比度 ​

¥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: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.

实际上，这并不一定意味着图标本身应该这么大，只有其交互性封装元素才允许。

¥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.

警告

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

¥In case some of your icons stand alone, and they serve a non-decorative function, make sure to provide the appropriate accessible label for them.

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. 你可以在它们旁边添加可见的描述，或者

    ¥you either add a visible description next to them, or

  2. 将它们放置在徽章、标签或按钮中，并至少为其添加工具提示。

    ¥place them in badges, labels or on buttons, and at least add a tooltip to them.

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

¥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.

代码示例
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.

代码示例
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>

示例 - Bootstrap ​

¥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: