无障碍

UIkit 是一个完全无障碍的前端框架。其所有交互式组件都开箱即用。但是，无障碍性在很大程度上取决于作者的标记。在每个组件文档中，我们都提供了关于如何使用 UIkit 以符合 WCAG 2.1 标准的最佳实践示例。

颜色对比

UIkit 的默认调色板可能颜色对比度不足，特别是柔和的文本和背景颜色。 WCAG 2.1 要求文本对比度为 4.5:1，非文本颜色对比度为 3:1。要满足颜色对比度要求，请相应地覆盖 Less 变量。

对于 UIkit 的默认样式，只需更改以下全局变量就足够了。

@global-color: #666;
@global-emphasis-color: #333;
@global-muted-color: #999;

@global-muted-background: #f8f8f8;

交互式组件

UIkit 的交互式 JavaScript 组件，例如幻灯片、灯箱、下拉菜单等，对键盘用户是无障碍的。我们实现了常见的键盘导航约定，其中 tab 和 shift+tab 键将焦点从一个组件移动到另一个组件，而其他键（如箭头键）将焦点移动到包含多个可聚焦元素的组件内部。在每个组件的文档中了解更多关于键盘交互的信息。

通过使用相关的 WAI-ARIA 角色、状态和属性，JavaScript 组件可以使用屏幕阅读器等辅助技术进行读取和操作。它们会自动在标记中设置所需的 HTML 属性。在每个组件的文档中了解更多关于无障碍的信息。

由于我们的 JavaScript 组件被设计为通用的，因此并非总是能够确定组件需要设置的精确的 WAI-ARIA 角色和属性。请参考 ARIA 创作实践指南 (APG) 以获取更多信息。

如果您发现文档或组件缺乏无障碍功能，请在 GitHub 上为文档或 UIkit 打开一个问题或拉取请求。

国际化

UIkit 支持其组件的语言国际化 (i18n)。可以翻译 aria-label 属性的默认文本。每个组件的翻译键都可以在相应的文档中找到。

有几种方法可以修改默认文本。您可以将一个对象传递给组件的 i18n 选项。

实例

可以按以下示例所示设置 i18n 选项。

作为有效的 JSON 格式

<div uk-marker='{"i18n": {"label": "Open"}}'></div>

作为单个属性

<div uk-marker i18n="label: Open;"></div>

作为带有 data- 前缀的单个属性

<div uk-marker data-i18n="label: Open;"></div>

或以编程方式将 i18n 选项传递给组件

UIkit.marker('.marker', {
    i18n: {label: 'Open'}
});

全局

可以通过扩展组件来全局更改组件的默认文本。

UIkit.mixin({
    i18n: {label: 'Open'}
}, 'marker');

完整翻译

这是一个应用了所有可用组件翻译字符串的示例。

const i18n = {
    close: { label: 'Close' },
    totop: { label: 'Back to top' },
    marker: { label: 'Open' },
    navbarToggleIcon: { label: 'Open menu' },
    paginationPrevious: { label: 'Next page' },
    paginationNext: { label: 'Previous page' },
    slider: {
        next: 'Next slide',
        previous: 'Previous slide',
        slideX: 'Slide %s',
        slideLabel: '%s of %s',
    },
    slideshow: {
        next: 'Next slide',
        previous: 'Previous slide',
        slideX: 'Slide %s',
        slideLabel: '%s of %s',
    },
    lightboxPanel: {
        next: 'Next slide',
        previous: 'Previous slide',
        slideLabel: '%s of %s',
        close: 'Close',
    },
};

for (const component in i18n) {
    UIkit.mixin({ i18n: i18n[component] }, component);
}