アクセシビリティ

UIkitは完全にアクセシブルなフロントエンドフレームワークです。すべてのインタラクティブコンポーネントは、初期状態からアクセシブルです。それでも、アクセシビリティは、作成者のマークアップに大きく依存します。各コンポーネントのドキュメントでは、WCAG 2.1 標準に準拠するためにUIkitを使用する方法のベストプラクティス例を提供しています。

色のコントラスト

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のissueまたはプルリクエストを開いてください。

国際化

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