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

テーマビルダー でコンポーネントを編集すると、コンポーネントがカラー コントラストの 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. コンポーネントエディター

   

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

   

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

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

   

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