Lucide 中文文档

Appearance

可访问性 ​

图标是无需使用文字就能表示含义的图片。它们非常有用，因为它们可以快速传达信息。

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

提供可见标签 ​

图标是改善感知的有用工具，但它们不能替代文本。

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

简而言之：不要仅依赖图标来传达元素的函数。还要提供交互元素的书面描述。例如：在页面内导航元素上写出“在此页面”。

对比度 ​

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

我们推荐 遵循 WCAG 2.1 SC 1.4.3。

简而言之：使用至少 4.5:1 的对比度比率

颜色的使用 ​

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

例如：不要用颜色标记状态，而是用明显的视觉标记。

交互性 ​

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

在大多数情况下，这可以通过将它们包装在图标按钮中轻松实现。

最小目标大小 ​

小目标难以点击或触摸，如果你的图标是交互式的，我们推荐其最小目标大小为 44×44 像素。

在实践中，这并不一定意味着图标本身应该这么大，只是其交互包装元素。

有意义性 ​

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

例如：使用普遍可理解的符号，不要基于双关语选择图标。

一致性 ​

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

例如：不要将同一个图标用于多个不同的目的或含义。不要为同一个目的或功能使用不同的图标。

文本备选方案 ​

你可能需要为图标提供文本标签或备选文本描述，特别是针对视力障碍人士使用的屏幕阅读器。

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

关于独立图标 ​

图标通常不太可能独立存在，没有语义上有意义的包装元素。在大多数情况下，它们将是徽章、按钮（包括图标按钮）、导航项或其他交互 UI 元素的一部分。

WARNING

如果你的某些图标独立存在，并且它们服务于非装饰功能，请确保为它们提供适当的可访问标签。

简而言之：为语义图标提供可访问标签，但不为装饰图标提供。

一般来说，尽量避免使用无交互的功能图标，我们推荐：

  1. 要么在它们旁边添加可见描述，或者
  2. 将它们置于徽章、标签或按钮中，至少为它们添加工具提示。

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

关于按钮 ​

不要在按钮上使用的图标提供可访问标签，因为屏幕阅读器会读出此标签，导致无意义的文本。

代码示例
tsx
// 不要这样做
<button>
  <Plus aria-label="Plus icon"/>
  Add document
</button>

// 这样做，只需留空
<button>
  <Plus/>
  Add document
</button>

关于图标按钮 ​

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

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

代码示例
tsx
// 不要这样做
<button class="btn-icon">
  <House/>
</button>

// 也不要这样做
<button class="btn-icon">
  <House aria-label="Home icon"/>
</button>

// 这有效但可能不是最佳解决方案，参见下面
<button aria-label="Go to home" class="btn-icon">
  <House/>
</button>

// 相反这样做
<button class="btn-icon">
  <House/>
  <span class="visually-hidden">Go to home</span>
</button>

关于 aria-label 的说明 ​

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

示例 - Radix UI ​

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

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

<AccessibleIcon label="下一个项目">
  <ArrowRightIcon />
</AccessibleIcon>

示例 - Bootstrap ​

html

<div>
  <i data-lucide="phone" aria-hidden="true"></i>
  <span class="visually-hidden">电话号码</span>
</div>

示例 - Tailwind CSS ​

html

<div>
  <i data-lucide="phone" aria-hidden="true"></i>
  <span class="sr-only">电话号码</span>
</div>

如果不确定，你可以考虑学习更多 关于 如何隐藏内容。

进一步资源 ​

我们还推荐查看以下关于可访问性的资源：