Доступность

Цветовые контрасты

Цветовая палитра 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;

Интерактивные компоненты

Интерактивные JavaScript компоненты UIkit, такие как слайд-шоу, лайтбокс, раскрывающийся список и другие, доступны для пользователей клавиатуры. Реализуется общее соглашение о навигации с помощью клавиатуры, в котором клавиши tab и shift+tab перемещают фокус с одного компонента на другой, а другие клавиши, такие как клавиши со стрелками, перемещают фокус внутри компонентов, которые включают несколько элементов, на которые можно наводить фокус. Узнайте больше о взаимодействии с клавиатурой в документации каждого компонента.

Используя соответствующие роли, состояния и свойства WAI-ARIA, компоненты JavaScript можно читать и использовать с помощью вспомогательных технологий, таких как программы чтения с экрана. Они автоматически устанавливают необходимые атрибуты HTML в разметке. Узнайте больше о специальных возможностях в документации каждого компонента.

Поскольку компоненты JavaScript разработаны как общие, не всегда возможно определить точные роли и свойства WAI-ARIA, которые должны быть установлены компонентом. Пожалуйста, обратитесь к ARIA Authoring Practices Guide (APG) для дальнейшего чтения.

Интернационализация

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