Ignite UI for React のアクセシビリティ

Ignite UI for React のテーマ設定エンジンは、スタイル設定レイヤーにアクセシビリティを組み込んでいます。任意の背景色に対するテキスト カラーを実行時に計算して WCAG のコントラストしきい値に照らして測定し、すべてのタイプ スケールを相対単位で表現してユーザーの設定に合わせてテキストをスケーリングし、色覚異常のある読者向けのオプトインのカラー パレットを提供します。

概要

Ignite UI for React のアクセシビリティは、それぞれ独立して構成する 2 つのレイヤーによって提供されます。

このページでは 1 つ目のレイヤーを扱います。テーマ設定エンジンでスタイル設定するすべてのコンポーネント (エンジンの上に独自に構築するコンポーネントを含む) に適用される機能について説明します。

以下の表は、アプリケーションを最終的に使用する人に対してテーマ設定エンジンが行うことをまとめたものです。各行はアプリケーションの基盤となる入力であり、適合の結果ではありません。カラーを指定するのはユーザー自身であり、エンジンは WCAG のしきい値に照らして測定した組み合わせを生成しますが、完成した製品が適合しているかどうかの検証は引き続きユーザーの責任です。

はじめる前に

このページの内容のうち何に依存できるかは、3 つの前提によって決まります。

テーマ設定エンジンはスタイルを設定するものであり、セマンティクスを追加するものではありません。 ARIA ロール、キーボード処理、およびフォーカス管理は、テーマではなくコンポーネント ライブラリから提供されます。テーマを適用するだけでは、カスタム コントロールはアクセシブルになりません。

コントラストの計算は、生成されたパレット カラーに適用されます。 エンジンは、palette() ジェネレーターによって生成されたパレットの前景色を計算します。個々のコンポーネント テーマでは、特定の前景トークンと特定の背景トークンを手動で組み合わせている場合もあります。それらの組み合わせはテーマごとに設定されており、以下で説明するコントラストの計算によって生成されるものではありません。コンポーネント トークンを直接オーバーライドする場合は、contrast() で結果を検証してください。

完成した製品の適合性はユーザー自身が検証する必要があります。 エンジンが制御するのは、パレット、計算された組み合わせ、タイプ スケールといった入力であり、アプリケーションがそれらをどのように使用するかではありません。ブランド カラーから構築したパレットは完全な適合に達することができますが、エンジンがその結果を保証することはできません。適合を表明する前に、レンダリングされた結果を確認してください。

次のステップ

• パレット カラーの上にテキストを配置する場合は、前景色をハードコーディングする代わりに、contrast-color() を使用します。
• アプリケーションでチャートをレンダリングする場合は、色覚異常に対応したチャート パレット を有効にします。
• 独自に導入するカスタムのカラーの組み合わせは、リリース前に contrast() で確認します。
• Theming MCP サーバー でパレットを生成する場合、サーバーはパレットの構築時にサーフェスとグレーのコントラストを WCAG のしきい値に照らして確認します。

利用可能なツール

テーマ設定エンジンは、このページで説明するアクセシビリティの動作のために、以下の Sass 関数とミックスインを公開しています。

一般的なワークフロー

ブランド カラーでテキストを読みやすく保つ

パレットから取得したすべての背景には、ハードコーディングした black や white ではなく、contrast-color() を組み合わせます。

.my-component {
    background: color($color: 'primary', $variant: 500);
    color: contrast-color($color: 'primary', $variant: 500);
}

テーマが既に出力している変数を使用した、プレーン CSS での同じ組み合わせ:

.my-component {
  background: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}

パレット由来ではないカラー (テナント カラー、ユーザー設定、実行時に設定される値など) には、adaptive-contrast() を使用します。

.my-component {
    --bg: #09f;

    background: var(--bg);
    color: adaptive-contrast(var(--bg));
}

adaptive-contrast() は相対カラー式の薄いラッパーであるため、Sass を使用しなくても同じ結果を得られます。--y-contrast はテーマによって定義されます。

.my-component {
  --bg: #09f;

  background: var(--bg);
  color: hsla(from color(from var(--bg) var(--y-contrast)) h 0 l / 1);
}

計算はビルド時ではなくブラウザーで行われます。スタイルシートのコンパイル後に背景色が変わると、前景色もそれに合わせて再計算されるため、実行時のテーマ切り替えやテナントごとのブランディングでも組み合わせが維持されます。

コントラスト レベルを設定する

計算された前景色は、--ig-contrast-level CSS 変数に保持されている WCAG のしきい値に照らして測定されます。この変数のデフォルトは var(--ig-wcag-aa) です。a、aa、aaa の 3 つのレベルが事前定義されています。

パレットを生成する際に、アプリケーション全体のレベルを設定します。

@include palette($palette, $contrast-level: 'aaa');

ページの一部だけレベルを引き上げるには、そのスコープで変数をオーバーライドします。

.high-contrast-panel {
  --ig-contrast-level: var(--ig-wcag-aaa);
}

コントラスト レベルは、計算された前景色が黒と白の間で切り替わる輝度のしきい値を移動させるものであり、選択できる 2 つのカラーを変更するものではありません。また、aaa を設定するだけで組み合わせが適合するわけではなく、それは選択した背景色によって決まります。contrast() で検証してください。生成されるコントラスト変数については、パレット を参照してください。

ユーザーのブラウザー設定に合わせてテキストをスケーリングする

構成は必要ありません。提供される 4 つのテーマのすべてのタイプ スケールは、font-size、line-height、letter-spacing、およびマージンを rem() 関数で表現しているため、出力されるすべての値はルートのフォント サイズに対する相対値になります。

ライブラリは、基準サイズを読み取り可能な値として記録します。

--ig-base-font-size: 16px;

ライブラリが html { font-size: … } ルールを出力することはありません。このルールを記述することは、テーマ設定システムがデフォルトのテキストを拡大しているユーザーの設定を上書きしてしまう最も一般的な原因であるため、これは重要です。ライブラリは基準サイズを読み取るだけなので、ブラウザーでより大きなデフォルト サイズを設定しているユーザーには、Ignite UI for React のテキストもより大きく表示されます。

これは、スタイル設定レイヤーにおいて WCAG 2.1 1.4.4 テキストのサイズ変更 (レベル AA) に対応するものです。

コントラストのしきい値を上下させる

計算された前景色が黒から白に切り替わるレベルは CSS 変数に保持されているため、Sass を使用せずに変更できます。デフォルトは AA です。

:root {
  --ig-contrast-level: var(--ig-wcag-aaa);
}

Sass では、palette() および adaptive-contrast() ミックスインが a、aa、または aaa を直接受け取ります。

色覚異常に対応したチャート パレットを有効にする

チャートは一般に色相のみでシリーズを区別しますが、これは色覚異常のある読者には機能しません。テーマ設定エンジンには、一般的な色覚異常の形態でも区別しやすいカラーで構成された 2 つ目のチャート パレットが用意されています。

このパレットはデフォルトでは無効です。configure-colors() で有効にします。

// Include at the top level, before your theme includes.
@include configure-colors($enhanced-accessibility: true);

これにより、すべてのチャート テーマがアクセシブルなカラー セットを使用するようになります。チャートのブラシはテーマの生成時に設定されるため、この機能には Sass が必要です。ビルド済みのテーマ CSS には、ブラシ用の変数は公開されていません。

コントラスト比を自分で確認する

エンジンは WCAG の相対輝度の計算式を実装して公開しているため、ライブラリが使用しているものと同じ実装で独自のカラーの選択を確認できます。

$ratio: contrast(#09f, #000);   // 7
$lum: luminance(#09f);          // 0.3

コンポーネント トークンを直接オーバーライドする場合や、パレット ジェネレーターが生成していないカラーの組み合わせを導入する場合には、常にこれを使用してください。これら 2 つはコンパイル時に実行されるため、CSS に同等の機能はありません。スタイルシートで比率を計算することはできません。

スクリーン リーダーから隠さずに入力を非表示にする

カスタム スタイルのチェックボックス、ラジオ、スイッチは、通常、セマンティクスとキーボード動作のために、その下にネイティブ入力を保持しています。これは hide-default() で非表示にします。

.my-checkbox input {
    @include hide-default();
}

このミックスインは固定された宣言のセットに展開されるため、CSS に直接記述することもできます。

.my-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: none;
  clip: rect(0, 0, 0, 0);
  outline: 0;
  pointer-events: none;
  overflow: hidden;
  appearance: none;
}

このミックスインは、入力をアクセシビリティ ツリーに残したまま画面外に移動させるため、入力のロール、キーボード動作、およびスクリーン リーダーの読み上げは維持されます。代わりに display: none や visibility: hidden を使用すると、コントロールは支援技術から完全に取り除かれ、視覚に頼らずに操作するすべての人にとってコンポーネントが機能しなくなります。

ダーク テーマを使用する

提供される 4 つのテーマ (Material、Bootstrap、Fluent、Indigo) にはそれぞれ、ライト パレットと並んで完全なダーク パレットが用意されています。ダーク表示は、光に敏感な人を含む一部のユーザーにとってアクセシビリティ上の必要性であるため、見た目の好みではなく、サポート対象の構成として扱ってください。選択方法については、パレット を参照してください。

トラブルシューティング

スタイルを変更したコンポーネントのテキストが読みにくい。 背景トークンを置き換えたものの、それと組になる前景トークンを置き換えていない可能性があります。前景色は固定値ではなく contrast-color() または adaptive-contrast() で設定し、contrast() で結果を確認してください。

$contrast-level: 'aaa' を設定したが、カラーがあまり変わらない。 コントラスト レベルは、計算された前景色が黒と白の間で切り替わる輝度のしきい値を移動させるものです。前景色に色味を付けるものではないため、達成可能な比率を前述の上限を超えて引き上げることはできません。AAA に達するには、背景色そのものを変更してください。

アクセシブルなパレットを有効にしたが、チャートのカラーが変わらない。 configure-colors() は、チャート テーマが生成される前にインクルードする必要があります。インクルードをテーマのインクルードより上に移動してください。

ブラウザーのフォント サイズを大きくしてもテキストが大きくならない。 アプリケーション自身のスタイルに html { font-size: … } ルールや px 単位の font-size 値がないか確認してください。テーマ設定エンジンはどちらも出力しません。

その他のリソース

• パレット — パレット カラーと、それに対応するコントラスト カラーがどのように生成されるか。
• タイポグラフィ — タイプ スケールとそのカスタマイズ方法。
• アクセシビリティ準拠 — コンポーネントごとの適合情報。
• WCAG 2.1 クイック リファレンス — このページで参照している達成基準。
• WAI-ARIA オーサリング プラクティス — インタラクション パターンごとに期待されるキーボードおよび ARIA の動作。

FAQ