无障碍性

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)。

如果您发现文档或组件缺少无障碍性，请为文档或 UIkit 在 GitHub 上提交问题或拉取请求。

国际化

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);
}