组件是用户界面的主要构建块。构建可重用的组件库通过减少设计和技术债务以及加快流程来增强产品开发工作流程。核心组件不能被分解为细粒度的部分而不失去它们的含义。

使用辅助技术聚焦内容区域时，应从触发元素中宣布额外的上下文。

内容和触发器关系

手风琴有两种状态来切换其内容的可见性。如果手风琴触发器显示图标，则应在状态之间视觉上有所区别。

活动状态

内容区域应足够灵活，以支持各种类型的内容，包括其他组件。

构成

添加微妙的动画以帮助用户理解和遵循组件行为，在状态之间切换。

切换过渡

当按下触发元素时，手风琴切换内容区域的可见性。

手风琴

使用辅助技术时，警报应正确地宣布其辅助功能角色。

辅助功能角色

警报中的操作应与其文本相关，并提供一种对发送给用户的消息做出反应的方式。

补充操作

根据其角色区分警报的视觉外观至关重要。如果您使用背景颜色进行角色区分，请确保其与警报内显示的内容具有足够的对比度。

颜色

图标说明了警报的角色，并为色盲人士提供了有关警报的额外提示。

图标支持

警报可以适应视口大小，通常在移动设备上变为全宽，以节省一些空间。

响应式

支持标题可以帮助用户更快地了解长时间警报消息的上下文。

标题支持

警告显示有关整个页面或其特定区域的重要消息。

警告

当用于非装饰性图像并且没有文本表示其内容时，头像应提供辅助功能标签。

辅助功能标签

在没有图像的情况下使用头像形状时，应用背景颜色。确保图标和文本与背景根据WCAG AA标准具有足够的对比度。

多个头像可以堆叠在一起，以表示一组用户。

头像组

头像应将图片掩盖成它们的形状，并适用于任何图片大小，因为它们可能从未知的数据源获取此图片。

图片

当未传递图像或存在图像加载错误时，头像应能够显示具有不同图像、图标或文本缩写的备用方案。

图片备用方案

根据使用的区域，头像可能支持多种形状，如正方形或圆形。

形状

有许多上下文可使用头像，需要不同的组件尺寸。对于普通项目，请使用至少2-3种不同的尺寸，并确保至少有一个小尺寸可用。

尺寸

用户照片、组织或其他类型内容的可视化表示缩略图。

头像

徽章在您的产品中可能扮演各种角色，为每个角色定义预定义的颜色应帮助用户理解它们的含义。更改颜色时，请确保文本根据WCAG AA标准与背景具有足够的对比度。

徽章可以用作动态显示选定值的方式，并且应该有一种方法来解除它们。

可消除操作

徽章可以在没有任何文本内容的情况下使用。那通常 需要更改它们的样式以保持正确的形状。

空状态

为了更好地说明徽章的含义，您可以在文本旁边显示图标。请确保对于小徽章，图标内容仍然可识别。

当用作状态徽章（例如通知指示器）时，您应该能够将其相对于这些元素定位。

定位

徽章可以有多种尺寸，具体取决于徽章的使用位置。例如，您可以在营销页面上使用大尺寸。

基于徽章在产品中呈现的位置，您可能支持多个组件变体。例如，您可以使用一个淡化的背景来避免过多吸引注意力。

变体

紧凑元素，表示对象或用户输入的状态。

徽章

如果面包屑项不适合父容器，则列表应支持仅折叠项，以使相关项对用户可见。

折叠状态

列表中的每个项目都可以单独禁用，以防止用户导航到该页面。

禁用状态

图标有助于传达面包屑项链接的页面的角色。大多数情况下，您需要确保它们被一致地使用，而不仅仅是在列表中的随机项。

根据使用上下文，面包屑列表中的项目可以使用不同的分隔符样式。

自定义分隔符

顶级产品导航，帮助用户了解当前页面的位置并导航回其父级。

面包屑导航

当使用键盘或辅助技术聚焦按钮时，按钮应具有可见的焦点指示器。

焦点指示器

按钮应正确宣布按钮或链接的辅助功能角色，并根据传递给它的属性自动解决它。

在按钮被按下、用于选择值或切换页面上的其他元素时，提供视觉提示。

按钮在您的产品中可能扮演各种角色，为每个角色定义预定义的颜色应帮助用户理解它们的含义。更改颜色时，请确保文本根据WCAG AA标准与背景具有足够的对比度。

视觉上显示按钮不可交互，并限制其无法被按下。

当使用鼠标指针悬停在按钮上时，清晰地显示它是交互式的。

悬停状态

当与其标签一起使用时，图标可以轻松传达按钮的目的，或者在空间不足时可以不使用文本。仅使用图标时，请确保提供辅助功能标签。

在按下按钮后，指示用户必须等待其操作结果的时间。如果使用旋转器显示此状态，请 确保它不会更改原始按钮的宽度或高度。

加载状态

根据将使用按钮的位置，它可以有多种尺寸。例如，您可以在应用程序的密集区域使用小尺寸。

使用多个按钮时，应有一种方法来区分主要和次要操作。按钮可能为用户扮演不同的角色或用于各种表面，并且它们必须改变外观。

按钮

日历日期应该可以使用键盘和辅助技术进行聚焦。进一步的日期导航应该使用键盘箭头或屏幕阅读器导航进行，并支持通过导航出列或行来切换月份。

键盘导航

当所选日期获得焦点时，辅助技术应该通告所选日期。

状态通告

除了日期数字之外，为星期几名称提供简短的标签，以便让用户更轻松地导航日期选择。

星期几名称

日历应针对产品支持的所有国家/地区进行本地化。这包括日期格式和正确的星期几排序。

国际化

日历可能在各种产品区域和视口中使用。确保支持不同的显示模式，以渲染一个以上的月份或垂直布局。

显示模式

为了帮助用户导航更长的日期范围，日历应提供一种轻松切换显示月份的方法。

月份选择

日历应支持单个日期和选择范围。选定的日期应该在视觉上突出显示，并且所选日期之间的范围应该对用户可见。

选定状态

显示一个或多个月中的日期的网格，并允许用户选择单个日期或日期范围。

日历

卡片可以与通常放置在卡片底部的操作一起使用，或者卡片本身可以是可点击的并代表一个操作。

附加操作

内容区域应具有足够的灵活性，以支持各种类型的内容，包括其他组件。

内容组成

多个卡片可以组合成单个内容区域列表。

卡片组

卡片通常与媒体内容一起使用。最受欢迎的选项是在内容上方有一个全宽区域或在卡片的一侧有一个区域。

媒体区域

在移动视口上，卡片通常是全宽的，以节省内容空间。

响应式设计

用于分组主题信息及其相关操作的容器。

卡片

应该使用键盘触发复选框选择。使用本机元素应自动提供此类交互。

键盘支持

在复选框被选中并用于表单提交时显示。

选中状态

使用禁用状态来防止复选框交互并从提交的表单值中删除其值。

当错误与复选框字段相关时，使用错误状态进行表单验证。始终使用文本错误以及不同的字段颜色。

错误状态

复选框可以分组以同时处理多个值。

复选框组

在复选框具有可选择子元素且仅有一些被选中时，以视觉方式显示。

不定状态

应该有一个与复选框字段相关联的文本标签。单击标签也应触发复选框选择。如果标签没有在页面上呈现，则辅助技术仍应该宣布它。

复选框

如果分隔线在布局中发挥非装饰性角色，则应由辅助技术宣布其角色。

无障碍角色

分隔线应分隔水平和垂直内容列表。

方向

分隔线

一旦打开下拉菜单内容，焦点环应移动到其内容区域内，并在关闭时返回到触发元素。

焦点捕获

下拉菜单应该对键盘和辅助技术进行可访问。用户应该能够使用单独的关闭操作关闭下拉菜单，或者一旦他们在内容区域之外按Tab键。

下拉菜单可用于上下文菜单、产品导航和其他用途。它们的内容区域应具有足够的灵活性，以支持各种类型的内容，包括其他组件。

下拉菜单应支持在悬停事件上显示其内容。一旦其触发器获得焦点，键盘用户应该有相同的行为。

悬停触发

下拉菜单内容应基于屏幕上触发元素的当前位置显示，并始终对用户可见。

动态定位

如果下拉菜单在移动设备上与桌面设备上不同，则应调整下拉菜单内容。

用户可以触发的上下文操作列表。

下拉菜单

大多数情况下，图标用作装饰元素。如果图标需要交互 - 应该使用按钮、链接或其他交互式组件包含该功能。

交互性

图标应支持设计系统令牌中可用的颜色值。此外，支持从其父元素继承颜色是一个好的实践。

图标应具有几个预定义的尺寸，以提供整体的产品体验。可以使用排版配对来为这些大小值提供文本大小对齐。

用于控制SVG资源外观的包装器。

图标

当图像是非装饰性的时，应提供描述图片内容的Alt文本。

Alt文本

根据屏幕密度，您应该支持加载多个不同尺寸的图像资源，并向用户提供相关的图像。

屏幕密度支持

当图像URL不正确或未定义时，应显示备用方案。这可以是具有背景的空框，图标或静态占位符图像。

图像备用方案

图像应该在支持的尺寸方面具有灵活性。除了仅支持宽度和高度之外，还应支持纵横比，以根据父元素动态缩放其比例。

用于显示图像并控制其行为的实用程序。

链接应正确地宣布按钮或链接可访问性角色，并根据传递给它的属性自动解决它。

可访问性角色

链接在您的产品中可能扮演各种角色，为每个角色定义预定义颜色应有助于用户理解它们的含义。由于链接是文本元素，因此它应该能够自动继承由其父元素定义的颜色，就像其他文本内容一样。

直观地显示链接不可交互，并限制其被按下。

链接应能够在作为文本元素的一部分使用时继承排版样式。

字体继承

可以在链接旁边使用图标来传达链接的目的。不应在没有文本标签的情况下在链接内使用图标。

在文本段落中使用时，链接应支持多行显示，而不会破坏文本流。

多行显示

交互式文本元素，用于在文本段落中进行导航。

链接

辅助技术应正确宣布列表的角色和显示的项目数。

列表项内容区域应具有足够的灵活性，以支持各种类型的内容，包括其他组件。

列表项可以使用项目符号、编号和其他样式和类型的排序。

排序

列表

如果加载指示器是独立的，请为其正在加载的内容区域提供可访问性标签。

可访问性标签

加载指示器应与系统动态设置同步，并在打开减少动态设置时减少其动画速度。

减少动态效果

加载指示器可能会在具有各种角色的元素内使用，并遵循其颜色方案。

在某些情况下，无法确定等待时间。应在加载完成或出现错误之前显示加载指示器。在其他情况下，最好指示剩余的加载时间。

加载持续时间

根据加载指示器呈现的区域的大小，加载指示器可能提供多个尺寸。

动画元素，用于传达进度，而不告诉进程需要多长时间。

加载指示器

当打开对话框时，用户焦点应移动到第一个可聚焦元素并保持在其中。关闭对话框时，焦点应返回到上一个活动元素。

可以通过按Esc键关闭对话框，并且对话框容器内的所有可聚焦元素都应可通过键盘导航访问。

对话框应使用正确的可访问性角色，并应由标题和副标题元素标记。如果没有可见的标题或副标题，则可以使用可访问性标签。

标题和副标题标签

由于对话框中的内容可能是可操作的，因此需要一个操作元素区域。该区域通常位于对话框容器的底部。

辅助操作

对话框应提供一种简单的关闭方式，因为它们在打开时会阻止内容。这可以是单独的关闭按钮或其中一个辅助操作。

关闭操作

主内容区域应具有足够的灵活性，以支持各种类型的内容，包括其他组件。

对话框可以位于屏幕中央，也可以显示为屏幕两侧的滑动工作表。

支持根据您显示的内容更改对话框的高度和宽度。

出现在主内容前面的容器，以提供关键信息或可操作内容。

对话框

分页应为辅助技术提供每个页面的清晰、动态标签，而不仅仅是在没有上下文的情况下宣布数字。

完整页面标签公告

分页应在焦点选中所选页面时宣布。

状态公告

提供选择在页面上显示的分页项目数量的选项。

每页项目数量

当您事先不知道可用页面的总数时，请使用不同的显示模式单独导航页面。

不确定的页面数量

定义所选页面周围呈现的页面范围。它有助于仅呈现有限数量的页面，但使用户比一次移动一页更快地导航。