無障礙功能

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