可访问性

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 Authoring Practices Guide (APG) 以进一步了解。

如果你发现文档或组件在可访问性方面有所欠缺，请在 GitHub 上为文档或 UIkit 提交 issue 或 pull request。

国际化

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