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

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

始める前に

必要なロール：アドミン

このタスクについて

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

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

手順

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

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

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

   

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

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

   

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