アクセシビリティ基準を満たすようにコンポーネントを調整する

Web コンテンツアクセシビリティガイドライン (WCAG) 2.1 を満たすようにコンポーネントを調整します。テーマビルダーでコンポーネントを編集しているときに警告記号が表示された場合は、コンポーネントが色のコントラストのガイドラインに準拠していないことを示しています。

始める前に

必要なロール：admin

このタスクについて

テーマビルダー でコンポーネントを編集すると、コンポーネントが色のコントラストに関する Web コンテンツアクセシビリティガイドライン (WCAG) 2.1 に準拠していないことを示す警告記号 ( ) が表示される場合があります。コンテンツ変数と UI 変数 テーマビルダー ターゲットとする WCAG 2.1 コントラスト比は 3:1 です。この比率は、明るい画面の色と暗い画面の色の間のコントラストと、それらがユーザーインターフェイスとどのように関連しているかを決定します。1 桁目は明るい色のレベルを示し、2 桁目は暗い色の相対的なレベルを示します。3:1 のしきい値は、視覚障害のあるユーザーに最適な可視性を提供します。詳細については、 WCAG 2.1 の W3C 勧告サイトを参照してください。

アクセシビリティ違反の総数は、アクセシビリティインスペクターパネルの横にある赤色の番号付きバッジ ( に表示されます。

手順

1. [エディター] ページから、次の表に示す 2 つの方法のいずれかを使用してアクセシビリティ違反にアクセスします。

   オプション	説明
   アクセシビリティインスペクターから	アクセシビリティインスペクター ( アイコンを選択すると、アクセシビリティエラーのあるコンポーネントのリストが表示されます。赤いバッジは、テーマ内のアクセシビリティの問題の数を示します。 アクセシビリティに関する警告 記号をクリックすると、改善が必要なコンポーネントの状態に関する警告の説明が表示されます。 改善するコンポーネントのステータスの横にある鉛筆 ( アイコンを選択します。 注: [コンポーネントエディター] ページが表示され、構成可能なスタイルパネルに、選択したコンポーネントで使用できる編集可能なフックが表示されます。
   [コンポーネントスタイル] メニューから	[編集] タブを選択します。 アクセシビリティに関する警告記号を表示するコンポーネントを選択します。 構成可能なスタイルパネルからアクセシビリティ警告記号を選択して、警告の説明を表示します。 警告メッセージに示されているように、鉛筆( アイコンを選択して、コントラストの問題を改善できます。 注: [コンポーネントエディター] ページが表示され、構成可能なスタイルパネルに、選択したコンポーネントで使用できる編集可能なフックが表示されます。

2. 構成可能なスタイルパネルでアクセシビリティ警告記号を選択すると、問題を修正するための詳細情報が表示されます。

   

3. 警告内のリンクを選択して、コントラストの問題を修正します。
   注:

   カラーフックのいずれかへの変更を保存すると、元に戻す記号が表示されます。元に戻す記号を選択すると、すべての変更が元の色に戻ります。

   

4. 変更が完了し、アクセシビリティの警告記号が表示されなくなったら、[ 変更の保存] を選択します。
   例えば、コントラスト比違反に合格するカラーを選択すると、カラーピッカーで警告記号が緑色に変わります。