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

で テーマビルダーコンポーネントを編集しているときに、コンポーネントがカラーコントラストの WCAG 2.1 に準拠していないことを示すエラー記号 ( ) が表示される場合があります。

始める前に

必要なロール：admin

このタスクについて

コンテンツと UI 変数を テーマビルダー ターゲットとする WCAG 2.1 コントラスト比は 4:5:1 です。この比率によって、明るい画面と暗い画面の色のコントラストと、それらがユーザーインターフェイスとどのように関連しているかが決まります。コントラスト比に慣れていない人のために説明すると、1桁目は明るい色のレベルを示し、2桁目は暗い色の相対的なレベルを示します。4:5:1 のしきい値は、視覚障がいのあるユーザーに最適な可視性を提供します。詳細については、 WCAG 2.1 に関する W3C 勧告サイトを参照してください。

コンポーネントごとのアクセシビリティ違反の総数は、編集パネルページに表示されます。

手順

1. [ コンポーネント スタイル ] タブで、アクセシビリティ警告記号が表示されている使用しているコンポーネントを選択します。

   

   構成可能なスタイルパネルには、選択したコンポーネントで使用可能な編集可能なフックが表示されます。

   

2. アイコンを選択すると、警告の説明を表示できます。

   図 : 1. アクセシビリティに関する警告

   

3. 警告メッセージに示されているように、鉛筆アイコンを選択してコントラストの問題を改善できます。

   図 : 2. コンポーネント エディタ(Component Editor)

   

4. 構成可能なスタイルパネルでアクセシビリティ警告記号を選択して、問題を修正するための詳細情報を取得します。

   

5. 警告内のいずれかのリンクを選択して、背景の塗りつぶしの色またはアイコンの色を修正します。
   注:

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

   

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